为了达到好的用户体验,让用户在使用 App 交互的时候或者等待的时候视觉上有所冲击,达到好的用户体验,许多 App 都使用了各式各样的动画,动画的实现也无疑是开发者所必备的技能之一。
实现 iOS 中动画我们要了解三个类,分别是CABasicAnimation、UIBezierPath 与 CAShapeLayer。简单说一下它们各自的功能,或许我们都知道,在 UI 界面层中有一个 layer 的层级,这个 layer 展示的是我们界面上的各个所需要绘制的画面,而我们的 UIView 实际上就是对 Layer 层的一个封装,在图形的展示基础上增加了交互事件处理。而所有对画面的操作实际都是来自 Layer 层,我们可以设置圆角(cornerradius)、边框(borderWidth) 等常用的属性。所以动画的绘画过程实际上就是展示变换图形的过程,这就自然而然的引出了相应的 Layer 层。 CAShapeLayer 继承自 CALayer,通过 CAShapeLayer 我们可以绘制自己想要的图形,而 UIBezierPath 就是我们经常说的贝塞尔曲线,通过设置相应的参数,我们可以绘制出各式各样的图形来。
说了那么多,其实 CAShapeLayer 就是一个画笔,而 UIBezierPath 实际上就是要画笔所要画的路径,通过路径将图形绘制出来,而 CABasicAnimation 是来控制绘画速度以及过程。他们三者紧密相关,不可分割。为了便于理解,就以进度条的案例来进行说明吧!
/**
* 创建 shapLayer
*
* @return layer 实例
*/
- (CAShapeLayer *)creatCycleView{
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
//storkeWidth 的宽度的中点位于半径的轨迹上,绘制的时候由轨迹路线内外扩展绘制,
//所以真是绘制长度为真实长度减去轨迹长度的一半
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0) radius:_radius ? _radius - _cycleWidth * 0.5 : _radius startAngle:0 endAngle:M_PI * 2 clockwise:YES];
layer.lineWidth = _cycleWidth ? _cycleWidth : DEFAULT_STORKE_WIDTH;
layer.path = [path CGPath];
return layer;
}
/**
* 创建圆环背景
*/
- (void)creatView{
//背景色
self.backgroundColor = [UIColor blackColor];
self.layer.cornerRadius = 6;
CAShapeLayer *backLayer = [self creatCycleView];
backLayer.strokeColor = _progressColor ? [_progressColor CGColor] : [[UIColor colorWithRed:59/255.0 green:59/255.0 blue:59/255.0 alpha:1]CGColor];
backLayer.fillColor = _progressBgColor ? [_progressBgColor CGColor] : [[UIColor clearColor]CGColor];
backShapeLayer = backLayer;
[self.layer addSublayer:backLayer];
CAShapeLayer *foreLayer = [self creatCycleView];
foreLayer.strokeColor = _progressColor ? [_progressColor CGColor] : [[UIColor whiteColor]CGColor];
foreLayer.fillColor = [[UIColor clearColor]CGColor];
foreLayer.strokeStart = 0;
foreLayer.strokeEnd = 0.3;
foreLayer.cornerRadius = 2;
//绘制线条的风格
if (self.cycleWidth != self.radius) {
foreLayer.lineCap = kCALineCapRound;
}
foreShapeLayer = foreLayer;
[self.layer addSublayer:foreLayer];
}
通过 setter 方法设置进度条的进度:
- (void)setProgressValue:(float)progressValue{
_progressValue = progressValue;
foreShapeLayer.strokeEnd = progressValue;
//加载完成以后的回调
if (self.loadSuccessBlock && progressValue == 1) {
self.loadSuccessBlock(self);
}
}
而为了让绘制的过程更为清晰,我们设置了进度条的动画,代码如下:
/*
*添加动画
*/
- (void)drawCycle{
//创建动画实例
CABasicAnimation *drawCycleAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawCycleAnimation.duration = DRAW_AIMATION_TIME;
drawCycleAnimation.repeatCount = 1;
drawCycleAnimation.delegate = self;
//设置动画内容的起始值与结束值
drawCycleAnimation.fromValue = [NSNumber numberWithFloat:0.3];
drawCycleAnimation.toValue = [NSNumber numberWithFloat:1.0];
//动画时间速度
drawCycleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[foreShapeLayer addAnimation:drawCycleAnimation forKey:@"drawCircleAnimation"];
//创建缩放动画
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
basicAnimation.duration = DRAW_AIMATION_TIME;
basicAnimation.repeatCount = 1;
basicAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
CATransform3D startTransForm = CATransform3DMakeScale(0, 0, 1);
CATransform3D endTransForm = CATransform3DMakeRotation(0, 0, 0, 1);
basicAnimation.fromValue = [NSValue valueWithCATransform3D:startTransForm];
basicAnimation.toValue = [NSValue valueWithCATransform3D:endTransForm];
[foreShapeLayer addAnimation:basicAnimation forKey:@"startTransform"];
}
最终的效果如下:
怎么样,是不是很有意思呢?感兴趣的童鞋具体 demo 详见 Git:
https://github.com/lccdl/LCCRepository/tree/master/LCProgressDemo