先来一张实际效果的预览
2018-05-28 16_52_51.gif
实现这个效果只需要20多行代码哦
废话不多说,首先要画一个 layer
CAShapeLayer *processLayer = [CAShapeLayer layer];
[self.view.layer addSublayer:processLayer];
_processLayer = processLayer;
processLayer.frame = (CGRect){{self.view.bounds.size.width/2.0-100, self.view.bounds.size.height/2.0-100}, 200, 200};
processLayer.fillColor = [UIColor redColor].CGColor;
然后用CAKeyframeAnimation来做这个动画,keyFrame 的关键在于每帧的路径。这里的解决方法是用 for 循环来画每帧的扇形
(原理好像古人算圆周率的办法啊hhh)
NSInteger accuracy = 200;
NSMutableArray *pathArr = @[].mutableCopy;
CGFloat angle = 1.0/(CGFloat)(accuracy)*360.0;
CGFloat center = 100;
CGFloat radius = center;
for (NSInteger pos=0; pos<=accuracy; ++pos) {
UIBezierPath *toPath = [UIBezierPath bezierPath];
[toPath moveToPoint:CGPointMake(center, center)];
for (NSInteger curretnPos = 0; curretnPos<=pos; ++curretnPos) {
CGFloat radian = angle*(curretnPos - accuracy/4.0) / 180.0 * M_PI;
CGFloat x = center + radius * cos(radian);
CGFloat y = center + radius * sin(radian);
[toPath addLineToPoint:CGPointMake(x, y)];
}
[toPath closePath];
[pathArr addObject:toPath.CGPath];
}
其中accuracy是精度,越高的精度生成的曲线就更圆,也会产生更多的帧,动画就越流畅,这里精度为200,即200帧
由于cos(0)和 sin(0)对应的其实是圆的最右边,为了让圆从顶部开始画,这里需要减掉1/4pi的角度
看到两层 for 循环是不是很不爽,那就来改进一下,把里面那层 for 循环改成直接画圆算了
NSInteger accuracy = 100;
NSMutableArray *pathArr = @[].mutableCopy;
CGFloat angle = 1.0/(CGFloat)(accuracy)*360.0;
CGFloat radius = 100;
CGFloat startAngle = angle*(0 - accuracy/4.0)/ 180.0 * M_PI;
CGPoint centerPoint = CGPointMake(processLayer.bounds.size.width/2.0, processLayer.bounds.size.height/2.0);
for (NSInteger pos=0; pos<=accuracy; ++pos) {
UIBezierPath *toPath = [UIBezierPath bezierPath];
[toPath moveToPoint:centerPoint];
CGFloat endAngle = angle*(pos - accuracy/4.0)/ 180.0 * M_PI;
[toPath addArcWithCenter:centerPoint radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
[toPath closePath];
[pathArr addObject:toPath.CGPath];
}
最后就是把动画应用到processLayer上了
CAKeyframeAnimation *animate = [CAKeyframeAnimation animationWithKeyPath:@"path"];
animate.removedOnCompletion = NO;
animate.duration = 2;
animate.fillMode = kCAFillModeForwards;
animate.values = pathArr;
animate.calculationMode = kCAAnimationDiscrete;
[processLayer addAnimation:animate forKey:@"animate"];
完成
上面说到accuracy越高的精度生成的曲线就更圆。那么反过来想,精度低的时候不就是多边形了吗？比如把accuracy改成10，就能画出10边形（虽然结果动画非常地不流畅）
2018-05-28 17_19_10.gif
