Detailed explanation of CAMediaTiming (Time Protocol) and example code

Detailed explanation of CAMediaTiming (Time Agreement)

There is a protocol implemented through CAAnimation called CAMediaTiming, which is the base class of CABasicAnimation and CAKeyframeAnimation (referring to CAAnimation). Time-related properties like duration, beginTime and repeatCount are all in this class. Generally speaking, eight attributes are defined in the protocol, which are combined in some ways to accurately control time. There are only a few sentences 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 time.

Visual CAMediaTiming

In order to show the different times of the relevant attributes, whether they are themselves or the mixed state, I dynamically change orange to blue. The block below shows the animation process from start to end, with each flag on the timeline representing one second. You can see any point on the timeline, and the current color represents the current time in the animation. For example, duration is visible as below.

We all know that CALayer and CAAnimation both implement the CAMediaTiming protocol. Therefore, in Core Animation, it is very necessary to understand the properties in the CAMediaTiming protocol. However, the description of each property in Apple's documentation is too simple and easy for beginners to understand. This article mainly helps understand the meaning of each property in the CAMediaTiming protocol.

CAMediaTiming Protocol provides 8 properties, which will be explained separately below.

CAMediaTiming / Time Protocol

1. repeatCount, the number of repeats of the animation, can be set to a decimal. Set to HUGE_VALF, indicating infinite repetition.
2. repeatDuration, the total animation duration, if it is greater than the single time duration, it will be repeated; if it is less than the single time duration, it will be cut off.
3. duration, single animation duration.
4. Speed, the time lapse rate of the layer or animation model relative to the parent layer CALayer.
5. fillMode, after the expiration period ends, will the rendering effect of the animation object be frozen or removed.
6. beginTime, relative to the start time of the parent object. Note that the absolute time of the system shall prevail. For example:

/**
 The animation starts after 2 seconds
 */
 = CACurrentMediaTime() + 2;
/**
 As of the current time, the animation has been executed for 2 seconds.
 Note that if the execution time is greater than the animation duration, it means that the animation has been executed.
 */
 = CACurrentMediaTime() - 2;

, timeline offset. Move the timeline to the offset position and execute the entire animation duration. Assuming that the animation lasts 3 seconds and the offset is 8, the starting position is 8% 3 = 2, and then the execution is 3 seconds, that is, it ends at 1/3 of the entire duration.

, return the current absolute time of the system (starting from this startup), unit to 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 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 animation model is not displayed until the beginning, but the last state is still displayed after the animation ends. /**
 The receiver appears in its initial state before it begins but is removed from the presentation when it is completed.
 */
 kCAFillModeBackwards; // Before the animation starts, the animation model shows 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 starts, the animation model displays its initial rendering effect and still displays the last state after the animation ends.

Pause/continue the animation demo

- (IBAction)pauseBtnClicked:(id)sender {
  /**
    Determine whether the current layer object has an animation effect for the position attribute
    */
  if ([ animationForKey:@"position"]) {
    // Get the local time of the layer through absolute time    CFTimeInterval localTime = [ convertTime:CACurrentMediaTime() fromLayer:nil];
    /**
      Set the layer's time elapse rate to 0 to pause the animation
      */
     = 0;
    // Set the layer's timeline offset to prepare for continuing animation     = localTime;

  }
}

- (IBAction)continueBtnClicked:(id)sender {
  /**
    Determine whether the current layer object has an animation effect for the position attribute
    */
  if ([ animationForKey:@"position"]) {
    // Get the timeline offset from the last pause    CFTimeInterval timeOffset = ;

    // Reset the timeline offset     = 0;
    // Speed ​​reduction to 1     = 1;

    // Reset the start time#warning is seriously ununderstood here.     = 0;

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

    // Start from the last pause     = timeSincePause;
  }
}

Thank you for reading, I hope it can help you. Thank you for your support to this site!