Following the use of Swift language map coordinates to achieve the effect of spring, the implementation of the following methods are as follows:
The iOS animations are roughly divided into these categories:
Coreanimation Animation (Base) UIView animation (animatewithduration function with spring effect) Uidynamic animation (with physical engine)
Last time I wrote a bounce animation, as I was just beginning to learn, use the most basic CA animation, but because they can not write keyframe, so also cited an open source library to achieve the fall of the bounce effect, this is the realization of the demand, but not at all elegant-starting from iOS7, with 2, 32 kinds of animation, No longer need to use the old CA animation to 1.1 point pull out. The correct posture to do this animation, should be the following ~
Our demand is still the marker of this bounce:
This time I used 2, 32 ways to achieve, the effect is as follows:
First, UIView animation
Before using cabasicanimation implementation, not only the code more, but also with catransaction control back to a trip callback. In fact, directly with the iOS7 UIView animation is done:
Uiview.animatewithduration (0.2,
animations:
{self.marker.layer.position.y = =},
completion: {( Finished) in Uiview.animatewithduration (0.5, delay:0,
usingspringwithdamping:0.2,
initialspringvelocity: 5.0,
Options:UIViewAnimationOptions.CurveEaseOut,
animations: {//tuning of elastic parameters, refer to the "References" section
of this article SELF.MARKER.LAYER.POSITION.Y + +},
Completion:nil)}
In the ascent process, directly in the 0.2s time, moving up 30px, in the downward process, in order to express the effect of bouncing, Spring Series parameters, after a bit of adjustment, the feeling of the effect is very interesting. But the simple use of this has a disadvantage: we want to be similar to the gravitational drop, rather than a spring like bouncing to that position. Note that with the blue comparison line, we achieve the left side effect, in the animation process, it will exceed the blue line, so it is not in line with the demand.
Second, uidynamic animation
Uidynamic animation is a physical engine animation, we only need to set the physical characteristics of this "object", iOS will automatically help us to animate the physical world. First we create the physical properties of it:
var animator:uidynamicanimator?override func viewdidload () {
super.viewdidload ()
animator = Uidynamicanimator (Referenceview:view)}
override Func Viewdidappear (animated:bool) {let
gravity = Uigravitybehavior (items: [Marker2])/gravity let
elastic = uidynamicitembehavior (items: [marker2])/elasticity
Elastic.elasticity = 0.6 Let collision = Uicollisionbehavior (items: [Marker2])//edge let
EndY = MARKER2.FRAME.ORIGIN.Y + marker2.frame.height//
record marker2 The bottom coordinate
collision.addboundarywithidentifier ("Floor", Frompoint:cgpoint (x : 0, Y:endy),
Topoint:cgpoint (X:uiscreen.mainscreen (). Bounds.width, Y:endy))//Draw a line at the bottom of the marker2, from the left side of the screen to the right of the screen
animator!. Addbehavior (collision)
animator!. Addbehavior (Gravity)
animator!. Addbehavior (Elastic)}
First we create a animator and then create three properties about Marker2 's gravity, elasticity, and edge, attached to the animator. So this marker2 has physical properties. Then we lift it up as before:
Uiview.animatewithduration (0.2,
animations: {
self.marker2.layer.position.y = =},
completion: {( Finished:bool) in
self.animator!. Updateitemusingcurrentstate (SELF.MARKER2)//If not update, then animator does not know its position has been moved})
After the animation is finished, let animator to do it again, it reached the beginning of the article gif, the second marker bounce effect.
The article ends here, hope to be helpful to everybody, thank you.