ios动画学习(三)

使用Core Animation声明动画

CoreAnimation框架最基本的抽象类是CAAnimation类，这个类按照CAMediaTiming协议，提供了动画执行时间、速度，及重复次数这些基本设定，同时，它也遵循了CAAction协议，可提供该动画被图层驱动时的响应。
CAAnimation类之下定义了一系列的类，用来定义更具体的渐变动画类。层级如下：



下面是CABasicAnimation类使用：

- (IBAction)down:(id)sender {
//使用CABasicAnimation建立动画,fromValue、toValue、byValue数值以oc对象形式存在
CABasicAnimation * moveDown = [CABasicAnimation animationWithKeyPath:@"position.y"];
//是视图在动画执行完成后，停留在最后位置
//moveDown.removedOnCompletion = NO;
//moveDown.fillMode = kCAFillModeForwards;

//动画执行完成后，自动以动画形式原路返回
//moveDown.autoreverses = YES;

//动画重复执行的次数
//moveDown.repeatCount = 2;
moveDown.duration = 2.0;
moveDown.toValue = [NSNumber numberWithInt:layer.position.y+100];
//把动画应用到图层上，并且给动画加一个标识符moveDown
[layer addAnimation:moveDown forKey:@"moveDown"];
}

- (IBAction)up:(id)sender {
//使用CABasicAnimation建立动画
//这种声明动画的方式改变的只有界面本身，而非对象属性。这和设定对象属性制作成的动画有非常大的区别。
CABasicAnimation * moveUp = [CABasicAnimation animationWithKeyPath:@"position.y"];
moveUp.duration = 5.0;
//把正数封装成对象类型
moveUp.toValue = [NSNumber numberWithInt:layer.position.y-100];
//把动画应用到图层上，并且给动画加一个标识符moveUp
[layer addAnimation:moveUp forKey:@"moveUp"];
}

- (IBAction)stopdown:(id)sender {
//通过动画标识符取消动画
[layer removeAnimationForKey:@"moveDown"];
}

- (IBAction)stopup:(id)sender {
//通过动画标识符取消动画
[layer removeAnimationForKey:@"moveUp"];
}

- (IBAction)dr:(id)sender {
CABasicAnimation * downAndRight = [CABasicAnimation animationWithKeyPath:@"position"];
downAndRight.duration = 5.0;
//把c结构封装成对象类型
NSValue * endPoint = [NSValue valueWithCGPoint:CGPointMake(layer.position.x + 100, layer.position.y+100)];
downAndRight.toValue = endPoint;
[layer addAnimation:downAndRight forKey:@"downAndRight"];
}

- (IBAction)ul:(id)sender {
CABasicAnimation * upAndLeft = [CABasicAnimation animationWithKeyPath:@"position"];
upAndLeft.duration = 5.0;
NSValue * endPoint = [NSValue valueWithCGPoint:CGPointMake(layer.position.x - 100, layer.position.y-100)];
upAndLeft.toValue = endPoint;
[layer addAnimation:upAndLeft forKey:@"upAndLeft"];
}

- (IBAction)stopall:(id)sender {
//停止该图层上所有动画
[layer removeAllAnimations];
}

效果如下：



CAAnimation类对象也可以设定它的委托对象，当动画开始与结束时做自定义操作。CAAnimation的delegate属性如下：



可以看到它与其他类的delegate属性有些不同的是，它不需要遵循协议，只要委托对象中有如下函数即可：
- (void)animationDidStart:(CAAnimation *)anim;

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

下面介绍CAPropertyAnimation的另一个子类CAKeyframeAnimation的用法。
CAKeyframeAnimation可以指定动画执行的路径，能够制作出非常“不规则”的动画。比如沿贝塞尔曲线的动画。

下面就来看看如何来实现贝塞尔曲线动画。
先看头文件：

//
//  PathView.h
//  LearnAnimation
//
//  Created by zg on 15/6/7.
//  Copyright (c) 2015年 zg. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface PathView : UIView{
CAShapeLayer * shapeLayer;
}

-(void)go;

@end

定义一个圆形图层shapeLayer来执行动画，定义一个执行方法go
再看实现文件：

//
//  PathView.m
//  LearnAnimation
//
//  Created by zg on 15/6/7.
//  Copyright (c) 2015年 zg. All rights reserved.
//

#import "PathView.h"

@implementation PathView

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
[self drawPath];
[self drawCircle];
}

//定义角度转弧度宏
#define DEGREES_TO_RADIANS(degrees) ((M_PI * degrees)/180)
//画路径
-(void)drawPath{
UIBezierPath * path = [UIBezierPath bezierPath];
path.lineCapStyle = kCGLineCapRound;//路径端点圆状
[[UIColor blackColor]setStroke];
[[UIColor blackColor]setFill];
[path moveToPoint:CGPointMake(0, 100)];
[path addCurveToPoint:CGPointMake(300, 100) controlPoint1:CGPointMake(75, 25) controlPoint2:CGPointMake(225, 175)];
[path stroke];
path.lineWidth = 3;
[self setNeedsDisplay];
}

//画圆形图层
-(void)drawCircle{
UIBezierPath *path = [UIBezierPath bezierPath];
[path addArcWithCenter:CGPointMake(4 , 100) radius:8 startAngle:0 endAngle:DEGREES_TO_RADIANS(360) clockwise:YES];
[path closePath];
shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
[self.layer addSublayer:shapeLayer];
}

//执行动画
-(void)go{
CAKeyframeAnimation * pathAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnim.duration = 5;
//生成可变路径
CGMutablePathRef mutablePath = CGPathCreateMutable();
//坐标点，相对于当前图层pathLayer自身坐标系
CGPathMoveToPoint(mutablePath, NULL, 0 , 0);
CGPathAddCurveToPoint(mutablePath, NULL, 75, -75, 225, 75, 300, 0);
pathAnim.path = mutablePath;
[shapeLayer addAnimation:pathAnim forKey:nil];

}

@end

主要解释下实现函数go：
1、因为CAKeyframeAnimation是CAPropertyAnimation的子类，所以也会有animationWithKeyPath的动画声明方法。
2、CAKeyframeAnimation的path属性可以指定动画要执行的路径。
3、要重点说明的是CGMutablePathRef路径的坐标点是相对于执行动画的图层shapeLayer自身坐标系来计算的。
下面看效果：



三度空间的旋转：
layer有一个属性叫sublayerTransform，是渐变属性。通过CABasicAnimation动画来改变sublayerTransform属性，即可实现图层的三度空间旋转。
实现如下：

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self initSubLayer1];
[self initSubLayer2];
[self initSubLayer3];
[self initPerspective];
}

-(void)initPerspective{
//建立视点
CATransform3D perspective = CATransform3DIdentity;
int distance = 150;
perspective.m34 = -1/distance;
currentTransform = perspective;
mContentView.layer.sublayerTransform = currentTransform;
}

-(void)initSubLayer1{
subLayer1 = [CALayer layer];
subLayer1.bounds = CGRectMake(0, 0, 100, 100);
subLayer1.position = CGPointMake(140, 140);
subLayer1.backgroundColor = [[UIColor blueColor]CGColor];
subLayer1.cornerRadius = 10;//圆角半径
subLayer1.borderColor = [[UIColor blackColor]CGColor];
subLayer1.borderWidth= 2;
subLayer1.opacity = 0.5;
[mContentView.layer addSublayer:subLayer1];
}

-(void)initSubLayer2{
subLayer2 = [CALayer layer];
subLayer2.bounds = CGRectMake(0, 0, 100, 100);
subLayer2.position = CGPointMake(150, 150);
subLayer2.backgroundColor = [[UIColor greenColor]CGColor];
subLayer2.cornerRadius = 10;//圆角半径
subLayer2.borderColor = [[UIColor blackColor]CGColor];
subLayer2.borderWidth= 2;
subLayer2.opacity = 0.5;
[mContentView.layer addSublayer:subLayer2];
}

-(void)initSubLayer3{
subLayer3 = [CALayer layer];
subLayer3.bounds = CGRectMake(0, 0, 100, 100);
subLayer3.position = CGPointMake(160, 160);
subLayer3.backgroundColor = [[UIColor redColor]CGColor];
subLayer3.cornerRadius = 10;//圆角半径
subLayer3.borderColor = [[UIColor blackColor]CGColor];
subLayer3.borderWidth= 2;
subLayer3.opacity = 0.5;
[mContentView.layer addSublayer:subLayer3];
}

- (IBAction)rotateZ:(id)sender {
CABasicAnimation * rotateAnim = [CABasicAnimation animationWithKeyPath:@"sublayerTransform"];
rotateAnim.fillMode = kCAFillModeForwards;
rotateAnim.removedOnCompletion = NO;

rotateAnim.duration = 3;
CATransform3D rotateX3D = CATransform3DRotate(currentTransform, M_PI/6, 0, 0, 1);
NSValue  * toValue = [NSValue valueWithCATransform3D:rotateX3D];
rotateAnim.toValue = toValue;
[mContentView.layer addAnimation:rotateAnim forKey:nil];
currentTransform = rotateX3D;
}

当执行rotateZ函数可实现如下效果：