IOS coreanimation Feature-principle (iv) Animation time control

• Objective
• Camediatiming protocol
  • Visualize the Camediatiming protocol
    • BeginTime
    • Fillmode
    • Autoreverses
    • RepeatCount
    • RepeatDuration
    • Speed
  • Hierarchical representation of animation speed
  • Other implementations of the Camediatiming protocol
    • Timeoffset
    • More animated time visualization illustrations
  • Controlling animation time
    • Slider
• Additions to Fillmode and ease
  • Fillmode
  • Ease
• Postscript

Objective

Although this chapter is called Animation Time control, but we do not go into the general animation time, we will discuss how the Coreanimation framework to control the time.
Most of the content of this chapter comes from http://ronnqvi.st/controlling-animation-timing/, you can look at the original English to deepen understanding, after all, translation capacity is limited.

Camediatiming protocol

All time-related properties (Duration, beginTime, repeatcount, etc.) are derived from the Camediatiming protocol, It is implemented by the parent class caanimation of Cabasicanimation and Cakeyframeanimation. The protocol defines a total of 8 properties, which gives you complete control over the animation time with these 8 properties. The documentation for each attribute is just a few sentences, but you can also learn by reading these documents and experimenting manually, but I think it is easier to understand the time by visualizing it.

Visualize the Camediatiming protocol

To show you different time-related attributes, including the effect that this property uses for itself, and the effect of blending with other properties, I'll perform an animation from Orange to blue. Shows the process from the beginning of the animation to the end of the animation (orange to blue), each of which represents a second, and any point on the timeline that corresponds to the color on the graph is the color of the view at that instant. For example, duration this property will be visualized as follows:

The duration is set to 1.5 seconds, so the animation will take 1 seconds plus half the 1 seconds to completely turn blue from orange.

图一.     将duration设为1.5秒

By default, Caanimation will be removed after the animation is completed, which is also visualized on the top, and once the animation reaches the end value, it is removed from the layer. So the background color of the layer will return to the Modellayer state (see previous chapter: Calayer's model layer and presentation layer). In this visual example, the background color of the layer itself is white, so you see a visualization in which the background color of the layer is back to white in the extra 2.5 seconds after 1.5 seconds.

BeginTime

If we add the animation's begintime to the visualization, we can see more of the situation.

图二. 将duration设为1.5秒，将开始时间设为1.0秒

Set the animation duration to 1.5 seconds, the start time to the current time (Cacurrentmediatime ()) plus 1 seconds so the animation will end in 2.5 seconds. After the animation is added to the layer, it waits 1 seconds before it starts (equivalent to an animation delay of 1 seconds).

Fillmode

If you want the animation to show the state of Fromvalue before it starts (during the time of the delay), you can set the animation to fill backwards: set Fillmode to Kcafillmodebackwards.

图三、填充模式可以用来在动画开始之前显示fromValue。

Autoreverses

Will make the animation walk normally, after the end of the inverse from the value back to the starting value (all animation properties will be reversed, such as animation speed, if the normal is fast after slow, then the reverse becomes slow and fast).

图四. Autoreverse将使动画在结束后又回到动画开始的状态。

RepeatCount

By contrast, RepeatCount can make the animation repeat two times (once the first animation finishes, as you'll see below) or as many times as you like (you can even set the number of repetitions to decimals, such as set to 1.5, so that the second animation is only half done). Once the animation reaches the end value, it immediately returns to the starting value and starts over again.

图五、repeatCount让动画在结束后再次执行

RepeatDuration

Similar to RepeatCount, but rarely used. It simply repeats the animation for a given duration (set to 2 seconds below). If the repeatduration is smaller than the animation duration, the animation will end early (RepeatDuration arrives and ends)

图六. repeatDuration使动画在给定时间内不停重复播放

These properties can be used together to achieve the effect of some animations repeating the reverse (or repeating the reverse in a set time) multiple times. As shown in the following:

图七. 把几个属性结合起来用

Speed

This is a very interesting time-related property. If the animation's duration is set to 3 seconds, and the speed is set to 2, the animation will end in 1.5 seconds as it executes at twice times.

图八. Speed设置为2将会使动画的速度变为2倍所以3秒的动画将只用1.5秒就能执行完

The power of the speed attribute comes from the following two features:
1, the animation speed is a hierarchical relationship
2. Caanimation is not the only class that implements the Camediatiming protocol.

The layered representation of the animation speed:

The speed of an animation is 1.5, and it is an animated member of a 2 animation group, and it will be executed at 3 times times.

Other implementations of the Camediatiming protocol

Caanimation implements the Camediatiming protocol, however coreanimation the most basic class: Calayer also implements the Camediatiming protocol. This means that you can set speed to 2 for a calayer, so all animations added to it will be executed at twice times. This also matches the animation time level, for example, if you add a speed of 3 to a layer of 0.5, then the animation will be executed at 1.5 times times.

Controlling the speed of the animation and layer can also be used to pause the animation, you just have to set it to 0. With the Timeoffset attribute, you can control the animation through an external controller (such as a uislider), which we'll explain later in this chapter.

Timeoffset

Timeoffset This property ah, it seems strange at first, the light look at the name, it should appear to be a property to control the animation time process (calculate the current state of the animation). The following visualization shows an animation with a duration of 3 seconds and an animation time offset of 1 seconds.

图9.你可以偏移整个动画但是动画还是会走完全部过程。

The animation will be executed from the first second of the normal animation (the state of Timeoffset 0) until it becomes completely blue after two seconds, and then it jumps back to the first state (orange) for another second. It's like we cut the first second of the normal animation and paste it to the end of the animation.

This property is not actually used on its own, but is used in conjunction with a pause animation (speed=0) to control the "current time" of the animation. The paused animation will be stuck at the first frame, and then you can control the animation process by changing the Timeoffset, because the first frame of the animation, as shown, is the frame specified by Timeoffset.

For example, a position-changing animation that moves a view from (0,0) to (100,100) for a duration of 1 seconds. If you pause the animation first, then set Timeoffset to 0.5, the animation will first be stuck in "first frame", and the first frame will be determined by Timeoffset, that is, the frame where the animation is working for 0.5 seconds is "first frame", when the animation stops at (50,50). Note that Timeoffset is a specific number of seconds, not a percentage.

More animated time visualization illustrations

Controlling animation time

Combining the speed and Timeoffset properties makes it easy to control what is currently displayed in an animation. For the sake of convenience, I will set the animation duration to 1 seconds. Timeoffset/duration the value of this fraction indicates the percentage of the animation, and the duration is set to 1, the number Timeoffset equals the animation process percentage.

Slider

We first create a cabasicanimation to create an animation that alters the layer background color and add it to the layer, then set the layer's speed property to zero to pause the animation.

Cabasicanimation *changecolor = [Cabasicanimation animationwithkeypath:@"BackgroundColor"];changecolor. Fromvalue= (ID)[UicolorOrangecolor]. Cgcolor; ChangeColor. Tovalue= (ID)[UicolorBluecolor]. Cgcolor; ChangeColor. Duration=1.0;//For convenience[ Self. MylayerAddanimation:changecolor forkey:@"Change Color"]; Self. Mylayer. speed=0.0;//Pause the animation

Then in the action method that the slider is dragged, we set the current value of the slider (the default 0 to 1, which is exactly the range of the animation Timeoffset) to the Timeoffset value of the layer.

- (IBAction)sliderChanged:(UISlider *)sender {    self.myLayer.timeOffsetUpdate"current time"}

This effect is like the way we drag a slider to change the background color of a layer.

Additions to Fillmode and ease

The above description of Fillmode is relatively simple, but also in the animation of time control there is a more important class: Camediatimingfunction, will be here in detail for you to explain

Fillmode

This concept is more difficult to understand if it is written in words, so I'll turn on my soul palette to explain the concept.

For a better understanding, we first define four time points: T0 represents the moment the animation is added to the layer, T1 represents the moment the animation begins, T2 represents the moment the animation ends, and T3 represents the moment the animation is removed from the layer (these four points of time can also be called the life cycle of an animation).

Here's a teenager who might ask, now, isn't it time the animation started when the animation was added to the layer? You forgot to think about the delay! If there is no delay, then T0 and T1 are really the same moment, but once the animation has a delay, then t0 and T1 a delay. Similarly, by default, animations are automatically removed from the layer as soon as they end, or T2 and T3 are the same time by default, but if we set removedoncompletion = False, then T3 will extend infinitely forward until we manually call the layer's Removeanimation method.

Let's write a simple animation, such as an animation that modifies transparency. The Modellayer property starts at 0.5, then we write an animation that modifies the transparency from 0 to 1, lasts 1 seconds, and sets a delay of 1 seconds (t0-t1, T1 to T2 are 1 seconds apart), and does not immediately remove the animation after the animation finishes.
If you want to start the animation when the view appears, please write the animation into the viewdidappear and don't write it into the viewdidload.

-(void) Viewdidappear: (BOOL) animated{calayer * layer = [Calayer layer];Layer. Frame= CGRectMake ( -, -, $, $);Layer. Opacity=0.5;Layer. BackgroundColor= [Uicolor Yellowcolor]. Cgcolor;[Self. View. LayerAddsublayer:layer];Cabasicanimation * animation = [Cabasicanimation animation];Animation. KeyPath= @"Opacity";Animation. Fromvalue=@0;Animation. Tovalue=@1;Animation. Duration=1;Animation. BeginTime= Cacurrentmediatime () +1;Animation. Removedoncompletion= False;[Layer Addanimation:animation forkey:@"Opacity"];}

Well, then we enable the soul artboard to represent the values of the properties of P (Presentationlayer) and M (Modellayer) during animation. In the Soul board, because 0.5 of this figure is too troublesome to draw, I also expand twice times, in the soul of the artboard 1 is 0.5,2 is 1. According to the rules of P and M, m sure the value in the whole process is 0.5 (shown in the soul artboard as 1), and p in t0 to T1 because the animation is not known how to affect p, so will maintain the state of M is 0.5, and then in T1 to T2 (animation beginning to the end of the animation) from 0 to 1 interpolation, to the end of the T2 animation, when the animation does not know how to affect P, so P holds the state of M is also back to 0.5:

This is the general case, You can run a look at the results: at the beginning of the second (t0-t1: deferred process) The entire layer is a state with a transparency of 0.5, the end of the delay, the start animation (T1-T2), the second layer will flash to a state of 0 transparency and then animate to a state of 1 transparency. After the end of the animation (T2-T3), p returns to the state of M and becomes 0.5 transparency state.
Now we add Fillmode.
We set the Fillmode to fill forward:

animation.fillMode = kCAFillModeForwards;

Here are two concepts: forward, fill.

What is forward, forward is toward the positive direction of time.

So what is padding? Because T2 to T3 this period of time animation does not know how to affect p, so for this period of time, the state of P should be "empty", if it is empty, then P will maintain the state of M. Instead, fill in these "empty" states of p with specific values. Since the keypath of our animation is opacity, we will fill the opacity of p in t2-t3, and the rule of filling is "forward", that is, "T2 to T3", to be blunt, is T2 to T3 this time period p opacity value is always maintained T2 when the value of P opacity, is actually the Tovalue value of the animation.

Embodied in the Soul Palette is:

In this case, until the animation is removed, p will remain tovalue, which is the transparency of 1, and the effect is not to flash back to the state of the ending value until the animation has ended.

This way, a backward fill is better understood:

The backward padding is t0 to T1, because the backward is the negative direction of time, so is the state of P in T0 to T1 this time from T1 to T0 fill, that is t0 to T1 time period p to maintain the state of T1 time is fromvalue state. The effect of this setting is to keep the fromvalue state in the delay time, and avoid the animation starting from the state of M to Fromvalue state:

animation.fillMode = kCAFillModeBackwards;

Shown in the Soul palette as:

If you want to fill both forward and backward, set the Fillmode to both for a long time:

animation.fillMode = kCAFillModeBoth;

This setting is shown in the Soul artboard as:

Ease

As for the ease effect, which is shown in caanimation as timingfunction, it needs to set a Camediatimingfunction object, actually specifying a curve, as the S-T function image, S is the vertical axis, the process of representing the animation, 0 means the animation starts, 1 indicates the end of the animation, T is the horizontal axis, the current time of the animation, 0 means the beginning, 1 means the end. The tangent slope of a point on the curve represents the animation speed at this point. Can be high school physics of linear motion of the displacement-time image.
The system comes with several ease effects that can be implemented by code, using Functionwithname: This class method to specify a function curve by its name:

ca_extern nsstring  * const  Kcamediatimingfunctionlinear __osx_available_starting (__mac_10_5, __iphone_2_0); Ca_extern nsstring  * const  Kcamediatimingfunctioneasein __osx_available_ Starting (__mac_10_5, __iphone_2_0); Ca_extern nsstring  * const  kcamediatimingfunctioneaseout __osx_available_starting (__MAC_10_5, __ IPHONE_2_0) Ca_extern nsstring  * const  Kcamediatimingfunctioneaseineaseout __osx_available_starting (__mac_10_5, __iphone_2_0); CA_EXTERN nsstring  * const  kcamediatimingfunctiondefault __OSX_ Available_starting (__mac_10_6, __iphone_3_0);  

Each name of the function image on the internet everywhere, if simple to understand, then the linear is linear, that is, the s-t image is a straight line, is obviously uniform motion, easein means to fade in, that is, to evenly accelerate the start, or to understand that the first slow and fast; That is, the deceleration stops, or is understood to be fast and slow. Easeineaseout is a fade effect and fade effect. Default is a smooth start smooth end process, similar to easeineaseout, but the effect is not so significant.

In addition to Functionwithname, the system allows us to use a Bezier curve as a function image:

+(instancetype)functionWithControlPoints:(float)c1x :(float)c1y :(float)c2x :(float)c2y;

This method has four parameters, the first two of which represent a Bezier curve, and the last two parameters represent the second control point of the Bezier curve. The starting point is (0,0) and the end point is (), so it is a Sanche Besel curve. Notice that both the definition field and the value range of the function are [0,1], so the values of the X and Y of the control points are calculated well. If you are not sure about Bezier curves, you can get formulas and expressions here at Wikipedia: http://en.wikipedia.org/wiki/Bezier_curve#Generalization

In general, the system comes with the function of the image is enough, if you want some strange effect, such as very slow and slow start, and then accelerate to quickly, you have to use the Bezier curve to control (presumably such an image: ╯).

Postscript

Well, the animation principle part of the content is here, I hope you can master this knowledge, they can help you understand how many of the effects are produced, as well as some of the causes of problems, more importantly, can help you in the following chapters to understand how some advanced techniques are used.
The practice of this chapter is relatively small, so it is necessary to spend their own practice digestion and do adequate experiments.
The next chapter will go into advanced animation techniques, how to use the simple API provided by Coreanimation to achieve a variety of cool effects, we can learn from the technology, but also learn some ideas, mastered these ideas, after encountering various effects of the animation can have ideas to achieve, This is the purpose of my writing this topic.

IOS coreanimation Feature-principle (iv) Animation time control