iOS How did they build this user interface?

[checkbox]

I'm an experienced programmer but have started with Objective-C a few months ago. I have a couple apps on the go and so far so good. I am comfortable with view controllers, table views, and your basic UI stuff that you see in every book/tutorial, but I've recently downloaded the Holographium app and the UI blew my mind. Of course, I want to know how to do that now!

What blew me away was not only the look (which can easily be achieved by a competent designer) but how every little button you touch animates and the UI sort of "transitions" to another state. I know how to apply an image here and there to a table view but this is much much more than that.

Could anyone give me some pointers on how this could have been achieved? (no need for code, just general concepts).

Since it's a paid app, I'm posting screenshots here: https://www.google.com/search?hl=en&q=holographium+ui&gs_sm=e&gs_upl=344l4443l0l4953l16l13l0l0l0l0l473l5187l3-7.6l13l0&bav=on.2,or.r_gc.r_pw.r_cp.,cf.osb&biw=1440&bih=707&um=1&ie=UTF-8&tbm=isch&source=og&sa=N&tab=wi&ei=HQQLT_qjGMvogQfNroigAg

Thanks!

 

[ArtOfWarfare]

You said that it was more than just the appearance of the app but all you gave us was screenshots so I'm not really sure what you're looking for.

This tutorial talks about how to customize various UI elements in iOS 5:

http://www.raywenderlich.com/4344/user-interface-customization-in-ios-5

Other than that, learning how to use animation blocks is good.

If you have anything more specific you could tell us about what you'd like to achieve or have a video showing what you'd like to emulate, it might help us help you more.

 

[Cromulent]

You can animate the UI by directly accessing the layer property of each UIView subclass that your app uses.

For more information see here:

http://developer.apple.com/library/ios/#documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/AnimatingViews/AnimatingViews.html#//apple_ref/doc/uid/TP40009503-CH6-SW1

The View Programming Guide for iOS also talks about how to implement completely custom views which gives you total control of how the view is displayed and reacts to events. See here:

http://developer.apple.com/library/ios/#documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/CreatingViews/CreatingViews.html#//apple_ref/doc/uid/TP40009503-CH5-SW23

 

[firewood]

Look up CALayers, CAAnimation, and the "game loop" as an animation programming methodology. Perhaps Open GL ES as well.

I prefer using my own game loop and my own path logic over using CAAnimation logic, as this allows me to know or position the exact locations of the animated objects every frame, instead of just the beginning and end of a path.

 

[North Bronson]

The new 5.0 OS also gives developers simple ways to customize views and controls. Check the UIAppearance additions.

Certain controls can also take images as background views. Certain images support animating through multiple image frames. You should be able to put the two together and give the application an array of images that the control can iterate through for an animation effect. Core Animation is really good for matrix transitions: scaling, rotations, and things like that. Complex animations that are working pixel-by-pixel are usually done with OpenGL -- unless you render the animation to a series of bitmaps and display the animation that way.

 

[seepel]

I watched a video of the app and I don't think I saw too much that couldn't be done with animation blocks.

 

[checkbox]

Thanks for all the answers! I now have a lot of new things to investigate that I have never used before (layers, animation blocks, etc). I'll read up on and play around with all the suggestions posted and if I can't still figure out what I'll come back.

Thanks again!

 

[Taptanium]

Making of Holographium

Hi guys,

I'm the creator of Holographium and would like to bring a bit light in the dark. Well, it's a light painting app so that seems to make sense

1.0 vs. 2.0
The UI of Holographium 1.0 was relatively boring compared to the UI of Holographium 2.0 and later. There's a good chance you've seen videos featuring the old UI, which indeed can be done entirely using Core Animation.

However, the UI in Holographium 2.0 is far more complex than that. Unfortunately there aren't many videos out there featuring the new, awesome UI. I've made one which briefly shows the transitions you're talking about: http://vimeo.com/34039037


Animations: How they're done in Holographium
I've spent about one year fulltime to develop the UI for Holographium 2.0. In short, it uses artificial intelligence and a finite-state machine to determine the animation paths on the fly based on rules and constraints. The combinatoric explosion of the UI state graph is way too big to be handled manually.

The goal for developing a system like this for a niche app like Holographium was to find a way how to animate insanely complex transitions like in the Transformers movies. I'm still not there yet, but my long term goal is to build apps that just transform from one state to another as crazy as Optimus Prime.

The animation itself is performed using plain old Core Animation. However, Core Animation is just executing units of work in this case. It's not actually responsible for figuring out the complex transitions.

Basically I'm defining target states and constraints for components in the UI, and let the AI figure out how to animate to any given target state, respecting all the constraints of moveable parts.

The UI consists of hundreds of elements, and is accompanied by round about 50 sound effects divided in 3 categories. Some of them synthesized at runtime for physically-based effects such as the sliding and latch sounds of the 3D depth slider.


Oh btw: It's not "they". It's "he". Just a one-man show. One monkey doing everything. Absolutely everything

 

[checkbox]

Taptanium,

Thanks for dropping by. The UI in Holographium is definitely something else. I can't recall any other app that has something even close. Also the attentiveness to detail is incredible; there isn't a single pixel out of place.

Since I've posted the question I've learned the rudiments of Core Animation (as suggested by some of the replies) and have managed to do something pretty decent for my app but nowhere near Holographium. Still I suspected something fancier was going on in Holographium as there isn't one transition but many taking place at the same time and as you say, the combinations to go from one place to another are way too many to be done by hand.

Nice "bar raising" app! I can't say that I've used it that much (I'm an amateur photographer with a decent DSLR but not that much spare time). BUT, I've shown Holograpium to fellow developers and everyone is always amazed at the UI.

Excellent job!

PS: How far are you with your Optimus Prime-type transitions app?

 

[ArtOfWarfare]

Just curious... How many hours would you say you put into the app and how many daily downloads does it average?

(I'm just wondering how well your polish an app for a year paid off.)

 

[Taptanium]

Great to see you're enjoying the interface.

There are some cool Taptanium apps on the horizon. Some sneak peeks:
http://dribbble.com/taptanium | http://bit.ly/mYb3kH

Holographium is mostly a UI research project so ROI was not really relevant. It's a springboard to move forward, get in touch with awesome designers and developers, be taken serious by the big names out there, etc.