抖音最近越来越火，走到哪里无时不刻都能看到有人在刷抖音，是新媒体的代表，最新我研究了一下抖音点赞的动画效果，顺便也给大家分享一下。
我们仔细观察会发现点赞的时候会发散出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;
}];
今天小编到这里就结束啦，喜欢者可点个赞关注谢谢，有兴趣可关注小编的一点号。
