可以玩的UI-iOS交互式动画

本篇通过一个例子演示CABasicAnimation 的使用，及交互式动画的实现原理。
首先看下最终完成的效果：

完成效果演示

头像由矩形动画变成圆形，整个过程可以用手指移动来控制，我们一步一步来实现它，let's GO!
首先实例一个头像 layer：

float w = 120.0;
self.headerLayer = [CALayer layer];
self.headerLayer.frame = CGRectMake(0, 0, w, w);
self.headerLayer.position = CGPointMake((200 - w) / 2, (200 - w) / 2);
self.headerLayer.anchorPoint = CGPointMake(0, 0.5);
self.headerLayer.contents = (__bridge id)[UIImage imageNamed:@"head.jpg"].CGImage;
self.headerLayer.masksToBounds = YES;
self.headerLayer.cornerRadius = 0.0;
[self.containerView.layer addSublayer:self.headerLayer];

在这里，裁剪圆角主要用 cornerRadius 来完成，初始化为没有圆角。
接下来设置动画，在动画之前，先让动画暂停，否则动画设置完后会自动播放：

self.headerLayer.speed = 0.0;

由于我们的动画包含圆角变换，并沿着y轴平移，这两个动画都要在平移手势的控制之下，我们使用组合动画的方式来实现：

CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"cornerRadius";
animation.toValue = @(w / 2);
animation.duration = 1.0;

CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
positionAnimation.toValue = @(self.headerLayer.position.y - w);
positionAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

CAAnimationGroup *animaGroup = [CAAnimationGroup animation];
animaGroup.duration = 2.0f;
animaGroup.fillMode = kCAFillModeForwards;
animaGroup.removedOnCompletion = NO;
animaGroup.animations = @[animation, positionAnimation];
[self.headerLayer addAnimation:animaGroup forKey:@"Animation"];

最后我们设置手势的处理：

- (void)pan:(UIPanGestureRecognizer *)pan
{
    CGFloat x = [pan translationInView:self.view].x;
    
    x /= 200.0f;
    
    CFTimeInterval timeOffset = self.headerLayer.timeOffset;
    timeOffset = MIN(0.999, MAX(0.0, timeOffset - x));
    self.headerLayer.timeOffset = timeOffset;
    self.titleLabel.layer.timeOffset = timeOffset;
    
    [pan setTranslation:CGPointZero inView:self.view];
}

手动交互的关键是控制 layer 的 timeOffset，它可以控制当前动画执行的时间偏移量，范围在0～1之间，所以我们要将移动手势的位置和动画的时间点做一个换算。另外注意将手势重置，以保证每次能获得相对于上一次的偏移位置（x）。