Analysis of Layer-layer animation in IOS coreanimation development Framework _ios

Source: Internet
Author: User

Introduction of Caanimation Animation system
Caanimation is the base class for animation objects in the Coreanimation frame, and here's a picture that I hand-painted, not very nice, but it can be clearly expressed in relation to several animation classes related to Caanimation:

As you can see from the illustration above, three subclasses are inherited from the caanimation, which is used to create the capropertyanimation of the property animation, to create the catransition of the transition animation, and to create the caanimationgroup of the combined animation.

Let's start with the root class.

1.CAAnimation Properties and methods

Caanimation is the base class for animated objects, which encapsulates the underlying properties of the animation, as follows:

//通过类方法创建一个CAAnimation对象
+ (instancetype)animation;
//动画执行的时序模式
@property(nullable, strong) CAMediaTimingFunction *timingFunction;
//代理
@property(nullable, strong) id delegate;
//是否动画完成时将动画对象移除掉
@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;
timingFunction定义了动画执行的时序效果,CAMediaTimingFunction的创建方式如下:

/*
name参数决定的执行的效果,可选参数如下
//线性执行
 NSString * const kCAMediaTimingFunctionLinear;
 //淡入  在动画开始时 淡入效果
 NSString * const kCAMediaTimingFunctionEaseIn;
 //淡出 在动画结束时 淡出效果
 NSString * const kCAMediaTimingFunctionEaseOut;
 //淡入淡出
 NSString * const kCAMediaTimingFunctionEaseInEaseOut;
 //默认效果
 NSString * const kCAMediaTimingFunctionDefault;
*/
+ (instancetype)functionWithName:(NSString *)name;
The Caanimation proxy method is in the following several ways:

//动画开始时执行的回调
- (void)animationDidStart:(CAAnimation *)anim;
//动画结束后执行的回调
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
2.CAPropertyAnimation Properties and methods

Capropertyanimation is a class that inherits from Caanimation specifically used to create animation related to attributes:

The path in the

//Create object argument is the property that we want to animate
//For example, if you pass in @ "BackgroundColor" when the background color of the layer changes, the animation we set
+ (instancetype ) Animationwithkeypath: (Nullable NSString *) path;
//This property determines whether the state of the animation is superimposed on the control's original state
////default setting of No, if we perform an animation that moves two times, it executes two times from the same position
//If set to Yes, the second animation is performed on the first execution
@ Property (getter=isadditive) BOOL additive;
//This property has effect on repeated animations
///No, the recurring animation starts at the start State
//If set to Yes, this execution is performed on the basis of the last execution
@property (getter= iscumulative) BOOL Cumulative;
//This property is related to the animation execution of the Transfron property
@property (Nullable, strong) cavaluefunction *valuefunction;
Of the above attributes, only one needs our attention, Valuefunction is set specifically for transform animations, because we have no way to directly change the properties in Transform3D, through this argument, can help us directly manipulate transfrom3d property changes to produce animation effects, for example, a rotation around the Z-axis animation:

 //animation that rotates around the z-axis
    cabasicanimation * ani = [cabasicanimation animationwithkeypath:@] Transform "];
   /starting at 0 degrees
    ani.fromvalue = @0
   //rotate to 180 degrees
 & nbsp;  ani.tovalue = [NSNumber numberwithfloat:m_pi];
   //Time 2S
    ani.duration = 2;
   //set to Z-axis rotation
     ani.valuefunction = [Cavaluefunction Functionwithname:kcavaluefunctionrotatez];
   //Execute animation
    [layer Addanimation:ani forkey:@ "];
In fact, the way to use the point is to access the corresponding property, if you do not set valuefunction, you can also rotate around the z-axis by using the following method:

//绕z轴旋转的动画
    CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    //从0度开始
    ani.fromValue = @0;
    //旋转到180度
    ani.toValue = [NSNumber numberWithFloat:M_PI];
    //时间2S
    ani.duration = 2;
    //执行动画
    [layer addAnimation:ani forKey:@""];

3.CABasicAnimation Properties

Cabasicanimaton is a subclass of capropertyanimation that creates the underlying property change animation, such as our example code above, where the properties are as follows:

@property(nullable, strong) id fromValue;
@property(nullable, strong) id toValue;
@property(nullable, strong) id byValue;
The above three attributes are all to determine the starting and ending position of the animation, like the following meaning:

(1) Fromvalue and Tovalue are not empty: the value of the animation varies from fromvalue to Tovalue

(2) Fromvalue and byvalue are not empty: the value of the animation varies from fromvalue to Fromvalue+byvalue

(3) Byvalue and Tovalue are not empty: the value of the animation varies from tovalue-byvalue to Tovalue

(4) Only fromvalue is not null: The value of the animation changes from Fromvalue to the current state value of layer

(5) Only Tovalue is not empty: the value of the animation is changed by the current value of layer to Tovalue

(6) Only byvalue is not empty: the value of the animation changes from the current value of layer to layer current value +byvalue

4.CAKeyframeAnimation Key frame Animation

Cakeyframeanimation is also a subclass of inheritance and Capropertyanimation, which differs from cabasicanimation in that it is an animation that changes the properties of the layer layer, But Cabasicanimation can only set the initial and end states, which we have no way to control, and Cakeyframeanimation can let us set some key frames and then the whole animation process. The property methods are as follows:

An array of values for the

//Keyframe For example we want the control to move along a path, which holds each moving point
@property (nullable, copy) Nsarray *values;
//Direct set PATH, Scope values are similar to
@property (nullable) cgpathref path;
//Set the length of time each frame is executed this value is 0-1, representing the proportion of elapsed time
@property (nullable, copy) Nsarray<nsnumber *> *keytimes;
//The timing effect of each frame execution is mentioned above
@property (nullable, copy) nsarray<camediatimingfunction *> *timingfunctions;
/*
Set the middle value of the frame how to calculate
 nsstring * Const KCAANIMATIONLINEAR
 nsstring * const kcaanimationdiscrete;
& nbsp NSString * Const kcaanimationpaced;
 nsstring * Const kcaanimationcubic;
 nsstring * Const kcaanimationcubicpaced;
*/
@property (copy) nsstring *calculationmode
Examples are as follows:

CAKeyframeAnimation * ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    ani.values = @[[NSValue valueWithCGPoint:CGPointMake(100, 100)],[NSValue valueWithCGPoint:CGPointMake(120, 100)],[NSValue valueWithCGPoint:CGPointMake(120, 200)],[NSValue valueWithCGPoint:CGPointMake(200, 200)]];
    ani.duration = 3;
    [layer addAnimation:ani forKey:@""];
5.CASpringAnimation Damping animation

With Caspringanimation, you can help developers to easily create a spring-effect animation, the main properties are as follows:

//这个属性设置弹簧重物的质量 会影响惯性 必须大于0 默认为1
@property CGFloat mass;
//设置弹簧的刚度系数,必须大于0 默认为100  这个越大 则回弹越快
@property CGFloat stiffness;
//阻尼系数 默认为10 必须大于0 这个值越大 回弹的幅度越小
@property CGFloat damping;
//初始速度
@property CGFloat initialVelocity;
//获取动画停下来需要的时间
@property(readonly) CFTimeInterval settlingDuration;
6.CATransition Transitions Animation

The difference between catransition and capropertyanimation is that when the layer layer appears, it produces an animation effect, not when the property changes, the attributes are as follows:

/*
设置动画类型
//淡入
 NSString * const kCATransitionFade;
 //移入
 NSString * const kCATransitionMoveIn;
 //压入
 NSString * const kCATransitionPush;
 //溶解
 NSString * const kCATransitionReveal;
*/
@property(copy) NSString *type;
/*
设置动画的方向
//从右侧进
 NSString * const kCATransitionFromRight;
 //从左侧进
 NSString * const kCATransitionFromLeft;
 //从上侧进
 NSString * const kCATransitionFromTop;
 //从下侧进
 NSString * const kCATransitionFromBottom;
*/
@property(nullable, copy) NSString *subtype;
In fact, about the animation effect of type definition, come out of the official definition, we can also use some private parameters, as follows:

(1) Pagecurl page
(2) Rippleeffect dripping effect
(3) Suckeffect shrinkage effect, such as a piece of cloth is taken away
(4) Cube cubic effect
(5) Oglflip upside down effect
For example:

    CATransition * ani = [CATransition animation];
    ani.type =  @"pageCurl";
    ani.subtype = kCATransitionFromRight;
    [layer addAnimation:ani forKey:@""];
7.CAAnimationGroup Animation Group

The caanimationgroup itself does not define animation, and he can combine the related animations we mentioned above:

@property(nullable, copy) NSArray<CAAnimation *> *animations;

Advanced animation Techniques
1.事务类

Coreanimation also has a very important class: The Catransaction object class, which can simultaneously set multiple layer layers of animation effects. You can animate in both implicit and explicit ways.

2.CATransaction Properties

The layer layer of the property operation, will form an implicit animation, to use implicit animation, you need to turn off the layer layer of animation animation properties, use the following method:

//关闭animation动画效果,开启隐式动画
+ (BOOL)disableActions;
+ (void)setDisableActions:(BOOL)flag;
CATransaction用类方式通过设置key-value来进行动画的属性设置:

+ (nullable id)valueForKey:(NSString *)key;
+ (void)setValue:(nullable id)anObject forKey:(NSString *)key;
The supported key values are as follows:

//设置动画持续时间
 NSString * const kCATransactionAnimationDuration;
 //设置停用animation类动画
 NSString * const kCATransactionDisableActions;
 //设置动画时序效果
 NSString * const kCATransactionAnimationTimingFunction;
 //设置动画完成后的回调
 NSString * const kCATransactionCompletionBlock;
In addition to an implicit display animation, you can explicitly submit animations that are displayed by calling Catransaction's related methods:

//动画开始
+ (void)begin;
//提交动画
+ (void)commit;
//立即进行动画渲染 一般不需调用
+ (void)flush;
//下面这两个方法用于动画事物的加锁与解锁 在多线程动画中,保证修改属性的安全
+ (void)lock;
+ (void)unlock;
Examples are as follows:

[CATransaction begin];
[CATransaction setValue:@1 forKey:kCATransactionAnimationDuration];
layer.backgroundColor = [UIColor blueColor].CGColor;
[CATransaction commit];

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.