类似直播app点赞动画分析

这是映客app点赞动画效果，如图

                                                                                

    动画分析

    当我们触摸屏幕的时候，会在右下方有心型的图案并且不断向上。这是直接看到的部分，仔细分析，我们可以分为以下部分。

    1、当点击时，心形图案从无到有弹出动画。

    2、心形图案沿着不规则路径从下往上运动，直至消失，并且通过仔细观察我们可以认为运动轨迹基本按照S形路径运动。

    所以，在操作的时候，我们按照一跟二的动画效果完成点赞效果。

    3、结合1、2的动画效果，我们需要做时间与位置的控制。

    技术分析

    1、对于分析中心形图案弹出动画，我们可以用阻尼动画，Spring动画做设置。

    2、心形动画的路径我们可以利用UIBezierPath绘制，我们利用arc4random_uniform(2)生产随机数的方法，生产绘制S形曲线所需的两个点。利用CAKeyframeAnimation动画，可以设置CALayer的起始点，中间关键点，终点的frame。时间，动画会沿着设定的轨迹执行。

    3、心形动画消失，UIView animateWithDuration:time aniamtions:^{}方法，改时间应该小于CAKeyframeAnimation设定的动画运动时间，突出不规则运功。

 

   基本代码实现

     NSTimeInterval totalAnimationDuration = 6;
    CGFloat heartSize = CGRectGetWidth(self.bounds);
    CGFloat heartCenterX = self.center.x;
    CGFloat viewHeight = CGRectGetHeight(view.bounds);
    
    //Pre-Animation setup
    self.transform = CGAffineTransformMakeScale(0, 0);
    self.alpha = 0;

     //心形弹出阻尼动画
    [UIView animateWithDuration:0.5 delay:0.0 usingSpringWithDamping:0.6 initialSpringVelocity:0.8 options:UIViewAnimationOptionCurveEaseOut animations:^{
        self.transform = CGAffineTransformIdentity; //重置  开始弹出
        self.alpha = 0.9;
    } completion:NULL];
   //生成随机数
    NSInteger i = arc4random_uniform(2);  //随机数
    NSInteger rotationDirection = 1- (2*i);// -1 OR 1
    NSInteger rotationFraction = arc4random_uniform(10);
    [UIView animateWithDuration:totalAnimationDuration animations:^{
        self.transform = CGAffineTransformMakeRotation(rotationDirection * PI/(16 + rotationFraction*0.2));
    } completion:NULL];
    //画S形曲线
    UIBezierPath *heartTravelPath = [UIBezierPath bezierPath];
    [heartTravelPath moveToPoint:self.center];
    
    //r随机的终点
    CGPoint endPoint = CGPointMake(heartCenterX + (rotationDirection) * arc4random_uniform(2*heartSize), viewHeight/6.0 + arc4random_uniform(viewHeight/4.0));
    
    //random Control Points 随机控制点
    NSInteger j = arc4random_uniform(2);
    NSInteger travelDirection = 1- (2*j);// -1 OR 1
    
    //随机的X和Y为控制点
    CGFloat xDelta = (heartSize/2.0 + arc4random_uniform(2*heartSize)) * travelDirection;
    CGFloat yDelta = MAX(endPoint.y ,MAX(arc4random_uniform(8*heartSize), heartSize));
    CGPoint controlPoint1 = CGPointMake(heartCenterX + xDelta, viewHeight - yDelta);
    CGPoint controlPoint2 = CGPointMake(heartCenterX - 2*xDelta, yDelta);
    
    //方法 Bezier曲线的定义
    [heartTravelPath addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
    //Keyframe顾名思义就是关键点的frame，你可以通过设定CALayer的始点、中间关键点、终点的frame，时间，动画会沿你设定的轨迹执行。
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    keyFrameAnimation.path = heartTravelPath.CGPath;
    keyFrameAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    keyFrameAnimation.duration = totalAnimationDuration + endPoint.y/viewHeight; //大于消失的时间。
    [self.layer addAnimation:keyFrameAnimation forKey:@"positionOnPath"];
    
    //图案消失
    [UIView animateWithDuration:totalAnimationDuration animations:^{
        self.alpha = 0.0;
    } completion:^(BOOL finished) {
        [self removeFromSuperview];
    }];

   Demo 链接 http://www.code4app.com/forum.php?mod=viewthread&tid=8394&extra=page%3D4%26filter%3Dsortid%26sortid%3D1

    基本点就是，阻尼动画，随机点确定贝塞尔曲线，动画沿着贝塞尔曲线执行，最后渐变消失。