Time in animation for iOS development

Overview

In the animation, we specify the duration of the animation. For example

scaleAnimation.duration = self.config.appearDuration

So what is the definition of this time? Does it mean the absolute time?

Hierarchical time structure

The layer's display position on the screen is defined based on the position of the parent layer and itself relative to the parent layer offset.
Similarly, each layer has its own time space, and when it calculates local times, it needs to calculate the local time based on the time of the parent layer and a certain conversion rule.
This rule is a CAMediaTiming protocol. Every one CALayer and CAAnimation realized this agreement.
?
?

About the concept of time

1. Absolute timeAbsolute time
CACurrentMediaTimereturned by the function, actually called mach_absolute_time() .
2. active local time
   The CAMediaTiming time on the current object calculated based on the protocol.
3. basic local time
   Because animations can be repeated (repeat) or played back (play backwards). Need to convert active local time the time associated with animation.
   For example active local time , 5.5s, the number of repetitions of the animation is 10, the animation duration is 1s. So the corresponding local time for 5.5s active local time is 0.5s.

CAMediaTimingAgreement

1. beginTime

   Required. Specifies the begin time of the receiver in relation to its parent object, if applicable.

   Specifies an offset that specifies the time of the parent object and the Times of the child object.

2. speed

   Specifies how time was mapped to receiver's time space from the parent time space

   Applies a scaling factor to the animation and the speed of the sub-animation. If speed is 2.0, then local time passes at a rate of twice times the speed of the parent object's elapsed time.

3. timeOffset

   Required. Specifies an additional time offset in active local time.

   An offset was made to the local time.

Time Conversion formula

1. Convert from parent layer to active local time\[t= max\left\{(t_p-begintime), 0\right\}*speed+offset \] where \ (t\) is local time, \ (t_p\) is the time of the parent layer, Others are CAMediaTiming fields that require implementation.

Example

Use a simple example to illustrate the effects of each parameter. The animation is simple, and a red block moves from left to right. The duration of the animation is 1s and there is no repetition.
?

2. Set speed to 2,begin time of 0.3s,offset to 0.5s, the effect is as follows
   ?
   Compared with the above, three different
   1. The animation is twice times faster than the original, because the speed of the animation is 2.
   2. When the animation starts, the position of the slider is centered, not on the left. This is because the offset is 0.5s. Since the duration of the animation is 1s,0.5s, the animation is just half the time, and the slider position is in the center of the screen.
   3. Click the Start Animation button to start the animation, there is a delay, this is because the time to begin is not the default value, but there is a delay of 0.3s.
4. Image representation of time transformation
   1. Active local time from the parent layer to the child layer
      ?
      In the figure, the slope of the line is speed, the first Y-value is not zero, and the corresponding horizontal axis is begintime, and the corresponding y-coordinate is offset
   2. From active local time to the basic local time diagram, the x-axis length of the part that is not 0, which is the animation times, is specified by Repeattime or repeatduration. Since this animation has no repeattime or repeatduration, it is the duration of the animation. If you specify the time of the animation, such as RepeatCount to 3, then the non-0 chapters repeat 3 times.
      If autoreverses Yes is specified, the polyline partially has a negative curvature.
      Offset is the horizontal axis coordinate of the first point that does not have a 0. fillModeIt can be understood as the Y value that is not in the animation time. If kCAFillModeBackwards , corresponds to the horizontal axis before offset, the longitudinal axis corresponds to offset. kCAFillModeForwardscorresponds to the horizontal axis after the animation ends, the vertical axes are saved unchanged.
6. Parent object and child object linkage
   In our case, the animations are added to the layer, and they all obey the CAMediatiming protocol, and it CAMediatiming appears that the parent of the animation is a layer.
   1. Set the speed of the parent object
      We set the speed of the layer to 2, the tempo of the animation is 0.1, the actual velocity will be 0.2.
   2. Set the offset setting of the parent object to offset 0.5, and the animation will begin in half.
      ?

About BeginTime

According to the formula
\[
t= max\left\{(t_p-begintime), 0\right\}*speed+offset
\]
How should begintime be specified here? If you want to execute the delay 5s of an animation added to a layer, should the begintime be set directly to 5?
Because BeginTime is a time offset relative to the parent object (layer). Because layer may exist long ago, t_p\ is a very large value for animations. Specify begintime directly as 5s, then \ (t\) will be a very large value. The correct approach is to set BeginTime to 5s+ this layer is added to the parent layer, the time spent, called Addtime.

    animation.beginTime = addTime + delay;

How to get Addtime

addTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];

Reference

Controlling animation time
Controlling animation time
Time Warp in Animation

Time in animation for iOS development