Motion Design for IOS (45)

We still have two animations left, but they are bigger and need some thinking. We need to rotate the top line 45 degrees clockwise (so the right side is tilted downward), then we need the bottom line to rotate counterclockwise by 45 degrees (so the right side is tilted upward). Turning counterclockwise means that we need to rotate a negative value, so it is-45 degrees. Of course, animations do not accept degrees, they require angular values, and 45 degrees are Π/4 at an angle. To do some spin animations.

Rotate the top line to formXPopspringanimation *toprotate = [self. Top. Layerpop_animationforkey:@"Toprotate"];if (toprotate) {toprotate. Tovalue= @ (-m_pi/4);} else {toprotate = [popspringanimation animationwithpropertynamed:kpoplayerrotation];Toprotate. Tovalue= @ (-m_pi/4);Toprotate. Springbounciness= One;Toprotate. Springspeed=18.0F;[Self. Top. LayerPop_addanimation:toprotate forkey:@"Toprotate"];}//rotate the bottom of the line to formXPopspringanimation *bottomrotate = [self. Bottom. Layerpop_animationforkey:@"Bottomrotate"];if (bottomrotate) {bottomrotate. Tovalue= @ (m_pi/4);} else {bottomrotate = [popspringanimation animationwithpropertynamed:kpoplayerrotation];Bottomrotate. Tovalue= @ (m_pi/4);Bottomrotate. Springbounciness= One;Bottomrotate. Springspeed=18.0F;[Self. Bottom. LayerPop_addanimation:bottomrotate forkey:@"Bottomrotate"];}

The rotation of the pop animation is done on the layer (see kpoplayerrotation), so we add the animation to the layer that supports the views.

We rotate a line upward, rotate a line downward so they should cross in the middle, right? Let's see what we got.

Well, intuitively, that might not be what you're looking for. The reason that the rotation animation causes the lines to change is that the lines are rotated around the center of their layer. So these views rotate like a seesaw, not the way we want them to cross in the middle. We can change the anchor point of the layer rotation, but this is a bit cumbersome because doing so will reposition the layer and we need to adjust the frame, which is purely a problem. So, it's easier to do that, we can move the top line down a bit, then move the bottom line up once, and then overlap them.

Reposition the top line to the middle of the button popspringanimation *topposition = [self. Top. Layerpop_animationforkey:@"Topposition"];if (topposition) {topposition. Tovalue= @( in);} else {topposition = [popspringanimation animationwithpropertynamed:kpoplayertranslationy];Topposition. Tovalue= @( in);Topposition. Springbounciness=0;Topposition. Springspeed=18.0F;[Self. Top. LayerPop_addanimation:topposition forkey:@"Topposition"];}//reposition the bottom line to the middle of the button popspringanimation *bottomposition = [self. Bottom. Layerpop_animationforkey:@"Bottomposition"];if (bottomposition) {bottomposition. Tovalue= @(- in);} else {bottomposition = [popspringanimation animationwithpropertynamed:kpoplayertranslationy];Bottomposition. Tovalue= @(- in);Bottomposition. Springbounciness=0;Bottomposition. Springspeed=18.0F;[Self. Bottom. LayerPop_addanimation:bottomposition forkey:@"Bottomposition"];}

After some testing and trial-and-error, I decided to move the top line down 29 pixels and the bottom line up by 29 pixels, which would make them coincident best. You can also do some trigonometric geometry calculations to come up with this value. We use Kpoplayertranslationy animations to rotate two lines to the X in the middle of the button.

It's done! Pretty good, huh? Now, when you click the button, it turns three lines into two lines, but what happens when the user taps again? At this point, nothing happens because we do not implement any other conditional branching logic to change the x back to three lines. Fortunately, we can copy and paste the animation very simply, but change the Tovalue value to the initial value. For example, we need to rotate two lines back to 0 degrees, remember to move 29 pixels and change their color back to white. There is also the need to fade the middle line back into 100% opacity. So it's all done and we got a nice burger button.

Finished viewing the integration set: Https://github.com/Cloudox/Motion-Design-for-iOS
All rights reserved: Http://blog.csdn.net/cloudox_

Motion Design for IOS (45)