抖音最近越来越火，是新媒体的代表，最新我研究了一下抖音点赞的动画效果，顺便也给大家分享一下。
我们仔细观察会发现点赞的时候会发散出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_PI2 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 = _likeDuration0.8;
CABasicAnimation scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; scaleAnim.duration = _likeDuration0.8*0.8; scaleAnim.fromValue = @(0.0); scaleAnim.toValue = @(1.0);
CABasicAnimation widthStarAnim = [CABasicAnimation animationWithKeyPath:@"lineWidth"]; widthStarAnim.beginTime = 0; widthStarAnim.duration = _likeDuration0.8*0.8; widthStarAnim.fromValue = @(1); widthStarAnim.toValue = @(3);
CABasicAnimation widthEndAnim = [CABasicAnimation animationWithKeyPath:@"lineWidth"]; widthEndAnim.beginTime = _likeDuration0.80.8; widthEndAnim.duration = _likeDuration0.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上给颗星，谢谢！