轨迹漂浮动画--点赞动画

研究了个点赞动画，利用的技术有CAShapeLayer，UIBezierPath及核心动画。下面讲解怎么实现它。

绘制出❤️的形状，所以用到CAShapeLayer和UIBezierPath配合。首先自定义一个LikeAnimationLayer继承自CAShapeLayer。然后利用贝瑟尔曲线绘制出❤️。

#import 
#import 

@interface LikeAnimationLayer : CAShapeLayer

- (instancetype)initWithSuperView:(UIView *)superView;

/**
给layer添加动画
*/
- (void)addAnimation;

@end

- (instancetype)initWithSuperView:(UIView *)superView
{
    self = [super init];
    if (self) {
        
        self.backgroundColor = [UIColor clearColor].CGColor;
        self.bounds = CGRectMake(0, 0, 40, 40);
        self.anchorPoint = CGPointMake(0.5, 1);
        //画路径，❤️
        self.path = [self likePath];
        self.strokeColor = [UIColor whiteColor].CGColor;
        self.lineWidth = 1.0;
        self.fillColor = [UIColor colorWithRed:(arc4random_uniform(256))/255.0 green:(arc4random_uniform(256))/255.0 blue:(arc4random_uniform(256))/255.0 alpha:1].CGColor;
       self.superView = superView;
     
       
        
    }
    return self;
}

- (CGPathRef)likePath
{
    //心距离边缘的距离
    CGFloat drawingPadding = 2.0;
    //向下取整floor
    CGFloat curveRadius = floor((kWidth - 2*drawingPadding) / 4.0);
    UIBezierPath *path = [UIBezierPath bezierPath];
    //最下面的点（20，38）
     CGPoint tipLocation = CGPointMake(floor(kWidth / 2.0), kHeight - drawingPadding);
    [path moveToPoint:tipLocation];
    //左上的点（2，13）
    CGPoint topLeftCurveStart = CGPointMake(drawingPadding, floor(kHeight / 3));
    //画二元曲线左边的心的曲线
    [path addQuadCurveToPoint:topLeftCurveStart controlPoint:CGPointMake(topLeftCurveStart.x, topLeftCurveStart.y + curveRadius)];
    //画左边上面的半圆
    [path addArcWithCenter:CGPointMake(topLeftCurveStart.x + curveRadius, topLeftCurveStart.y) radius:curveRadius startAngle:M_PI endAngle:0 clockwise:YES];
    //右边的半圆
    CGPoint topRightCurveStart = CGPointMake(topLeftCurveStart.x + 2*curveRadius, topLeftCurveStart.y);
    [path addArcWithCenter:CGPointMake(topRightCurveStart.x + curveRadius, topRightCurveStart.y) radius:curveRadius startAngle:M_PI endAngle:0 clockwise:YES];
    //画二元曲线右边的心的曲线
    CGPoint topRightCurveEnd = CGPointMake(topLeftCurveStart.x + 4*curveRadius, topRightCurveStart.y);
    [path addQuadCurveToPoint:tipLocation controlPoint:CGPointMake(topRightCurveEnd.x, topRightCurveEnd.y + curveRadius)];
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineCapRound;

    return path.CGPath;
}

为这个❤️添加上动画。动画分为两个动画组。第一个动画组是将layer的scale从0到1，并且改变它的透明度从0到1。利用了iOS7出来的弹簧动画CASpringAnimation。接着就是layer沿着一个随机的轨迹从一个点移动到另一个点，我是从屏幕下方移动到屏幕上方。利用三次贝塞尔曲线，实现layer的运动轨迹。

- (void)addAnimation
{
    
    CASpringAnimation *springAnimal = [CASpringAnimation animationWithKeyPath:@"transform.scale"];
    springAnimal.fromValue = @(0);
    springAnimal.toValue = @(1.0);
    //质量，影响图层运动时的弹簧惯性，质量越大，弹簧拉伸和压缩的幅度越大默认是1 必须大于0
//    若你设置的值小于0  会有CoreAnimation: mass must be greater than 0.这个信息提示你
//    并且把你的小于0的值改成1
//    对象质量 质量越大 弹性越大 需要的动画时间越长
    springAnimal.mass = 1.0;
//    必须大于0  默认是100
//    若设置的小于0 会给你一个提示 并把值改成100
//    刚度系数，刚度系数越大，产生形变的力就越大，运动越快。
    springAnimal.stiffness = 90;
//    默认是10 必须大于或者等于0
//    若设置的小于0 会给你一个提示 并把值改成10
//    阻尼系数 阻止弹簧伸缩的系数 阻尼系数越大，停止越快。时间越短
     springAnimal.damping = 10;
//    默认是0
//    初始速度，正负代表方向，数值代表大小
     springAnimal.initialVelocity = 2;
//    计算从开始到结束的动画的时间，根据当前的参数估算时间
//    只读的，不能赋值
     springAnimal.duration = springAnimal.settlingDuration;
    
    
    CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    alphaAnimation.fromValue = @0;
    alphaAnimation.toValue = @1;
    
    CAAnimationGroup *Scalegroup = [CAAnimationGroup animation];
    Scalegroup.animations = @[springAnimal,alphaAnimation];
    Scalegroup.duration = 0.5;
    Scalegroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    
    [self addAnimation:Scalegroup forKey:@"scaleAndalphaAnimation"];
    

    // 随机数（0，1）
    NSInteger i = arc4random_uniform(2);
    //移动的方向(-1 ,1)
    NSInteger moveDirection = 1 - (2*i);
    
    // 绘制路径
    UIBezierPath *heartTravelPath = [UIBezierPath bezierPath];
    //先移动到心的中心点这是起点
    [heartTravelPath moveToPoint:self.position];
    
    CGPoint endPoint = CGPointMake(self.position.x + (moveDirection) * arc4random_uniform(kWidth), self.superView.frame.size.height/6.0 + arc4random_uniform(self.superView.frame.size.height/4.0));
    
    CGFloat x = (kWidth/2.0 + arc4random_uniform(kWidth)) * moveDirection;
    CGFloat y = MAX(endPoint.y ,MAX(arc4random_uniform(8*kWidth), kWidth));
    //两个控点
    CGPoint controlPoint1 = CGPointMake(self.position.x + x, self.superView.frame.size.height - y);
    CGPoint controlPoint2 = CGPointMake(self.position.x - 2*x, y);
    
    [heartTravelPath addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
    
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    keyFrameAnimation.path = heartTravelPath.CGPath;
    keyFrameAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    
    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.fromValue = @1;
    opacityAnimation.toValue = @0;
    
    CAAnimationGroup *positionGroup = [CAAnimationGroup animation];
    positionGroup.animations = @[keyFrameAnimation,opacityAnimation];
    positionGroup.duration = liveAnimationDuration + endPoint.y/self.superView.frame.size.height;
    positionGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    positionGroup.delegate = self;
    //如果不加这句[self animationForKey:@"ani1"]是nil
    positionGroup.removedOnCompletion = NO;
    positionGroup.fillMode = kCAFillModeForwards;
    //kvc记录layer的值方便在代理方法里移除
    [positionGroup setValue:self forKey:@"likeLayer"];
    [self addAnimation:positionGroup forKey:@"positionGroup"];
    
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    
    if ([self animationForKey:@"positionGroup"] == anim) {
       
        CALayer *layer = [anim valueForKey:@"likeLayer"];
        if (layer) {
            [layer removeFromSuperlayer];
        }
    }
}

SUNLiveAnimation.gif

demo地址

https://github.com/yinbowang/LikeAnimal