1

I am very confused with the 3D lookalike animation of Tiles on the Timeline in the Google Plus iOS App. I am working on it but I am not able to find success in creating a perfect 3D animation of the Objects. I have some simple knowledge regarding Animations with blocks for UIView elements. But I don't know how to apply a 3D Transition.

Could you help me?

I found this but its for android and answers are for js. Something similar to this.

enter image description here

Community
  • 1
  • 1
mayuur
  • 4,736
  • 4
  • 30
  • 65

2 Answers2

3

Did it myselves via CATransform3D after understanding Nikola's answer...

GitHub LInk :

https://github.com/mayuur/GooglePlusiOSUIViewAnimationSdk

mayuur
  • 4,736
  • 4
  • 30
  • 65
  • 1
    Yes, thanks a lot for the start! Actually I din't understand the code you had posted earlier. So, I went on and posted one more question on Stack and then got some clarifications about what these things were, made my own stuff and got the things working! :) – mayuur Jan 11 '13 at 18:10
  • Hey How did you implement it in multiple views...You got any more code you can post? – Jatin Jul 30 '13 at 15:28
  • @Jatin I don't have any more code but you could add your views at the far away position and then start giving them animations to come to their actual position. this way you could get it done! – mayuur Jul 31 '13 at 06:33
2

Here is how you can make a similar 3D transformation. Just make sure to tweak the rotation value.

CGFloat rotation = ??;
CATransform3D transform = CATransform3DIdentity;
transform.m34 = 1.0 / -1000.0;
transform = CATransform3DRotate(transform, rotation, 0.0f, 1.0f, 0.0f);
myView.transform3D = transform;

You can apply transformation to every one of your views that you want. In this case we add the transformation to the view named "myView" but in your case, it will be some other name. You say you know how to make an animation, so you can add this code to your animation block and apply the transformation to the view/views tat you need to.

Nikola Kirev
  • 3,152
  • 3
  • 22
  • 30
  • Could you please explain more? I didn't get much idea from this. – mayuur Jan 10 '13 at 15:00
  • Yes I understood that these transformations would apply on myView. But I dint understand on what basis you set m34 value? Also the arguments of CATransform3DRotate. I didn't understand them either. – mayuur Jan 10 '13 at 15:47
  • Right! Well, I have not had that much experience with 3D transformations. I produced the above code as a part of tutorial where the views are animated the way you want to. As for the arguments of the `CATransform3DRotate` , I can quote the documentation: `CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z)` "Rotate 't' by 'angle' radians about the vector '(x, y, z)' and return the result. If the vector has zero length the behavior is undefined: t' = rotation(angle, x, y, z) * t." Sorry for not being able to be more helpful. – Nikola Kirev Jan 10 '13 at 16:59