iOS 有趣的动画实战

效果

如图，按钮的边缘慢慢显示出来，一个view 绕着转动。

实现过程，一个 CALayer 是 绕着转动的那个view. 一个 CAShapeLayer 用来画button的边框。

代码如下：

    _qLayer = [CALayer layer];
    _qLayer.backgroundColor = [UIColor blackColor].CGColor;
    _qLayer.frame = CGRectMake(20,
                                0,
                                10,
                                10);
    [_qbutton.layer addSublayer:_qLayer];
    
    CAShapeLayer *_eyeballLayer = [CAShapeLayer layer];
    CGMutablePathRef path=CGPathCreateMutable();
    CGPathMoveToPoint(path,
                      &CGAffineTransformIdentity,
                      20, 0);
    CGPathAddEllipseInRect(path, NULL, CGRectMake(0, 0, 150, 40));
    _eyeballLayer.borderColor = [UIColor blackColor].CGColor;
    _eyeballLayer.lineWidth = 4.f;
    _eyeballLayer.path = path;
    _eyeballLayer.fillColor = [UIColor clearColor].CGColor;
    _eyeballLayer.strokeColor = [UIColor blackColor].CGColor;
    _eyeballLayer.anchorPoint = CGPointMake(0.5, 0.5);
//    _eyeballLayer.strokeEnd = 0;
    
    [_qbutton.layer addSublayer:_eyeballLayer];
    _eyeballLayer.frame = _qbutton.bounds;

添加layer 和 边框 下面是动画过程

/// 转圈动画示例 添加动画
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
        animation.keyPath = @"position";
        
        CGMutablePathRef path=CGPathCreateMutable();
        CGPathAddEllipseInRect(path, NULL, CGRectMake(0, 0, 150, 40));
        animation.path=path;
        CGPathRelease(path);
        animation.repeatCount=MAXFLOAT;
        animation.removedOnCompletion = NO;
        animation.fillMode = kCAFillModeForwards;
        animation.duration = 4.0f;
        animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        [_qLayer addAnimation:animation forKey:@"keyani"];
        
        
        CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        animation1.fromValue = @(0);
        animation1.toValue = @(1);
        animation1.duration = 4;
        animation1.repeatCount = MAXFLOAT;
        animation1.fillMode = kCAFillModeForwards;
        animation1.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        [_eyeballLayer addAnimation:animation1
                             forKey:@"2222"];

直播点赞效果实现如下图

点赞动画

右下角飘出的数字动画就是点赞的效果，如果把数字换成点赞的拇指就一切OK了，

这个实现版本比较简单，使用 CAEmitterLayer 苹果自带的粒子效果。就足以实现了。代码如下：viewController中加入如下属性

///粒子效果Cell
@property(nullable, copy) NSArray *emitterCells;
//例子的发射位置
@property CGPoint emitterPosition;
// Z position
@property CGFloat emitterZPosition;
//每秒产生多少个粒子
@property float birthRate;
//声明时间 一个粒子可以存活多少秒 比如 设置为 3！！
@property float lifetime;
//声明时间范围 你可以用这个东西使粒子的lifetime产生少许变化。粒子系统会随机在这个区间中取一个lifetime出来(lifetime – lifetimeRange, lifetime + lifetimeRange) 在我们的程序中，粒子会存活2.5~3.5秒
@property float lifetimeRange;
//X Y Z 方向的加速度
@property CGFloat xAcceleration;
@property CGFloat yAcceleration;
@property CGFloat zAcceleration;
@property CGSize emitterSize;
@property CGFloat emitterDepth;
@property(copy) NSString *emitterShape;
@property(copy) NSString *emitterMode;
@property BOOL preservesDepth;
@property float velocity;
@property float scale;
@property float spin;
@property(copy) NSString *renderMode;
@property (nonatomic, strong) CAEmitterLayer *emitterLayer;

实现如下：

- (CAEmitterLayer *)emitterLayer
{
    if (!_emitterLayer) {
        CAEmitterLayer *emitterLayer = [CAEmitterLayer layer];
        // 发射器在xy平面的中心位置
        emitterLayer.emitterPosition = CGPointMake(self.view.frame.size.width-50,self.view.frame.size.height-50);
        // 发射器的尺寸大小
        emitterLayer.emitterSize = CGSizeMake(20, 20);
        // 渲染模式
        emitterLayer.renderMode = kCAEmitterLayerUnordered;
        // 开启三维效果
        _emitterLayer.preservesDepth = YES;
        NSMutableArray *array = [NSMutableArray array];
        // 创建粒子
        for (int i = 1; i<10; i++) {
            // 发射单元
            CAEmitterCell *stepCell = [CAEmitterCell emitterCell];
            // 粒子的创建速率，默认为1/s
            stepCell.birthRate = 1;
            // 粒子存活时间
            stepCell.lifetime = arc4random_uniform(4) + 1;
            // 粒子的生存时间容差
            stepCell.lifetimeRange = 1.5;
            // 颜色
            // fire.color=[[UIColor colorWithRed:0.8 green:0.4 blue:0.2 alpha:0.1]CGColor];
            UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d", i]];
            // 粒子显示的内容
            stepCell.contents = (id)[image CGImage];
            // 粒子的名字
            //            [fire setName:@"step%d", i];
            // 粒子的运动速度
            stepCell.velocity = arc4random_uniform(100) + 100;
            // 粒子速度的容差
            stepCell.velocityRange = 80;
            // 粒子在xy平面的发射角度
            stepCell.emissionLongitude = M_PI+M_PI_2;;
            // 粒子发射角度的容差
            stepCell.emissionRange = M_PI_2/6;
            // 缩放比例
            stepCell.scale = 0.3;
            [array addObject:stepCell];
        }
        emitterLayer.emitterCells = array;
        [self.view.layer addSublayer:emitterLayer];
        _emitterLayer = emitterLayer;
    }
    return _emitterLayer;
}

接下来只要在在viewdidload 中简单的调用这个方法，就可以实现，粒子飘出的点赞效果了。
当然还有更复杂的实现，就是用路径去实现。单一的动画，然后每个点赞的图片也自己管理。

CAEmitterLayer参考
iOS动画参考

没什么好总结的，就是好玩。