IOS basic animation, key frame animation, the use of easing functions to achieve physical animation effect _ios

iOS basic animation/Key frame animation/Physical animation effect with ease function

First of all, the Basic animation section

The basic animation part is simpler, but the animation effect that can achieve is also very limited

The use method is roughly:

#1. Create the original UI or screen

#2. Create the Cabasicanimation instance and set the Keypart/duration/fromvalue/tovalue

#3. Set the position of the animation's final stay

#4. Add a configured animation to the layer layer

For example, to implement a circle moving from top to down, on the code:

Set the original screen
  uiview *showview        = [[UIView alloc] Initwithframe:cgrectmake (0, 0, MB)];
  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 Property
  Basicanimation.keypath      = @ "position";
  Basicanimation.duration     = 4.0f;
  Basicanimation.fromvalue     = [Nsvalue valueWithCGPoint:showView.center];
  Basicanimation.tovalue      = [Nsvalue valuewithcgpoint:cgpointmake];
  
  Sets the animation end position
  showview.center = cgpointmake;
  
  Add animation to the layer layer
  [Showview.layer addanimation:basicanimation Forkey:nil];

Next, the key frame animation

In fact, similar to the basic animation, but can set more than one animation path to use the same method, roughly

#1. Create the original UI or screen

#2. Create a Cakeyframeanimation instance and set Keypart/duration/values to set the start and end points compared to the basic animation, key frame animations can add multiple animation path points

#3. Set the position of the animation's final stay

#4. Add a configured animation to the layer layer

For example, the red circle left and right shakes down and falls on the code:

Set the original screen
  uiview *showview        = [[UIView alloc] Initwithframe:cgrectmake (0, 0, MB)];
  ShowView.layer.masksToBounds  = YES;
  ShowView.layer.cornerRadius  = 50.f;
  ShowView.layer.backgroundColor = [Uicolor Redcolor]. Cgcolor;
  
  [Self.view Addsubview:showview];
  
  Create key frame animations
  cakeyframeanimation *keyframeanimation = [cakeyframeanimation animation];
  
  Set animation properties
  Keyframeanimation.keypath       = @ "position";
  Keyframeanimation.duration       = 4.0f;
  
  Keyframeanimation.values = @[[nsvalue ValueWithCGPoint:showView.center],
                 [Nsvalue valuewithcgpoint: Cgpointmake)],
                 [Nsvalue Valuewithcgpoint:cgpointmake],
                 [Nsvalue valuewithcgpoint: Cgpointmake]];
  
  Sets the animation end position
  showview.center = cgpointmake;
  
  Add animation to the layer layer
  [Showview.layer addanimation:keyframeanimation Forkey:nil];

Finally, using the easing function and the key frame animation to realize the more complicated physical animation.

First say what is the easing function, is a high man wrote a library can be calculated to simulate physical animation (such as spring effect) to the path

GitHub Address: Https://github.com/YouXianMing/EasingAnimation

What specific animation effect can look at the library's Ease function query table, simple to raise a small ball landing effect

Code on:

Set the original screen
  uiview *showview        = [[UIView alloc] Initwithframe:cgrectmake (0, 0, MB)];
  ShowView.layer.masksToBounds  = YES;
  ShowView.layer.cornerRadius  = 50.f;
  ShowView.layer.backgroundColor = [Uicolor Redcolor]. Cgcolor;
  
  [Self.view Addsubview:showview];
  
  Create key frame animations
  cakeyframeanimation *keyframeanimation = [cakeyframeanimation animation];
  
  Set animation properties
  Keyframeanimation.keypath       = @ "position";
  Keyframeanimation.duration       = 4.0f;
  
The key, where the easing function is used to compute the point path
  keyframeanimation.values = [yxeasing calculateFrameFromPoint:showView.center
                             Topoint:cgpointmake (
                              func:bounceeaseout)
                           framecount:4.0f];
  
  Sets the animation end position
  showview.center = cgpointmake;
  
  Add animation to the layer layer
  [Showview.layer addanimation:keyframeanimation Forkey:nil];

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