最近在学习iOS的动画效果,做的一些小demo记录自己的学习过程,也和大家分享一下自己的做法，如果有不周到的地方请大神们不吝赐教。
今天给大家分享一下自己做的仿照抖音点赞的一个小动画。
一.效果展示
主要涉及了三个过程:烟花散开的过程、红心顺时针旋转出现、红线逆时针旋转缩小消失。
旋转和缩小是比较简单的过程（不能了解的小伙伴可以下载demo自行查看）,我们今天主要分析烟花散开的效果。
效果
二.效果分析
主要包含的技术:
1、CAShapeLayer和UIBezierPath 绘制。
2、CAAnimationGroup组合动画。
慢动画
仔细观察慢动画,发现主题是一个三角形,旋转60度绘制6个。
image
动画的过程大概是:
a.先缩放动画从0到1的过程 执行时间duration * 0.2
b.然后执行路径动画的起始点是原点（0，0）消失点在三角形的底边（width,0）开始时间是duration * 0.2，执行时长是duration * 0.8.
路径动画的执行过程大概是:
gif
三、结合代码分析
首先封装了一个UIView实现动画效果：YPGiveLikeButton。YPGiveLikeButton包含两个UIImageView实现图片显示和动画效果。具体可以参考demo,这里只介绍核心代码。
1.创建绘制三角形的layer
CAShapeLayer *layer = [CAShapeLayer layer];
layer.position = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);
layer.fillColor = [UIColor redColor].CGColor;
layer.strokeColor = [UIColor clearColor].CGColor;
layer.anchorPoint = CGPointMake(0.5, 0.5);
for循环创建6个这样的小三角
CGFloat length = 4;
CGFloat width = 30;
for (int i = 0; i < 6; i++) {
CAShapeLayer *layer = [CAShapeLayer layer];
layer.position = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);
layer.fillColor = [UIColor redColor].CGColor;
layer.strokeColor = [UIColor clearColor].CGColor;
//...代码块1
//...代码块2
//...代码块3
//...代码块4
}
创建6个layer实例,并利用贝塞尔曲线绘制小三角形。
在...代码块1位置加入
UIBezierPath *startPath = [UIBezierPath bezierPath];
[startPath moveToPoint:CGPointMake((- length) * 0.5, -width)];
[startPath addLineToPoint:CGPointMake((length) * 0.5, -width)];
[startPath addLineToPoint:CGPointMake(0, 0)];
[startPath addLineToPoint:CGPointMake((- length) * 0.5, -width)];
将贝塞尔曲线作为layer的path,通过旋转将6个小三角围绕layer的中心铺开。
在...代码块2位置加入
layer.path = startPath.CGPath;
layer.transform = CATransform3DMakeRotation(M_PI / 3.0f * i, 0.0, 0.0, 1.0);
[self.layer addSublayer:layer];
接着创建一个收缩的动画,开始时间是CACurrentMediaTime(),动画时长是duration * 0.2,设置动画是长是1s,那么伸缩动画就是0.2s.
在...代码3位置加入
//伸缩动画
CABasicAnimation *scralAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scralAnimation.fromValue = @(0.0);;
scralAnimation.toValue = @(1.0);
scralAnimation.duration = duration * 0.2;
接着创建一个小三角消失的动画,动画的开始时间是伸缩动画结束以后,也就是CACurrentMediaTime() + duration * 0.2,动画是时长是duration * 0.8.然后创建一个动画组，将伸缩动画和小三角的消失动画加入动画组中。
在...代码4位置加入
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
pathAnimation.fromValue = (__bridge id)layer.path;
pathAnimation.toValue = (__bridge id)endPath.CGPath;
pathAnimation.beginTime = duration * 0.2;
pathAnimation.duration = duration * 0.8;
CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
groupAnimation.animations = @[pathAnimation,scralAnimation];
groupAnimation.fillMode = kCAFillModeForwards;
groupAnimation.duration = duration;
groupAnimation.removedOnCompletion = NO;//完成后是否移除
groupAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
groupAnimation.delegate = self;
[layer addAnimation:groupAnimation forKey:@"groupAnimation"];
设置了groupAnimation.delegate = self;在动画结束的时候将加载self.layer上的6个layer清除掉，避免用户反复点赞造成sublayer过多。
到此烟花散开的动画就结束了。除此之外，点赞的时候还可以加上一个给❤️旋转的动画:
旋转动画结束前,禁用选中的点击事件，防止动画结束前用户多次点击。动画结束以后将点击事件放开。
self.selected = YES;
self.afterImageView.userInteractionEnabled = NO;
CAKeyframeAnimation *rotateAnima = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
rotateAnima.values = @[@0.0, @(M_PI * 0.15), @(0.0)];
rotateAnima.duration = duration * 0.5;
rotateAnima.repeatCount = 1;
rotateAnima.beginTime = CACurrentMediaTime();
rotateAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
rotateAnima.delegate = self;
[self.afterImageView.layer addAnimation:rotateAnima forKey:@"rotationAnimation"];
注意：取消点赞的动画，是用了UIView的动画代码如下：
self.beforeImageView.hidden = NO;
[UIView animateWithDuration:0.35f delay:0.0f options:UIViewAnimationOptionCurveEaseIn animations:^{
self.afterImageView.transform = CGAffineTransformScale(CGAffineTransformMakeRotation(-M_PI_4), 0.1f, 0.1f);
}completion:^(BOOL finished) {
self.selected = NO;
self.afterImageView.transform = CGAffineTransformMakeScale(1.0f, 1.0f);
}];
四、总结
以上是模仿抖音点赞动画、取消点赞动画的核心代码。如果需要demo可以去demo地址
网友评论