CoreAnimation学习笔记（二）

书接上回http://www.jianshu.com/p/785446472727

九，缓冲

（一）动画速度

可以给动画CAAnimation设置animation.timingFunction来控制动画的速度，也可以通过给事务CATransaction设置timingFunction来设置事务中的多个动画的速度。
这里有一些方式来创建CAMediaTimingFunction，最简单的方式是调用+timingFunctionWithName:的构造方法。这里传入如下几个常量之一(CALayer对应的)：

kCAMediaTimingFunctionLinear 
kCAMediaTimingFunctionEaseIn 
kCAMediaTimingFunctionEaseOut 
kCAMediaTimingFunctionEaseInEaseOut
kCAMediaTimingFunctionDefault

1，下面是通过layer来实现的控制动画速度的例子:

- (void)viewDidLoad
{
[super viewDidLoad];
//create a red layer
self.colorLayer = [CALayer layer];
self.colorLayer.frame = CGRectMake(0, 0, 100, 100);
self.colorLayer.position = CGPointMake(self.view.bounds.size.width/2.0, self.view.bounds.size.height/2.0);
self.colorLayer.backgroundColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:self.colorLayer];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//configure the transaction
[CATransaction begin];
[CATransaction setAnimationDuration:1.0];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
//set the position
self.colorLayer.position = [[touches anyObject] locationInView:self.view];
//commit transaction
[CATransaction commit];
}

2，UIView控制动画速度的参数有:

UIViewAnimationOptionCurveEaseInOut 
UIViewAnimationOptionCurveEaseIn 
UIViewAnimationOptionCurveEaseOut 
UIViewAnimationOptionCurveLinear

以下是通过UIView来实现的控制动画速度的例子:

  - (void)viewDidLoad
{
[super viewDidLoad];
//create a red layer
self.colorView = [[UIView alloc] init];
self.colorView.bounds = CGRectMake(0, 0, 100, 100);
self.colorView.center = CGPointMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 2);
self.colorView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.colorView];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//perform the animation
[UIView animateWithDuration:1.0 delay:0.0
                    options:UIViewAnimationOptionCurveEaseOut
                 animations:^{
                        //set the position
                        self.colorView.center = [[touches anyObject] locationInView:self.view];
                    }
                 completion:NULL];
}

3，缓冲和关键帧动画
CAKeyframeAnimation有一个NSArray类型的timingFunctions属性，我们可以用它来对每次动画的步骤指定不同的计时函数。但是指定函数的个数一定要等于keyframes数组的元素个数减一，因为它是描述每一帧之间动画速度的函数:

- (void)viewDidLoad
{
[super viewDidLoad];
//create sublayer
self.colorLayer = [CALayer layer];
self.colorLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
self.colorLayer.backgroundColor = [UIColor blueColor].CGColor;
//add it to our view
[self.layerView.layer addSublayer:self.colorLayer];
}

- (IBAction)changeColor
{
//create a keyframe animation
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"backgroundColor";
animation.duration = 2.0;
animation.values = @[
                     (__bridge id)[UIColor blueColor].CGColor,
                     (__bridge id)[UIColor redColor].CGColor,
                     (__bridge id)[UIColor greenColor].CGColor,
                     (__bridge id)[UIColor blueColor].CGColor ];
//add timing function
CAMediaTimingFunction *fn = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn];
animation.timingFunctions = @[fn, fn, fn];
//apply animation to layer
[self.colorLayer addAnimation:animation forKey:nil];
}

(二) 自定义缓冲函数

除了+functionWithName:之外，CAMediaTimingFunction同样有另一个构造函数，一个有四个浮点参数的+functionWithControlPoints::::,可以定义两个控制点的x，y分别是cp1x,cp1y,cp2x,cp2y。CAMediaTimingFunction有一个叫做-getControlPointAtIndex:values:的方法，可以用来检索曲线的点。注意values:用浮点数组接收，不是CGPoint。index是从0-3的整数，0,3代表起点和终点，1,2代表起点和终点的控制点。self.layerView.layer.geometryFlipped = YES可以使坐标的原点在左下角，起点和终点的坐标是(0,0)和(1,1)。可以用UIBezierPath和CAShapeLayer来把它画出来:
1，系统缓冲函数的路径:

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
//create timing function
CAMediaTimingFunction *function = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];

//get control points
float cp1[2],cp2[2];
[function getControlPointAtIndex:1 values:cp1];
[function getControlPointAtIndex:2 values:cp2];

CGPoint controlPoint1,controlPoint2;
controlPoint1 = CGPointMake(cp1[0], cp1[1]);
controlPoint2 = CGPointMake(cp2[0], cp2[1]);
//create curve
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointZero];
[path addCurveToPoint:CGPointMake(1, 1)
        controlPoint1:controlPoint1 controlPoint2:controlPoint2];
//scale the path up to a reasonable size for display
[path applyTransform:CGAffineTransformMakeScale(200, 200)];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 4.0f;
shapeLayer.path = path.CGPath;
[self.layerView.layer addSublayer:shapeLayer];
//flip geometry so that 0,0 is in the bottom-left
self.layerView.layer.geometryFlipped = YES;
}

2,自定义的缓冲函数的路径:

 - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.

CAMediaTimingFunction *function = [CAMediaTimingFunction functionWithControlPoints:1 :0 :0.75 :1];
//get control points
CGPoint controlPoint1, controlPoint2;
[function getControlPointAtIndex:1 values:(float *)&controlPoint1];
[function getControlPointAtIndex:2 values:(float *)&controlPoint2];
//create curve
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointZero];
[path addCurveToPoint:CGPointMake(1, 1)
        controlPoint1:controlPoint1 controlPoint2:controlPoint2];
//scale the path up to a reasonable size for display
[path applyTransform:CGAffineTransformMakeScale(200, 200)];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 4.0f;
shapeLayer.path = path.CGPath;
[self.layerView.layer addSublayer:shapeLayer];
//flip geometry so that 0,0 is in the bottom-left
self.layerView.layer.geometryFlipped = YES;
}

3,基于关键帧的缓冲:
timingFunctions的个数是values的个数减1.

- (void)viewDidLoad
{
[super viewDidLoad];
//add ball image view
UIImage *ballImage = [UIImage imageNamed:@"Ball.png"];
self.ballView = [[UIImageView alloc] initWithImage:ballImage];
[self.containerView addSubview:self.ballView];
//animate
[self animate];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//replay animation on tap
[self animate];
}

- (void)animate
{
//reset ball to top of screen
self.ballView.center = CGPointMake(150, 32);
//create keyframe animation
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
animation.duration = 1.0;
animation.delegate = self;
animation.values = @[
                     [NSValue valueWithCGPoint:CGPointMake(150, 32)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 268)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 140)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 268)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 220)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 268)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 250)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 268)]
                     ];

animation.timingFunctions = @[
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn]
                              ];

animation.keyTimes = @[@0.0, @0.3, @0.5, @0.7, @0.8, @0.9, @0.95, @1.0];
//apply animation
self.ballView.layer.position = CGPointMake(150, 268);
[self.ballView.layer addAnimation:animation forKey:nil];
}

4，流程自动化
通过时间线形取值，value = (endValue – startValue) × time + startValue;时间通过转化得到转化后的时间，去取该时间点的值。这里用的是bounceEaseOut(t)函数转化时间:

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.

//add ball image view
UIImage *ballImage = [UIImage imageNamed:@"toTop.png"];
self.ballView = [[UIImageView alloc] initWithImage:ballImage];
[self.containerView addSubview:self.ballView];
//animate
[self animate];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
[self animate];
}


//弹性动画,转化时间的函数
float bounceEaseOut(float t)
{
if (t < 4/11.0) {
    return (121 * t * t)/16.0;
} else if (t < 8/11.0) {
    return (363/40.0 * t * t) - (99/10.0 * t) + 17/5.0;
} else if (t < 9/10.0) {
    return (4356/361.0 * t * t) - (35442/1805.0 * t) + 16061/1805.0;
}
return (54/5.0 * t * t) - (513/25.0 * t) + 268/25.0;
}


float interpolate(float from, float to, float time)
{
return (to - from) * time + from;
}

- (id)interpolateFromValue:(id)fromValue toValue:(id)toValue time:(float)time
{
if ([fromValue isKindOfClass:[NSValue class]]) {
    //get type
    const char *type = [fromValue objCType];
    if (strcmp(type, @encode(CGPoint)) == 0) {
        CGPoint from = [fromValue CGPointValue];
        CGPoint to = [toValue CGPointValue];
        CGPoint result = CGPointMake(interpolate(from.x, to.x, time), interpolate(from.y, to.y, time));
        return [NSValue valueWithCGPoint:result];
    }
}
//provide safe default implementation
return (time < 0.5)? fromValue: toValue;
}

- (void)animate
{
//reset ball to top of screen
self.ballView.center = CGPointMake(150, 32);
//set up animation parameters
NSValue *fromValue = [NSValue valueWithCGPoint:CGPointMake(150, 32)];
NSValue *toValue = [NSValue valueWithCGPoint:CGPointMake(150, 268)];
CFTimeInterval duration = 1.0;
//generate keyframes
NSInteger numFrames = duration * 60;
NSMutableArray *frames = [NSMutableArray array];
for (int i = 0; i < numFrames; i++) {
    //等分时间，根据每个时间点获取value值
    float time = (1/(float)numFrames) * i;
    NSLog(@"时间是%f===from:%@===to:%@",time,fromValue,toValue);
    //apply easing(转化时间)
    time = bounceEaseOut(time);
    NSLog(@"转化后时间是%f===",time);
    //add keyframe
    [frames addObject:[self interpolateFromValue:fromValue toValue:toValue time:time]];
}
//create keyframe animation
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
animation.duration = 1.0;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
//    animation.delegate = self;
animation.values = frames;
//apply animation
[self.ballView.layer addAnimation:animation forKey:nil];
}

(十) 基于定时器的动画

（一）定时帧

1，定时器NSTimer