抖音点赞源码系统软件开发解析

抖音最近越来越火，走到哪里无时不刻都能看到有人在刷抖音，是新媒体的代表，最新我研究了一下抖音点赞的动画效果，顺便也给大家分享一下。

我们仔细观察会发现点赞的时候会发散出6个红色的三角形，所以我们可以利用贝斯阿尔曲线画出来，直接上代码：

CAShapeLayer *layer=[[CAShapeLayer alloc]init];

layer.position=_likeBefore.center;

layer.fillColor=[UIColor redColor].CGColor;

UIBezierPath *startPath=[UIBezierPath bezierPath];

[startPath moveToPoint:CGPointMake(-2, -30)];

[startPath addLineToPoint:CGPointMake(2, -30)];

[startPath addLineToPoint:CGPointMake(0, 0)];

layer.path=startPath.CGPath;

[self.layer addSublayer:layer];

然后我们再给这个三角形添加动画，一个缩放动画从无到有，一个路径动画从有变没，然后把这两个动画加入到组动画：

CAAnimationGroup *group=[[CAAnimationGroup alloc] init];

group.removedOnCompletion=NO;

group.timingFunction=[CAmediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

group.fillMode=kCAFillModeForwards;

group.duration=0.5;

CABasicAnimation *scaleAnim=[CABasicAnimation animationWithKeyPath:@"transform.scale"];

scaleAnim.fromValue=@(0.0);

scaleAnim.toValue=@(1.0);

scaleAnim.duration=0.5 * 0.2f;

UIBezierPath *endPath=[UIBezierPath bezierPath];

[endPath moveToPoint:CGPointMake(-2, -length)];

[endPath addLineToPoint:CGPointMake(2, -length)];

[endPath addLineToPoint:CGPointMake(0, -length)];

CABasicAnimation *pathAnim=[CABasicAnimation animationWithKeyPath:@"path"];

pathAnim.fromValue=(__brIDge id)layer.path;

pathAnim.toValue=(__bridge id)endPath.CGPath;

pathAnim.beginTime=0.5 * 0.2f;

pathAnim.duration=0.5 * 0.8f;

[group setAnimations:@[scaleAnim, pathAnim]];

[layer addAnimation:group forKey:nil];

这样一个三角形的完整的动画就完成了，然后我们利用for循环创建6个即可。

然后还有波纹慢慢扩大至心型图片圆周，再慢慢消失：

//创建背景

CAShapeLayer *layer=[[CAShapeLayer alloc] init];

layer.position=_likeBefore.center;

layer.fillColor=[UIColor clearColor].CGColor;

layer.strokeColor=_zanFillColor?_zanFillColor.CGColor:[UIColor redColor].CGColor;

layer.lineWidth=1;

//设置笔画路径

UIBezierPath *bPath=[UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0) radius:_length startAngle:-M_PI_2 endAngle:-M_PI_2+M_PI*2 clockwise:YES];

layer.path=bPath.CGPath;

[self.layer addSublayer:layer];

//使用动画组来解决圆圈从小到大 --> 消失

CAAnimationGroup *group=[CAAnimationGroup animation];

group.removedOnCompletion=NO;

group.fillMode=kCAFillModeForwards;//必须-->group.removedOnCompletion=NO;才生效

group.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

group.duration=_likeDuration*0.8;

CABasicAnimation *scaleAnim=[CABasicAnimation animationWithKeyPath:@"transform.scale"];

scaleAnim.duration=_likeDuration*0.8*0.8;

scaleAnim.fromValue=@(0.0);

scaleAnim.toValue=@(1.0);

CABasicAnimation *widthStarAnim=[CABasicAnimation animationWithKeyPath:@"lineWidth"];

widthStarAnim.beginTime=0;

widthStarAnim.duration=_likeDuration*0.8*0.8;

widthStarAnim.fromValue=@(1);

widthStarAnim.toValue=@(3);

CABasicAnimation *widthendAnim=[CABasicAnimation animationWithKeyPath:@"lineWidth"];

widthEndAnim.beginTime=_likeDuration*0.8*0.8;

widthEndAnim.duration=_likeDuration*0.8*0.2;

widthEndAnim.fromValue=@(3);

widthEndAnim.toValue=@(0);

[group setAnimations:@[scaleAnim,widthStarAnim,widthEndAnim]];

[layer addAnimation:group forKey:nil];

然后我们可以再加上一些点赞完成后红心旋转的细节处理：

_likeAfter.transform=CGAffineTransformScale(CGAffineTransformMakeRotation(-M_PI/3*2), 0.5f, 0.5f);

[UIView animateWithDuration:0.4f

delay:0.2f

usingSpringWithDamping:0.6f

initialSpringVelocity:0.8f

options:UIViewAnimationOptionCurveEaseIn

animations:^{

self.likeBefore.alpha=0.0f;

self.likeAfter.alpha=1.0f;

self.likeAfter.transform=CGAffineTransformScale(CGAffineTransformMakeRotation(0), 1.0f, 1.0f);

}

completion:^(BOOL finished) {

self.likeBefore.alpha=1.0f;

self.likeBefore.userInteractionEnabled=YES;

self.likeAfter.userInteractionEnabled=YES;

}];

取消点赞动画就是一个旋转加缩放动画:

_likeAfter.alpha=1.0f;

_likeAfter.transform=CGAffineTransformScale(CGAffineTransformMakeRotation(0), 1.0f, 1.0f);

[UIView animateWithDuration:0.35f

delay:0.0f

options:UIViewAnimationOptionCurveEaseIn

animations:^{

self.likeAfter.transform=CGAffineTransformScale(CGAffineTransformMakeRotation(-M_PI_4), 0.1f, 0.1f);

}

completion:^(BOOL finished) {

[self.likeAfter setHidden:YES];

self.likeBefore.userInteractionEnabled=YES;

self.likeAfter.userInteractionEnabled=YES;

}];

今天小编到这里就结束啦，喜欢者可点个赞关注谢谢，有兴趣可关注小编的一点号。