抖音最近越来越火，是新媒体的代表，最新我研究了一下抖音点赞的动画效果，顺便也给大家分享一下。
like.gif
我们仔细观察会发现点赞的时候会发散出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;
}];
下面直接给上github地址：https://github.com/AlbinGit/Like.git
觉得还不错的同学麻烦在github上给颗星，谢谢！
