Basic Animation, Keyframe Animation, and Implementation of Physical Animation Effects with Easing Functions on iOS

iOS basic animation/Keyframe animation/Use easing functions to achieve physical animation effects

Let's talk about the basic animation part first

The basic animation part is relatively simple, but the animation effects that can be achieved are also very limited

The usage is roughly as follows:

#1. Create the original UI or image

#2. Create an instance of CABasicAnimation and set the keypart/duration/fromValue/toValue

#3. Set the final position of the animation

#4. Add the configured animation to the layer

For example, let's say to implement a circle moving from top to bottom, the code is as follows:

//Set the original image
  UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //Create a basic animation
  CABasicAnimation *basicAnimation = [CABasicAnimation animation];
  //Set properties
  basicAnimation.keyPath = @"position";
  basicAnimation.duration = 4.0f;
  basicAnimation.fromValue = [NSValue valueWithCGPoint:showView.center];
  basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(50, 300)];
  //Set the animation end position
  showView.center = CGPointMake(50, 300);
  //Add animation to layer
  [showView.layer addAnimation:basicAnimation forKey:nil];

Next, let's talk about keyframe animation

It's almost the same as basic animation, just able to set multiple animation paths. The usage is also similar, roughly as follows

#1. Create the original UI or image

#2. Create a CAKeyframeAnimation instance and set keypart/duration/values can only set the start and end points compared to basic animations, while keyframe animations can add multiple animation path points

#3. Set the final position of the animation

#4. Add the configured animation to the layer

For example, a red circle swings left and right and falls down, the following code:

//Set the original image
  UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //Create keyframe animation
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  //Set animation properties
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
  keyFrameAnimation.values = @[[NSValue valueWithCGPoint:showView.center],
                 [NSValue valueWithCGPoint:CGPointMake(100, 100)],
                 [NSValue valueWithCGPoint:CGPointMake(50, 150)],
                 [NSValue valueWithCGPoint:CGPointMake(200, 200)]];
  //Set the animation end position
  showView.center = CGPointMake(200, 200);
  //Add animation to layer
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

Finally, complex physical animations are realized by using easing functions in conjunction with keyframe animations

First let's talk about what easing functions are, that is, a genius has written a library that can calculate the path needed for simulating physical animations (such as spring effects)

Github address: https://github.com/YouXianMing/EasingAnimation

For example, you can see the animation effects in the easing function table in the library, and simply list the effect of a ball falling to the ground

The following code:

//Set the original image
  UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //Create keyframe animation
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  //Set animation properties
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
　　　　//Key point, here the easing function is used to calculate the point path
  keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center
                             toPoint:CGPointMake(50, 300)
                              func:BounceEaseOut
                           frameCount:4.0f * 30];
  //Set the animation end position
  showView.center = CGPointMake(50, 300);
  //Add animation to layer
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

Thank you for reading, I hope it can help everyone, thank you for your support of this site!