Animation speed (buffering 10.1), animation speed buffering 10.1

Animation speed (buffer 10.1), animation speed buffer 10.1
Animation speed

Animation is actually a change in a period of time, which implies that the change must be at a certain rate. The rate is calculated from the following formula:

velocity = change / time
The change here can refer to the distance that an object moves, and time refers to the duration of the animation. Using such a movement can be more visually described (such as the animation of the position and bounds properties), but in fact it can be applied to any animation. Attributes (such as color and opacity).

The above equation assumes that the speed is constant throughout the animation process (as in the case of Chapter 8 "explicit animation"). For this constant speed animation we call it "linear pace", and From a technical point of view, this is also the easiest way to achieve animation, but it is also a completely unreal effect.

Consider a scenario where a car travels within a certain distance, it does not start at 60mph, and then suddenly reaches 0mph when it reaches the end. One is because it requires infinite acceleration (even the best car will not run from 0 to 60 in 0 seconds), otherwise it will kill all passengers. In reality, it will slowly accelerate to full speed, then when it approaches the end, it will slowly slow down until it finally stops.

What about an object dropped on the ground? It will first stop in the air, then accelerate until it reaches the ground, and then suddenly stop (then due to the accumulated kinetic energy conversion accompanied by a loud noise, bang!).

 

Any object in real life will accelerate or decelerate in motion. So how do we achieve this acceleration in animation? One method is to use the physics engine to model the friction and momentum of moving objects, but this will make the calculation too complicated. We call this type of equation a buffer function. Fortunately, Core Animation embeds a series of standard functions for us to use.

## CAMediaTimingFunction

So how do you use the buffer equation? First, you need to set the timingFunction property of CAAnimation, which is an object of CAMediaTimingFunction class. If you want to change the timing function of implicit animation, you can also use CATransaction's + setAnimationTimingFunction: method.

Here are some ways to create CAMediaTimingFunction, the simplest way is to call the + timingFunctionWithName: constructor. Here one of the following constants is passed in:

1 kCAMediaTimingFunctionLinear
2 kCAMediaTimingFunctionEaseIn
3 kCAMediaTimingFunctionEaseOut
4 kCAMediaTimingFunctionEaseInEaseOut
5 kCAMediaTimingFunctionDefault
 

The kCAMediaTimingFunctionLinear option creates a linear timing function, which is also the default function when the timingFunction property of CAAnimation is empty. Linear pacing makes sense for scenes that immediately accelerate and reach the end at a constant speed (for example, a bullet fired from a gun barrel), but it looks strange by default, because it is rarely used for most animations.

The kCAMediaTimingFunctionEaseIn constant creates a method that slowly accelerates and then suddenly stops. It is suitable for the previously mentioned example of free fall, or for example the launch of a missile aimed at a target.

kCAMediaTimingFunctionEaseOut is just the opposite. It starts at a full speed and then slowly decelerates to stop. It has a weakening effect, and the applied scene such as a door closing slowly instead of slamming.

kCAMediaTimingFunctionEaseInEaseOut creates a process of slowly accelerating and then slowly decelerating. This is the way most objects move in the real world and the best choice for most animations. If only one buffer function can be used, it must be it. Then you will wonder why this is not the default choice. In fact, when using the UIView animation method, it is indeed the default, but when creating CAAnimation, you need to set it manually.

Finally, there is a kCAMediaTimingFunctionDefault, which is similar to kCAMediaTimingFunctionEaseInEaseOut, but the acceleration and deceleration processes are slightly slower. The difference between it and kCAMediaTimingFunctionEaseInEaseOut is difficult to detect. It may be that Apple thinks it is more suitable for implicit animation (then UIKit changed the idea and used kCAMediaTimingFunctionEaseInEaseOut as the default effect). Still remember that when creating explicit CAAnimation it is not the default option (in other words, the default layer behavior animation uses kCAMediaTimingFunctionDefault as their timing method).

You can experiment with a simple test project (Listing 10.1), change the code of the buffer function before running, and then click anywhere to observe how the layer moves through the specified buffer.

Listing 10.1 Simple test of buffer function

 1 @interface ViewController ()
 2 
 3 @property (nonatomic, strong) CALayer * colorLayer;
 4
 5 @end
 6
 7 @implementation ViewController
 8 
 9-(void) viewDidLoad
10 {
11 [super viewDidLoad];
12 // create a red layer
13 self.colorLayer = [CALayer layer];
14 self.colorLayer.frame = CGRectMake (0, 0, 100, 100);
15 self.colorLayer.position = CGPointMake (self.view.bounds.size.width / 2.0, self.view.bounds.size.height / 2.0);
16 self.colorLayer.backgroundColor = [UIColor redColor] .CGColor;
17 [self.view.layer addSublayer: self.colorLayer];
18}
19
20-(void) touchesBegan: (NSSet *) touches withEvent: (UIEvent *) event
twenty one {
22 // configure the transaction
23 [CATransaction begin];
24 [CATransaction setAnimationDuration: 1.0];
25 [CATransaction setAnimationTimingFunction: [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut]];
26 // set the position
27 self.colorLayer.position = [[touches anyObject] locationInView: self.view];
28 // commit transaction
29 [CATransaction commit];
30}
31
32 @end
View Code
 

## UIView animation buffer

UIKit animations also support the use of these buffering methods, although the syntax and constants are somewhat different. To change the buffering options of UIView animations, add one of the following constants to the options parameter:

1 UIViewAnimationOptionCurveEaseInOut
2 UIViewAnimationOptionCurveEaseIn
3 UIViewAnimationOptionCurveEaseOut
4 UIViewAnimationOptionCurveLinear
 

They are closely related to CAMediaTimingFunction, UIViewAnimationOptionCurveEaseInOut is the default value (there is no corresponding value for kCAMediaTimingFunctionDefault).

The specific use method is shown in Listing 10.2 (note that the additional layers added by UIView are not used here because UIKit animation does not support such layers).

Listing 10.2 Buffer test project using UIKit animation

@interface ViewController ()

@property (nonatomic, strong) UIView * colorView;

@end

@implementation ViewController

-(void) viewDidLoad
{
    [super viewDidLoad];
    // create a red layer
    self.colorView = [[UIView alloc] init];
    self.colorView.bounds = CGRectMake (0, 0, 100, 100);
    self.colorView.center = CGPointMake (self.view.bounds.size.width / 2, self.view.bounds.size.height / 2);
    self.colorView.backgroundColor = [UIColor redColor];
    [self.view addSubview: self.colorView];
}

-(void) touchesBegan: (NSSet *) touches withEvent: (UIEvent *) event
{
    // perform the animation
    [UIView animateWithDuration: 1.0 delay: 0.0
                        options: UIViewAnimationOptionCurveEaseOut
                     animations: ^ {
                            // set the position
                            self.colorView.center = [[touches anyObject] locationInView: self.view];
                        }
                     completion: NULL];

}

@end
View Code buffering and key frame animation
Perhaps you will recall that the keyframe animation of color switching in Chapter 8 looks strange due to the linear transformation (see Listing 8.5), making the color transformation very unnatural. To correct this, let's use a more appropriate buffering method, such as kCAMediaTimingFunctionEaseIn, to add a little pulse effect to the color change of the layer, making it more like a colored light bulb in reality.

We don't want to apply this effect to the entire animation process. We want to repeat this buffering for each animation process, so every color change will have a pulse effect.

CAKeyframeAnimation has a timingFunctions property of type NSArray, which we can use to specify different timing functions for each animation step. But the number of specified functions must be equal to the number of elements in the keyframes array minus one, because it is a function that describes the speed of animation between each frame.

In this example, we want to use the same buffer function from beginning to end, but we also need an array of functions to tell the animation to repeat each step, instead of only buffering once in the entire animation sequence, we simply use the included An array of the same function copy is enough (see Listing 10.3).

Running the updated code, you
You will find the animation looks more natural.

Listing 10.3 Using CAMediaTimingFunction for CAKeyframeAnimation

 1 @interface ViewController ()
 2 
 3 @property (nonatomic, weak) IBOutlet UIView * layerView;
 4 @property (nonatomic, weak) IBOutlet CALayer * colorLayer;
 5
 6 @end
 7
 8 @implementation ViewController
 9 
10-(void) viewDidLoad
11 {
12 [super viewDidLoad];
13 // create sublayer
14 self.colorLayer = [CALayer layer];
15 self.colorLayer.frame = CGRectMake (50.0f, 50.0f, 100.0f, 100.0f);
16 self.colorLayer.backgroundColor = [UIColor blueColor] .CGColor;
17 // add it to our view
18 [self.layerView.layer addSublayer: self.colorLayer];
19}
20
21-(IBAction) changeColor
twenty two {
23 // create a keyframe animation
24 CAKeyframeAnimation * animation = [CAKeyframeAnimation animation];
25 animation.keyPath = @ "backgroundColor";
26 animation.duration = 2.0;
27 animation.values = @ [
28 (__bridge id) [UIColor blueColor] .CGColor,
29 (__bridge id) [UIColor redColor] .CGColor,
30 (__bridge id) [UIColor greenColor] .CGColor,
31 (__bridge id) [UIColor blueColor] .CGColor];
32 // add timing function
33 CAMediaTimingFunction * fn = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn];
34 animation.timingFunctions = @ [fn, fn, fn];
35 // apply animation to layer
36 [self.colorLayer addAnimation: animation forKey: nil];
37}
38
39 @end
View Code