IOS block-base Animation Simple usage + keyframe animation Set linear change speed problem

this article reprinted to http://www.tuicool.com/articles/aANBF3mTime 2014-12-07 20:13:37segmentfault-Blog original http://segmentfault.com/blog/alan/1190000002411296

The various animations of iOS are pretty, and I believe this is one of the reasons that attracts many people to buy the iphone. Not only that, it's also a big reason for me to do iOS, because it's so easy to make some decent animations on iOS!

Here's an introduction to the simple use of iOS block-based animation. There is a temporary solution to the problem of the pit Daddy, please the insider to enlighten.

The first is to implement the following animation:

let mView = view.viewWithTag(1) as UIView!mView.alpha = 0UIView.animateWithDuration(1, animations: {  mView.alpha = 1 }, completion: {  finished in  UIView.animateWithDuration(1, animations: {   mView.alpha = 0  }) })

Create a new Singleview template, add a View in the storyboard, set the color randomly, tag to 1.

Then paste the above code into the view controller's Viewdidload method and run it.

The use of Block-base animation is very simple, first set the initial state, and then in the Animationwithduration or other animation method animations set the end of the state, the other all do not tube.

In the code above, first let the transparency of MView from 0 to 1, then set an animation again in completion's closure, and let MView's transparency go back to 0.

Many properties of view can be animated in this way, with a detailed list in the document.

Key-Frame Animations

Uiview.animatekeyframeswithduration (2.0,Duration     Delay0,   Options:UIViewKeyframeAnimationOptions.Repeat,Set Repeat Playback   Animations: {First Keyframe, alpha from 0 to 1 uiview.addkeyframewithrelativestarttime (0,Start time    relativeduration: 0.5, //duration      animations: { Mview.alpha = 1} ) //second keyframe, Alpha from 1 to 0 uiview.addkeyframewithrelativestarttime (0.5,< Span class= "indent" >    relativeduration: 0.5,     animations: { Mview.alpha = 0})}, Completion:nil)   span>                 

Or the same animation as above, but this time it's a little bit better. (For this example I actually prefer the previous piece of code ...) ）

It is important to note that the StartTime and relativeduration in Addkeyframewithrelativestarttime are relative to the duration of the entire Keyframe animation (here is 2 seconds), and the set to 0.5 represents the 0.5=1 (seconds).

Hang Daddy

There is a problem when implementing the above effect: iOS These animations default to the speed at which the start ends slowly, the middle is fast, and the effect of this looping animation is uneven. The temporary solution is as follows:

It is not known that Apple is not recommended to use uiviewanimationoption here, but these two lines did solve the problem.Let raw = UIViewKeyframeAnimationOptions.Repeat.rawValue | UIViewAnimationOptions.CurveLinear.rawValueLet options = Uiviewkeyframeanimationoptions (raw) uiview.animatekeyframeswithduration (2.0, Delay:0, Options:options, animations: {Uiview.addkeyframewithrelativestarttime (0, Relativeduration:0.25, animations: { Mview.alpha =1 Mview1.alpha =0 Mview2.alpha =1 Mview3.alpha =1})Uiview.addkeyframewithrelativestarttime (0.25, Relativeduration:0.25, animations: { Mview.alpha =1 Mview1.alpha =1 Mview2.alpha =0 Mview3.alpha =1})Uiview.addkeyframewithrelativestarttime (0.5, Relativeduration:0.25, animations: { Mview.alpha =1  Mview1.alpha = 1  Mview2.alpha = 1  Mview3.alpha = 0})  Uiview.addkeyframewithrelativestarttime (0.75, relativeduration: 0.25, Animations: {  Mview.alpha = 0 Span class= "indent" > Mview1.alpha = 1  Mview2.alpha = Span class= "number" >1  Mview3.alpha = 1})}, Completion:nil)            

I thought the key frame animation parameter uiviewkeyframeanimationoptions.calculationmodelinear can solve this problem, but it seems to be wrong, the document also did not mention other methods. Toss half a day quickly give up when, stumbled with Uiviewanimationoptions.curvelinear, incredibly solved. Back to the document, confirmed that the document really did not write ... Hehe (Someone found please tell me ...) ）

IOS block-base Animation Simple usage + keyframe animation Set linear change speed problem