IOS--CALayer实现，界限、透明度、位置、旋转、缩放组合动画（转）

首先引入框架：QuartzCore.framework
在头文件声明：CALayer *logoLayer
{
//界限

CABasicAnimation *boundsAnimation = [CABasicAnimationanimationWithKeyPath:@"bounds"];
boundsAnimation.fromValue = [NSValue valueWithCGRect: logoLayer.bounds];
boundsAnimation.toValue = [NSValue valueWithCGRect:CGRectZero];

//透明度变化
CABasicAnimation *opacityAnimation = [CABasicAnimationanimationWithKeyPath:@"opacity"];
opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0];
opacityAnimation.toValue = [NSNumber numberWithFloat:0.5];
//位置移动

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.fromValue = [NSValue valueWithCGPoint: logoLayer.position];
CGPoint toPoint = logoLayer.position;
toPoint.x += 180;
animation.toValue = [NSValue valueWithCGPoint:toPoint];
//旋转动画
CABasicAnimation* rotationAnimation =
[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];//"z"还可以是“x”“y”，表示沿z轴旋转
rotationAnimation.toValue = [NSNumber numberWithFloat:(2 * M_PI) * 3];
// 3 is the number of 360 degree rotations
// Make the rotation animation duration slightly less than the other animations to give it the feel
// that it pauses at its largest scale value
rotationAnimation.duration = 2.0f;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; //缓入缓出

//缩放动画

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:0.0];
scaleAnimation.toValue = [NSNumber numberWithFloat:1.0];
scaleAnimation.duration = 2.0f;
scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 2.0f;
animationGroup.autoreverses = YES; //是否重播，原动画的倒播
animationGroup.repeatCount = NSNotFound;//HUGE_VALF; //HUGE_VALF,源自math.h
[animationGroup setAnimations:[NSArray arrayWithObjects:rotationAnimation, scaleAnimation, nil]];

//将上述两个动画编组
[logoLayer addAnimation:animationGroup forKey:@"animationGroup"];
}
//去掉所有动画
[logoLayer removeAllAnimations];
//去掉key动画

[logoLayer removeAnimationForKey:@"animationGroup"];

------------------------------------------------------------------------------------------------

【学习】iPhone/iOS Core Animation开发总结(CALayer)

转载自 http://blog.sina.com.cn/s/blog_949e2b3f0101gtxv.html
一.重要参数

bounds,frame,position属于基本的几何定位，相互之间数值变化会相互影响

anchorPoint:单位参数(0-1)表示，变形(transform)时候的变换源点

zPosition:相当于css中z-index的概念，Apple建议不要用这个来替代CALayer层次设置。

cornerRadius:圆角

二.几何变形(Transforming a Layer's Geometry)

1.用CATransform3D系列方法

//将CGAffineTransform转换成CATransform3D

layer1_1.transform=CATransform3DMakeAffineTransform(CGAffineTransformMakeScale(1, -1));

//CATransform3D系列方法

layer1_1.transform=CATransform3DMakeScale(-1, 1, 1);

layer1_1.transform=CATransform3DScale(CATransform3DMakeScale(-2, 1, 1), -1, 1, 1);

layer1_1.transform=CATransform3DIdentity;

2.修改CATransform3D的data structure

CATransform3D trans=CATransform3DIdentity;

NSLog(@"%f",trans.m44);

//不能是1除以，一定要1.0除以1000(zDistance)

//wrong trans.m34=1/100.00

trans.m34=-1.0/1000;

trans = CATransform3DTranslate(trans, 0, 0, -240);

trans = CATransform3DRotate(trans, d2r(90), 1, 0, 0);

trans = CATransform3DTranslate(trans, 0, 0, 240);

[layer1 setTransform:trans];

3.key-valre设置key Paths(rotation,scale,translation)

[layer1 setValue:[NSNumber numberWithInt:200] forKeyPath:@"transform.translation.x"];

三.Layer数层结构(Layer-Tree Hierarchy)

1.add,insert,remove,replace来进行树状结构的构建

2.重置(Reposition and Resizing)layer

a)你可以通过修改第一点提到的几个参数来调整大小。

b)needsDisplayOnBoundsChange设置YES,则在bounds变化时，自动调用setNeedsDisplay,调 用layer的display的方法，或者直接显示调用setNeedsDisplay(不能使用setNeedsDisplayInRect)，也会调 用自定义layer的display方法。或者是setNeesLayout,调用layer的layoutSubLayers。(PS:无法使用 layoutManager和autoResizingMask方法，这个是Mac OS上的方法。)

c)在UIView的layoutSubviews里实现自定义layout的方法。

3.masksToBounds设置YES,则裁剪subLayers。否则不裁剪，subLayers可以超过superLayer的bounds。

4.Action

当更改layer的参数或者将layer添加，删除，隐藏，替换时触发

触发方法可以是子类化CALayer,-(id)actionForKey:(NSString*)key;代理方式-(id)actionForLayer:(CALayer*) forKey:(NSString*)key

-(id)actionForLayer:(CALayer *)layer forKey:(NSString *)event{

CATransition *anim=nil;

if([event isEqualToString:@"contents"]){

anim=[CATransition animation];

anim.duration=2;

anim.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

anim.type=@"cube";

anim.subtype=kCATransitionFromRight;

}

return anim;

//不执行任何动画

//return nil;

}

苹果文档种提供了修改sublayers默认动画的方法

NSMutableDictionary *cActions=[NSMutableDictionary dictionaryWithDictionary:[layer1_1 actions]];

[cActions setObject:[NSNull null] forKey:@"sublayers"];

layer1_1.actions=cActions;

实现CAAction Protocol

代理类中实现方法runActionForKey:object:arguments

-(void)runActionForKey:(NSString *)event object:(id)anObject arguments:(NSDictionary *)dict{

NSLog(@"runActionForKey:"%@" object:%@ arguments:%@", event, anObject, dict);

CATransition *anim=nil;

if([event isEqualToString:@"test"]){

anim=[CATransition animation];

anim.duration=2;

anim.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

anim.type=@"cube";

anim.subtype=kCATransitionFromRight;

}

[(CALayer*)anObject addAnimation:anim forKey:@"contets"];

}

触发runActionForKey

//添加自定义的action以及对应的触发方法所在的代理,应该可以定义一个动画子类(CAAnimation)

layer1.actions = [NSDictionary dictionaryWithObjectsAndKeys:[[FCLayerDelegate alloc]init], @"test", nil];

//实际触发的地方，当设置test参数，其实最后触发的是runActionForKey种的立方体旋转

[layer1 setValue:[NSNumber numberWithInt:19] forKey:@"test"];

四.提供Layer内容(Providing Layer Content)

1.contents属性设置CGImageRef

layer1.contents=(id)image1.CGImage;

2.用delegate来提供内容

a)displayLayer:(CALayer*)

b)-(void)drawLayer:(CALayer*) inContext:(CGContextRef)

//声明代理

@interface FCLayerDeledegate : NSObject

@end

//实现代理

@implementation FCLayerDelegate

//覆盖这个方法，就不会执行后面的方法，2者取其一，根据传入的值来判断下一步操作

-(void)displayLayer:(CALayer *)layer{

NSLog(@"%@",[layer valueForKey:@"test"]);

}

-(void)drawLayer:(CALayer *)ly inContext:(CGContextRef)context

{

CGContextSetFillColorWithColor(context, [[UIColor redColor]CGColor]);

CGContextFillRect(context, ly.bounds);

}

@end

//执行代码

CALayer* layer1_3=[CALayer layer];

layer1_3.delegate=[[FCLayerDelegate alloc]init];

[layer1_3 setValue:@"testString" forKey:@"test"];

[layer1_3 setNeedsDisplay];

ps:以上方法用于CALayer本身（非自己子类）

3) 用子类提供内容

a)display

b)drawInContext:(CGContextRef)

和前面代理模式差不多，只不过少传layer参数，因为layer就是其本身(self);

4)内容的布局

默认情况下，内容图片是会铺开充满整个layer的bounds的，如果要使得contents按照原来尺寸显示在layer中，就要设置ContentsGravity

大致2种参数

1.位置参数，注意，ios坐标是y是相反的，所以bottom就是top

2.设置铺满方式，3种

layer1_3.contentsGravity=kCAGravityBottomLeft;

layer1_3.contents=(id)image3.CGImage;

//layer1_3.contentsGravity=kCAGravityResizeAspectFill;

PS:此外contentsCenter这个属性在铺满方式的参数下可以指定拉伸区域，文档中指出是指定拉伸的范围，但是似乎没有作用。暂时忽略。

五.动画

1.动画类簇

a)CAMediaTiming protocol的主要参数

speed:执行速度，如果速度为2，则一个10秒的duration，则只需要5秒完成。子类参数相对父类参数的，如果子类是2，父类是2，则需要2.5秒完成

repeatCount|repeatDuration:重复的次数和重复的间隔 ，如果repeatCount设置成 1e100f则无限重复

fillMode:决定动画结束时候的状态。要和removeOnCompletion参数一起设置才有效。动画结束后的状态并没有影响layer的位置，其实layer还在原来的地方没变。

此外还有duration,autoreverses,beginTime,timeOffset

b)CAAnimation

timingFunction:指定一个CAMediaTimingFunction,有2种提供方式，一种是常量如kCAMediaTimingFunctionLinear，另外一种是自定义2个control points来定制一个时间曲线

functionWithControlPoints::::。

delegate:2个代理方法animationDidStart:和animationDidStop:finished:

2.一般动画

任何CALayer的animated的属性或者CTM改变时候都是动画形式来过渡的，这个称为implicit Animation。这里不多做介绍

主要介绍下(Explicit Animation)显示动画

a)CABasicAnimation 针对某个属性的设置变化

CABasicAnimation *anim;

anim=[CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];

anim.duration=8;

anim.autoreverses=NO;

anim.repeatCount=2;

anim.fromValue=[NSNumber numberWithFloat:d2r(0)];

anim.toValue=[NSNumber numberWithFloat:d2r(-90)];

// layer1.transform=CATransform3DTranslate(CATransform3DIdentity, 0, 0, 100);

[layer1 addAnimation:anim forKey:@"layer1Rotation"];

b)CAKeyframeAnimation

关键帧(key frame)有2种方式提供:

参数path,创建CGPathRef

path:CGPathRef 一般用于移动复杂的位置，如下例：

CGMutablePathRef path=CGPathCreateMutable();

CGPathMoveToPoint(path, NULL, 40, 420);

CGPathAddCurveToPoint(path, NULL, 40, 40, 160, 40, 160, 420);

CGPathAddCurveToPoint(path, NULL, 160, 40, 280, 40, 280, 420);

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

anim.path=path;

anim.duration=3;

//图像在移动过程中是否旋转

anim.rotationMode=kCAAnimationRotateAuto;

//动画结束时候状态，我动画结束在哪里就停在哪里

anim.removedOnCompletion = NO;

anim.fillMode=kCAFillModeForwards;

//设置keyTimes path加了2个点，所以将duration设置成了2段，前面一段快3/10，后面一段慢7/10

anim.calculationMode=kCAAnimationLinear;

anim.keyTimes=[NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],[NSNumber numberWithFloat:0.3],[NSNumber numberWithFloat:1.0], nil];

[layer1 addAnimation:anim forKey:@"nm1"];

CGPathRelease(path);

参数values：array of objects

如果objects是CGImage，key-path是"contents"的话，则是图像切换。

CAKeyframeAnimation *anim=[CAKeyframeAnimation animationWithKeyPath:@"contents"];

anim.duration=3;

anim.values=[NSArray arrayWithObjects:(id)image1.CGImage,(id)image2.CGImage,(id)image3.CGImage,nil];

[layer1 addAnimation:anim forKey:@"nm2"];

如果objects是CATransform3D的,key-path是“transform”,则是变换坐标

CAKeyframeAnimation *anim2=[CAKeyframeAnimation animationWithKeyPath:@"transform"];

anim2.duration=3;

anim2.repeatCount=1000;

anim2.autoreverses=YES;

CATransform3D trans=CATransform3DScale(CATransform3DIdentity, 1.5, 1.5, 1);

CATransform3D trans2=CATransform3DScale(CATransform3DIdentity, 1, 1, 1);

anim2.values=[NSArray arrayWithObjects:[NSValue valueWithCATransform3D:trans],[NSValue valueWithCATransform3D:trans2],nil];

[layer1 addAnimation:anim2 forKey:@"nm3"];

如果2个同时设置，还可以同时看到动画效果。比方说上述2个就可以看到图片切换并且放大和缩小的效果。

不要针对frame和size等参数设置keyframe动画，似乎没有效果。position是可以的。

3.动画事务(Transaction)

[CATransaction begin];

[CATransaction setValue:[NSNumber numberWithFloat:.5f] forKey:kCATransactionAnimationDuration];

layer1.position=CGPointMake(0, 0);

layer1.opacity=0;

[CATransaction commit];

通过事务可以修改implicit 动画的时间,否则没有办法修改。

4.动画过渡(Transition)

//CATransition

CATransition *animation = [CATransition animation];

animation.delegate = self;

animation.duration = 2;

animation.timingFunction = UIViewAnimationCurveEaseInOut;

//animation.type = kCATransitionFade;

animation.type = @"cube";

animation.subtype = kCATransitionFromLeft;

//2个view交换

NSUInteger green = [[self.view subviews] indexOfObject:self.greenView];

NSUInteger blue = [[self.view subviews] indexOfObject:self.blueView];

[self.view exchangeSubviewAtIndex:green withSubviewAtIndex:blue];

[layer1 addAnimation:animation forKey:@"animation"];

过渡有view的过渡和layer的过渡，2者是有区别的，网上有个例子transition包含了一共12种变换，相当有用。

参考文档:

Animation Types and Timing Programming Guide

Core Animation Programming Guide