iOS Basic Animation Keyframe Animation Physical Animation by Slow Function

iOS Basic Animation/Keyframe Animation/Physical Animation Using Slow Function

Let's start with the basic animation section

The basic animation part is simple, but the animation effect that can be achieved is also limited

Approximately:

#1. Create the original UI or picture

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

#3. Set where the animation will end up

#4. Add the configured animation to the layer layer

An example would be to move a circle from top to bottom, with the upper code:

// Set the original picture 
  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 Basic Animation 
  CABasicAnimation *basicAnimation = [CABasicAnimation animation];
  
  // set a property 
  basicAnimation.keyPath      = @"position";
  basicAnimation.duration     = 4.0f;
  basicAnimation.fromValue     = [NSValue valueWithCGPoint:showView.center];
  basicAnimation.toValue      = [NSValue valueWithCGPoint:CGPointMake(50, 300)];
  
  // Set Animation End Position 
  showView.center = CGPointMake(50, 300);
  
  // Add animation to layer layer 
  [showView.layer addAnimation:basicAnimation forKey:nil];

Next on keyframe animation

Actually it is similar to the basic animation, but it can set up multiple animation paths in the same way, roughly

#1. Create the original UI or picture

#2. Create an CAKeyframeAnimation instance and set keypart/duration/values. Keyframe animation can add multiple animation path points, compared to basic animation, it can only set start and end points.

#3. Set where the animation will end up

#4. Add the configured animation to the layer layer

For example, the red circle shakes left and right to drop the code:

// Set the original picture 
  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];
  
  // Setting 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 Animation End Position 
  showView.center = CGPointMake(200, 200);
  
  // Add animation to layer layer 
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

Finally, a more complex physical animation is achieved by using the slow-motion function with keyframe animation

First of all, what is the slow-motion function? An expert has written a library that calculates the path needed to simulate physical animations, such as spring effects.

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

Specific animation effects can be seen in the library Slow function query table, simply lifting the effect of a ball landing

Top Code:

// Set the original picture 
  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];
  
  // Setting Animation Properties 
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
  
 * // a place of pivotal importance ,  Slow-motion function used here to calculate point paths 
  keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center
                             toPoint:CGPointMake(50, 300)
                              func:BounceEaseOut
                           frameCount:4.0f * 30];
  
  // Set Animation End Position 
  showView.center = CGPointMake(50, 300);
  
  // Add animation to layer layer 
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

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