CoreAnimation (1) Layer Animation: coreanimationlayer

CoreAnimation (1) Layer Animation: coreanimationlayer

Original Blog, reprinted, please indicate the source

Detailed explanation column of my ios sdk, address

Http://blog.csdn.net/column/details/huangwenchen-ios-sdk.html

This article mainly explains animation from the perspective of CoreAnimation Layer. I want to better understand it from the perspective of CALayer. In the future, there will be the second article about animation from the UIView of UIKIt, and the third article about UIDynamicAnimation, in the third article, I will talk about the animation during UIViewController switching.

This article covers four parts

1. Basic animation-time functions and some key attributes

2. Key Frame-based animation: animation running along a specified path

3. animation groups-multiple animations are combined to form a complex Animation

4. Briefly introduce the animation agent.

(1) Why design an animation?

Animations provide a gradient way to express changes. Using animations can avoid sudden changes in the interface and cause user confusion.

In IOS, if CoreAnimation is used to specify the starting and ending status or the key frame status, CoreAnimation will efficiently create a compensation animation for us.

(2) Three animations from the CALayer perspective

First of all, those who are not familiar with CALayer should look at the content of CALayer in the first two articles, which is the basis of CoreAnimation. Here I will repeat two types of CALayer trees.

Presentation Tree-corresponds to the CALayer attribute in the animation process

Model Tree-corresponds to the actual attributes of CALayer.

You can use-[CALayer presentationLayer] and-[CALayer modelLayer] to access two types of trees.

The animation process is actually modifying the Presentation Tree.

2.1 basic animation

The first simple animation, I want the imageview to move 100 to the right, and the moving method is easeInOut (acceleration starts, deceleration ends ).

Effect

The Code is as follows. there are usually two ways to influence the animation.

<Pre name = "code" class = "objc"> CABasicAnimation * animation = [CABasicAnimation animation]; animation. keyPath = @ "position. x "; // use KVC to access the attribute animation. fromValue = @ (self. imageview. layer. position. x); // The value of the attribute starting with animation. toValue = @ (self. imageview. layer. position. x + 100); // The end value of animation. duration = 1; // duration of the animation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; // end function [self. imageview. layer addAnimation: animation forKey: @ "basic"]; // Add an animation

FromValue and toValue are a method. Of course, byValue can also be used to add the byValue change to the initial value. The above animation can be implemented through the following code.

 CABasicAnimation * animation = [CABasicAnimation animation];    animation.keyPath = @"position.x";    animation.byValue = @(100);    animation.duration = 1;    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];    [self.imageview.layer addAnimation:animation forKey:@"basic"];

However, the imageview is restored to its original location. This is because in the animation process, we modified the Presentation Tree and did not actually modify the CALayer attribute. There are usually two ways to stop an animation at the end,

(1) Modifying attributes

The Code is as follows:

  CABasicAnimation * animation = [CABasicAnimation animation];    animation.keyPath = @"position.x";    animation.fromValue = @(self.imageview.layer.position.x);    animation.toValue = @(self.imageview.layer.position.x + 100);    animation.duration = 1;    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];    [self.imageview.layer addAnimation:animation forKey:@"basic"];    self.imageview.layer.position = CGPointMake(self.imageview.layer.position.x+100, self.imageview.layer.position.y);

(2) set the position where the animation stops

<Pre name = "code" class = "objc"> CABasicAnimation * animation = [CABasicAnimation animation]; animation. keyPath = @ "position. x "; animation. fromValue = @ (self. imageview. layer. position. x); animation. toValue = @ (self. imageview. layer. position. x + 100); animation. duration = 1; animation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; animation. removedOnCompletion = NO; // If the animation ends, you cannot delete the animation. fillMode = kCAFillModeForwards; // stop at the animation end [self. imageview. layer addAnimation: animation forKey: @ "basic"];

The former is generally used, because the animation often ends with a change in actual attributes.

Here I will explain the time functions.

The time function determines how the animation is executed, and the time function determines the mathematical model of the animation. For example, it is best not to change the speed. The system provides the following time functions:

NSString * constkCAMediaTimingFunctionLinear; linear

NSString * constkCAMediaTimingFunctionEaseIn;

NSString * constkCAMediaTimingFunctionEaseOut; Stop slowing down

NSString * constkCAMediaTimingFunctionEaseInEaseOut; acceleration enters the deceleration stop, which is commonly used

NSString * constkCAMediaTimingFunctionDefault; default

Of course, time functions support custom functions, using the following functions

FunctionWithControlPoints ::::

The four points of this function determine a three-dimensional besell curve to determine the time function. I will not go into detail here.

Finally, this is especially important. When the CAAnimation object or subclass is passed to the Layer, the copy object is passed.

2.2 Key Frame-based animation

The following is a jitter animation created based on the key frame. It is created at the corresponding position of the time point.

  CAKeyframeAnimation * animation = [CAKeyframeAnimation animation];    animation.keyPath = @"position.x";    NSInteger initalPositionX = self.imageview.layer.position.x;    animation.values = @[@(initalPositionX),                         @(initalPositionX + 10),                         @(initalPositionX - 10),                         @(initalPositionX + 10),                         @(initalPositionX)];    animation.keyTimes = @[                           @(0),                           @(1/6.0),                           @(3/6.0),                           @(5/6.0),                           @(1)];    [self.imageview.layer addAnimation:animation forKey:@"keyFrame"];

Of course, animation based on the key frame supports moving along the path. You can set a time function to determine the motion mode.

For example, create a complex motion, first move to (200,200), then rotate the half circle around the point, and finally stop at the end position.

During the animation process, imageview rotates along the path

CAKeyframeAnimation * animation = [CAKeyframeAnimation animation]; animation. keyPath = @ "position"; // Create Path CGMutablePathRef mutablepath = CGPathCreateMutable (); CGPathMoveToPoint (mutablepath, nil, self. imageview. layer. position. x, self. imageview. layer. position. y); CGPathAddLineToPoint (mutablepath, nil, 200,200); CGPathAddArc (mutablepath, nil, 200,200,100, 0, M_PI, YES); // set path animation. path = mutablepath; animation. duration = 4.0; animation. rotationMode = kCAAnimationRotateAuto; animation. removedOnCompletion = NO; // If the animation ends, you cannot delete the animation. fillMode = kCAFillModeForwards; // stop at the animation end [self. imageview. layer addAnimation: animation forKey: @ "PathAnimation"];

Several key points of this animation

2.3 animation Group

The so-called animation group is to combine several animations and then execute them together. Generally, complicated animations are implemented by the animation group.

For example, you can move along the path in the previous example to make the transparency gradient while moving.

CAKeyframeAnimation * pathAnimation = [CAKeyframeAnimation animation]; pathAnimation. keyPath = @ "position"; // Create Path CGMutablePathRef mutablepath = CGPathCreateMutable (); CGPathMoveToPoint (mutablepath, nil, self. imageview. layer. position. x, self. imageview. layer. position. y); CGPathAddLineToPoint (mutablepath, nil, 200,200); CGPathAddArc (mutablepath, nil, 200,200,100, 0, M_PI, YES); // set path pathAnimation. path = mutablepath; pathAnimation. rotationMode = kCAAnimationRotateAuto; [self. imageview. layer addAnimation: pathAnimation forKey: @ "PathAnimation"]; // CAKeyframeAnimation * opacityAnimation = [CAKeyframeAnimation animation]; opacityAnimation. keyPath = @ "opacity"; opacityAnimation. values = @ [@ (1.0), @ (0.5), @ (0.0), @ (0.5), @ (1.0)]; opacityAnimation. calculationMode = kCAAnimationPaced; [self. imageview. layer addAnimation: opacityAnimation forKey: @ "OpacityAnination"]; // configure the animation group CAAnimationGroup * animationGroup = [[CAAnimationGroup alloc] init]; animationGroup. animations = @ [pathAnimation, opacityAnimation]; animationGroup. duration = 4.0; animationGroup. removedOnCompletion = NO; animationGroup. fillMode = kCAFillModeBackwards; [self. imageview. layer addAnimation: animationGroup forKey: @ "GroupAnimation"];

Several Results

(3) animation proxy

You can set a proxy to listen to the start and end events of an animation.

Listen to two functions by setting delegate

AnimationDidStart :( CAAnimation *) anim

AnimationDidStop :( CAAnimation *) anim finished :( BOOL) flag

Here, the flag determines whether the animation has been executed.

Finally, 12 basic principles for designing animations on the wiki are attached.

Https://en.wikipedia.org/wiki/12_basic_principles_of_animation

BTY: Does anyone know how CSDN inserts a GIF image?