CAAnimation动画/CAAnimation Group

简介: <p style="margin:10px auto; font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:13px; line-height:24px"> <a target="_blank"><span style="text-decoration:underline"><strong>动画</strong

动画分隐式动画和显式动画


CAAnimation采用了CAMediaTiming协议,可以调整时间,包括持续时间,速度,重复次数;采用了CAAction协议,可以通过响应动作的方式来显示动画.

CAAnimation的一些派生类:
CATransition 提供渐变效果:(推拉push效果,消退fade效果,揭开reveal效果)
CAAnimationGroup 允许多个动画同时播放
CABasicAnimation 提供了对单一动画的实现
CAKeyframeAnimation 关键桢动画,可以定义行动路线
CAConstraint 约束类,在布局管理器类中用它来设置属性
CAConstraintLayoutManager 约束布局管理器,是用来将多个CALayer进行布局的.各个CALayer是通过名称来区分,而布局属性是通过CAConstraint来设置的.
CATransaction 事务类,可以对多个layer的属性同时进行修改.它分隐式事务,和显式事务.


事务管理(Transactions)
事务分两种:
1.隐式事务(implicit transaction)
除显式事务外,任何对于CALayer属性的修改,都是隐式事务.这样的事务会在run-loop中被提交.
如:
theLayer.opacity = 0.0;
theLayer.zPosition = -200;
theLayer.position = CGPointMake(0.0, 0.0);

2.显式事务(explicit transaction)
a. 通过明确的调用begin,commit来提交动画.优点是可以同时修改多个Layer的属性.
如:
[CATransaction begin];
[CATransaction setValue:(id)kCFBooleanTrue
                               forKey:kCATransactionDisableActions];
[aLayer removeFromSuperlayer];
[CATransaction commit];

b.可以重置持续时间
可以在begin,commit对中临时修改动画持续时间.
[CATransaction begin]
[CATransaction setValue:[NSNumber numberWithFloat:10.0f]
                               forKey:kCATransactionAnimationDuration];
theLayer.zPosition = 200.0;
theLayer.opacity = 0.0;
[CATransaction commit];

c.事务可以嵌套.
如:
//第一层嵌套
[CATransaction begin];
[CATransaction setValue:[NSNumber numberWithFloat:2.0f]
                             forKey:kCATransactionAnimationDuration];
theLayer.position = CGPointMake(0.0, 0.0);
//第二层嵌套
[CATransaction begin];
[CATransaction setValue:[NSNumber numberWithFloat:5.0f]
                               forKey:kCATransactionAnimationDuration];
theLayer.zPosition = 200.0;
theLayer.opacity = 0.0;
[CATransaction commit];
[CATransaction commit];



布局管理器示例如下:
//创建和设置一个布局管理器
theLayer.layoutManager = [CAConstraintLayoutManager layoutManager];

//创建layerA
CALayer *layerA = [CALayer layer];
layerA.name = @"layerA";

//设置layerA的中点位置等于超类的中点位置
[layerA addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintMidY
                                                                                       relativeTo:@"superLayer"
                                                                                       attribute:kCAConstraintMidY]];

[layerA addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintMidX
                                                                                       relativeTo:@"superLayer"
                                                                                       attribute:kCAConstraintMidX]];
[theLayer addSublayer:layerA];

//创建layerB
CALayer *layerB = [CALayer layer];
layerB.name = @"layerB";

//设置layerB的宽度等于layerA的宽度
[layerA addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintWidth
                                                                                       relativeTo:@"LayerA"
                                                                                       attribute:kCAConstraintWidth]];

[layerA addConstraint:[CAConstraint constraintWithAttribute:kCAConstraintMidX
                                                                                       relativeTo:@"layerA"
                                                                                       attribute:kCAConstraintMidX]];

[theLayer addSublayer:layerB];

 

转自‘http://hi.baidu.com/iamgleaf/blog/item/38520d949d025107d31b7023.html

 

 

 

 

复制代码
//  AnimationView.m

//  AnimationTestV2

//

//  Created by jtone  on 11-8-9.

//  Copyright 2011年__MyCompanyName__. All rights reserved.

//

#import"AnimationView.h"

#import<QuartzCore/QuartzCore.h>

#define kDuaitionOfTimer00.2

#define kDuaitionOfTimer10.2

#define kDuaitionOfTimer20.2

#define kDuaitionOfTimer30.2

#define kDuaitionOfTimer41.1

#define kDisplacementOfTimer110

#define kDisplacementOfTimer210

@implementationAnimationView

CGPoint leftPhoneCenter;

CGPoint contactCenter;

CGPoint rightPhoneCenter;

CGPoint picCenter;



//位置变化动画

- (CAAnimation *)animationMoveFrom:(CGPoint) from To:(CGPoint) to Duration:(CGFloat) duration BeginTime:(CGFloat)beginTime 

{

CAKeyframeAnimation *bounceAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

CGFloat animationDuration = duration;

CGMutablePathRef thePath = CGPathCreateMutable();

CGPathMoveToPoint(thePath, NULL, from.x, from.y);

CGPathAddLineToPoint(thePath, NULL, to.x, to.y);

bounceAnimation.path = thePath;

bounceAnimation.duration = animationDuration;

    bounceAnimation.beginTime = beginTime;

bounceAnimation.repeatCount=0;

bounceAnimation.removedOnCompletion=NO;

bounceAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

CGPathRelease(thePath);

return bounceAnimation;

}


//透明度变化动画

-(CAAnimation *)animationWithOpacityFrom:(CGFloat) from To:(CGFloat) to Duration:(CGFloat) duration BeginTime:(CGFloat)beginTime 

{    

    CABasicAnimation *theAnimation;    

    theAnimation=[CABasicAnimation animationWithKeyPath:@"opacity"];    

    theAnimation.duration=duration; 

    theAnimation.beginTime = beginTime;    

    theAnimation.repeatCount=0;    

    theAnimation.autoreverses=NO;    

    theAnimation.fromValue=[NSNumber numberWithFloat:from];    

    theAnimation.toValue=[NSNumber numberWithFloat:to];

    

    return theAnimation;

}



-(NSArray *)AnimWithPhone:(CGPoint)phoneCenter Option:(int)option//手机壳动画设置

{

    NSArray *arr = [NSArray arrayWithObjects:

                    [self   animationMoveFrom:phoneCenter  To:CGPointMake(phoneCenter.x+kDisplacementOfTimer1*option,phoneCenter.y)    Duration:kDuaitionOfTimer0 BeginTime:1.5],

                    [self   animationMoveFrom:CGPointMake(phoneCenter.x+kDisplacementOfTimer1*option,phoneCenter.y)    To:phoneCenter  Duration:kDuaitionOfTimer1 BeginTime:1.7],

                    [self   animationMoveFrom:phoneCenter    To:CGPointMake(phoneCenter.x+kDisplacementOfTimer2*option,phoneCenter.y)  Duration:kDuaitionOfTimer2 BeginTime:1.9],

                    [self  animationMoveFrom:CGPointMake(phoneCenter.x+kDisplacementOfTimer2*option,phoneCenter.y)    To:phoneCenter  Duration:kDuaitionOfTimer3 BeginTime:2.1],

                   nil];

   returnarr;

}



-(NSArray *)AnimFromObj:(CGPoint)obj1 ToObj:(CGPoint)obj2 Option:(int)option//图片,联系人动画设置

{

    NSArray *arr = [NSArray arrayWithObjects:

                    [self  animationWithOpacityFrom:0.0To:0.0Duration:1.0BeginTime:0.0],

                    [self  animationWithOpacityFrom:0.0To:1.0Duration:0.3BeginTime:1.0],

                    [self  animationMoveFrom:obj1  To:CGPointMake(obj1.x+kDisplacementOfTimer1*option, obj1.y)    Duration:kDuaitionOfTimer0 BeginTime:1.5],

                    [self  animationMoveFrom:CGPointMake(obj1.x+kDisplacementOfTimer1*option, obj1.y)    To:obj1  Duration:kDuaitionOfTimer1 BeginTime:1.7],

                    [self  animationMoveFrom:obj1    To:CGPointMake(obj1.x+kDisplacementOfTimer2*option,obj1.y)   Duration:kDuaitionOfTimer2 BeginTime:1.9],

                    [self  animationMoveFrom:CGPointMake(obj1.x+kDisplacementOfTimer2*option,obj1.y)     To:obj1  Duration:kDuaitionOfTimer3 BeginTime:2.1],

                    [self  animationMoveFrom:obj1 To:obj2 Duration:kDuaitionOfTimer4 BeginTime:2.4],

                    [self  animationMoveFrom:obj2 To:obj2 Duration:kDuaitionOfTimer4 BeginTime:3.5],

                    [self  animationWithOpacityFrom:1.0To:0.0Duration:0.3BeginTime:3.7],

                   nil];                    

   returnarr;

}




-(CAAnimationGroup *)getAnimGroup //创建动画组

{

    CAAnimationGroup * animGroup  = [CAAnimationGroup animation];

animGroup.delegate            = self;

animGroup.removedOnCompletion = NO;

animGroup.duration  = 4.0;

animGroup.repeatCount  = 1;

animGroup.fillMode  = kCAFillModeForwards;

    return animGroup;

}




-(void)setup//开始动画

{

    leftPhoneCenter    = CGPointMake(leftPhone.frame.origin.x+35, leftPhone.frame.origin.y+55);

    contactCenter         = CGPointMake(contact.frame.origin.x+25, contact.frame.origin.y+25);

    rightPhoneCenter = CGPointMake(rightPhone.frame.origin.x+35, rightPhone.frame.origin.y+55);

    picCenter                 = CGPointMake(picture.frame.origin.x+25,picture.frame.origin.y+25);

    

    contact.hidden = NO;

    picture.hidden = NO;

    

    CAAnimationGroup * mp1 = [self getAnimGroup];

    mp1.animations           = [self AnimWithPhone:leftPhoneCenter Option:-1];

    

    [leftPhone.layer addAnimation:mp1 forKey:@"jtone"];

    [leftPhoneScreen.layer addAnimation:mp1 forKey:@"jtone"];

    

    CAAnimationGroup * mp2 = [self getAnimGroup];

    mp2.animations           = [self AnimWithPhone:rightPhoneCenter Option:1];

    

    [rightPhone.layer addAnimation:mp2 forKey:@"jtone"];

    [rightPhoneScreen.layer addAnimation:mp2 forKey:@"jtone"];

    

    CAAnimationGroup * mp3 = [self getAnimGroup];

    mp3.animations           = [self AnimFromObj:contactCenter ToObj:picCenter Option:-1];

    [contact.layer addAnimation:mp3 forKey:@"jtone"];    

    

    CAAnimationGroup * mp4 = [self getAnimGroup];

    mp4.animations           = [self AnimFromObj:picCenter ToObj:contactCenter Option:1];

    [picture.layer addAnimation:mp4 forKey:@"jtone"];

}



- (void)dealloc

{

    [superdealloc];

}

@end
复制代码
目录
相关文章
el-input el-select调整字体及内边距
1. 背景 el-input输入框默认提供的字体较小,且内边距较大。 这是为了提供统一的样式和好看的外观。 在某些情况下,我们希望使用较大的字体,且让输入框的内边距小一些以便容纳更多东西。
2360 0
|
JavaScript 开发者
动画-transition-group 中 appear 和 tag 属性的作用|学习笔记
快速学习动画- transition-group 中 appear 和 tag 属性的作用
215 0
动画-transition-group 中 appear 和 tag 属性的作用|学习笔记
|
JavaScript
transition-group列表过渡
《Vue实战》笔记
87 0
|
存储 知识图谱
SAP WM中阶Storage Type的Capacity Check – Check According to Maximum Weight
SAP WM中阶Storage Type的Capacity Check – Check According to Maximum Weight
SAP WM中阶Storage Type的Capacity Check – Check According to Maximum Weight
SAP WM中阶Storage Type的Capacity Check – Check based on palletization according to SUT 1
SAP WM中阶Storage Type的Capacity Check – Check based on palletization according to SUT 1
SAP WM中阶Storage Type的Capacity Check – Check based on palletization according to SUT 1
SAP WM中阶Storage Type的Capacity Check – Usage check based on material
SAP WM中阶Storage Type的Capacity Check – Usage check based on material
SAP WM中阶Storage Type的Capacity Check – Usage check based on material
SAP WM中阶Storage Type的Capacity Check – Check based on maximum quantity per bin in storage type.
SAP WM中阶Storage Type的Capacity Check – Check based on maximum quantity per bin in storage type.
SAP WM中阶Storage Type的Capacity Check – Check based on maximum quantity per bin in storage type.
SAP WM中阶Storage Type的Capacity Check – Usage check based on SUT
SAP WM中阶Storage Type的Capacity Check – Usage check based on SUT
SAP WM中阶Storage Type的Capacity Check – Usage check based on SUT
|
Linux 芯片
can&#39;t able to update the design capacity in bq27441-G1
/*************************************************************************** * can't able to update the design capacity in bq27441-G1 * 声明...
989 0
SAP Spartacus My Company list focus事件触发后,控件border的默认效果
SAP Spartacus My Company list focus事件触发后,控件border的默认效果
SAP Spartacus My Company list focus事件触发后,控件border的默认效果