效果

如圖，按鈕的邊緣慢慢顯示出來，一個(gè)view 繞著轉(zhuǎn)動(dòng)。

實(shí)現(xiàn)過程，一個(gè) CALayer 是 繞著轉(zhuǎn)動(dòng)的那個(gè)view. 一個(gè) 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 和 邊框 下面是動(dòng)畫過程

/// 轉(zhuǎn)圈動(dòng)畫示例 添加動(dòng)畫
        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"];

直播點(diǎn)贊效果實(shí)現(xiàn)如下圖

點(diǎn)贊動(dòng)畫

右下角飄出的數(shù)字動(dòng)畫就是點(diǎn)贊的效果，如果把數(shù)字換成點(diǎn)贊的拇指就一切OK了，

這個(gè)實(shí)現(xiàn)版本比較簡單，使用<code> CAEmitterLayer </code>蘋果自帶的粒子效果。就足以實(shí)現(xiàn)了。代碼如下：<code>viewController</code>中加入如下屬性

///粒子效果Cell
@property(nullable, copy) NSArray<CAEmitterCell *> *emitterCells;
//例子的發(fā)射位置
@property CGPoint emitterPosition;
// Z position
@property CGFloat emitterZPosition;
//每秒產(chǎn)生多少個(gè)粒子
@property float birthRate;
//聲明時(shí)間 一個(gè)粒子可以存活多少秒 比如 設(shè)置為 3??！
@property float lifetime;
//聲明時(shí)間范圍 你可以用這個(gè)東西使粒子的lifetime產(chǎn)生少許變化。粒子系統(tǒng)會(huì)隨機(jī)在這個(gè)區(qū)間中取一個(gè)lifetime出來(lifetime – lifetimeRange, lifetime + lifetimeRange) 在我們的程序中，粒子會(huì)存活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;

實(shí)現(xiàn)如下：

- (CAEmitterLayer *)emitterLayer
{
    if (!_emitterLayer) {
        CAEmitterLayer *emitterLayer = [CAEmitterLayer layer];
        // 發(fā)射器在xy平面的中心位置
        emitterLayer.emitterPosition = CGPointMake(self.view.frame.size.width-50,self.view.frame.size.height-50);
        // 發(fā)射器的尺寸大小
        emitterLayer.emitterSize = CGSizeMake(20, 20);
        // 渲染模式
        emitterLayer.renderMode = kCAEmitterLayerUnordered;
        // 開啟三維效果
        _emitterLayer.preservesDepth = YES;
        NSMutableArray *array = [NSMutableArray array];
        // 創(chuàng)建粒子
        for (int i = 1; i<10; i++) {
            // 發(fā)射單元
            CAEmitterCell *stepCell = [CAEmitterCell emitterCell];
            // 粒子的創(chuàng)建速率，默認(rèn)為1/s
            stepCell.birthRate = 1;
            // 粒子存活時(shí)間
            stepCell.lifetime = arc4random_uniform(4) + 1;
            // 粒子的生存時(shí)間容差
            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]];
            // 粒子顯示的內(nèi)容
            stepCell.contents = (id)[image CGImage];
            // 粒子的名字
            //            [fire setName:@"step%d", i];
            // 粒子的運(yùn)動(dòng)速度
            stepCell.velocity = arc4random_uniform(100) + 100;
            // 粒子速度的容差
            stepCell.velocityRange = 80;
            // 粒子在xy平面的發(fā)射角度
            stepCell.emissionLongitude = M_PI+M_PI_2;;
            // 粒子發(fā)射角度的容差
            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 中簡單的調(diào)用這個(gè)方法，就可以實(shí)現(xiàn)，粒子飄出的點(diǎn)贊效果了。
當(dāng)然還有更復(fù)雜的實(shí)現(xiàn)，就是用路徑去實(shí)現(xiàn)。單一的動(dòng)畫，然后每個(gè)點(diǎn)贊的圖片也自己管理。

CAEmitterLayer參考
iOS動(dòng)畫參考

沒什么好總結(jié)的，就是好玩。