CAMediaTiming (Time Protocol) Detailed Explanation and Example Code

Detailed Explanation of CAMediaTiming (Time Protocol)

One protocol implemented through CAAnimation is called CAMediaTiming, which is the base class of CABasicAnimation and CAKeyframeAnimation (referred to as CAAnimation). Time-related attributes like duration, beginTime, and repeatCount are all in this class. Generally speaking, the protocol defines eight attributes, which are combined in one place in one way to accurately control the time. There are only a few words for each attribute in the document, so it is very likely that you have read it before reading this article, but I think using visual graphics can better explain the time.

Visual CAMediaTiming

I dynamically change orange to blue in order to show the attributes at different times, whether they are themselves or mixed. The block below shows the animation process from beginning to end, and every flag on the timeline represents 1 second. You can see any 1 point on the timeline, and the current color indicates the current time in the animation. For example, duration is visible like the following 1.

As we all know, CALayer and CAAnimation both implement CAMediaTiming protocol, so it is necessary to understand the attributes in CAMediaTiming protocol in Core Animation. However, the description of each attribute in Apple's documents is too simple for beginners to understand. This article mainly helps to understand the meaning of each attribute in CAMediaTiming protocol.

CAMediaTiming Protocol provides eight properties, which are explained below.

CAMediaTiming/Time Protocol

repeatCount, the number of repetitions of the animation, can be set to a decimal. Set to HUGE_VALF to indicate infinite repetition. repeatDuration, the total duration of animation, if it is greater than the single duration, it will be repeated; If it is less than a single time, it is truncated. duration, single animation duration. speed, the rate at which the layer or animation model elapses relative to the parent layer CALayer. fillMode, after the expiration date, whether the rendering effect of animated objects is frozen or removed. beginTime, relative to the start time of the parent object. Note that the absolute time of the system shall prevail. For example:

/**
 Current time 2 Start animation in seconds 
*/
keyFrameAnim.beginTime = CACurrentMediaTime() + 2;
/**
 As of the current time, the animation has been executed 2 Seconds, 
 Note that if the execution time is longer than the animation duration, the animation has already been executed. 
*/
keyFrameAnim.beginTime = CACurrentMediaTime() - 2;

7. timeOffset, Timeline Offset. Move the timeline to the offset position, and then perform the whole animation duration. Assuming the animation is 3 seconds long and the offset is 8, start at 8% 3 = 2, and execute for another 3 seconds, that is, end at 1/3 of the whole duration.

8. CACurrentMediaTime, which returns the current absolute time of the system (starting from this boot) in seconds.

 /**
 The receiver does not appear until it begins and is removed from the presentation when it is completed.
 */
 kCAFillModeRemoved; //  (Default) The rendering effect of the animation model is not displayed until the beginning and is removed after the animation is finished. 
 /**
 The receiver does not appear until it begins but remains visible in its final state when it is completed.
 */
 kCAFillModeForwards; //  The rendering effect of the animated model is not displayed until the beginning, but the final state is still displayed after the animation is finished. 
 /**
 The receiver appears in its initial state before it begins but is removed from the presentation when it is completed.
 */
 kCAFillModeBackwards; //  Before the animation begins, the animation model displays its initial rendering effect, but is removed after the animation ends. 
 /**
 The receiver appears in its initial state before it begins and remains visible in its final state when it is completed.
 */
 kCAFillModeBoth; //  Before the animation begins, the animation model displays its initial rendering effect, and still displays its final state after the animation ends. 

Pause/Continue Animation demo

- (IBAction)pauseBtnClicked:(id)sender {
  /**
    Determines whether the current layer object is aimed at postion The animation effect of the property 
   */
  if ([self.layer.presentationLayer animationForKey:@"position"]) {
    //  Get the local time of the layer through absolute time 
    CFTimeInterval localTime = [self.layer convertTime:CACurrentMediaTime() fromLayer:nil];
    /**
      Set the time elapse rate of the layer to 0 To pause the animation 
     */
    self.layer.speed = 0;
    //  Set the timeline offset of the layer to prepare for continuing animation 
    self.layer.timeOffset = localTime;

  }
}

- (IBAction)continueBtnClicked:(id)sender {
  /**
    Determines whether the current layer object is aimed at postion The animation effect of the property 
   */
  if ([self.layer.presentationLayer animationForKey:@"position"]) {
    //  Gets the timeline offset at the last pause 
    CFTimeInterval timeOffset = self.layer.timeOffset;

    //  Reset Timeline Offset 
    self.layer.timeOffset = 0;
    //  The speed is reduced to 1
    self.layer.speed = 1;

    //  Reset start time 
#warning  It is seriously incomprehensible here. 
    self.layer.beginTime = 0;

    //  Calculate the difference between the pause time and the current time 
    CFTimeInterval localTime = [self.layer convertTime:CACurrentMediaTime() fromLayer:nil];
    CFTimeInterval timeSincePause = localTime - timeOffset;

    //  From above 1 Start at the second pause 
    self.layer.beginTime = timeSincePause;
  }
}

Thank you for reading, hope to help everyone, thank you for your support to this site!