网络编程

当前位置:永利402游戏网站-永利402com官方网站 > 网络编程 > iOS基础:上手CAShapeLayer,动画其实并不难

iOS基础:上手CAShapeLayer,动画其实并不难

来源:http://www.xtcsyb.com 作者:永利402游戏网站-永利402com官方网站 时间:2019-09-11 14:45

图片 1自定义提醒控件AlertView.png

当你看到精彩的动画时,你会不会和我一样,立马想这个效果该如何如何实现呢?然后想着想着,又觉得很难实现,然后挠挠头表示做不出来呢?如果是这样,那这篇文章也许可以帮到你哦。

本文是文章上手CAShapeLayer,动画其实并不难 的实战,用到的知识有CAShapeLayer、UIBezierPath和CABasicAnimation。如果对这些类不大了解,可先去基础篇看看。

图片 2纲要.png

一、效果展示

图片 3load.gif图片 4success.gif图片 5error.gif

1.CAShapeLayer

CAShapeLayer这个类是这篇文章的主角,继承于CALayer。CAShapeLayer的形状是由其path(类型为CGPathRef)属性指定的。CAShapeLayer动画渲染直接提交到手机的GPU当中,相较于view的drawRect方法使用CPU渲染而言,其效率极高,能大大优化内存使用情况。也就是说:当你需要绘制图层的时候,不再需要重写自定义view的drawRect方法了。至于他的使用方法,下面会介绍。

二、思路讲解

既然要封装起来,那么肯定是想要用起来越方便越好。所以首先,我的思路是创建一个UIViewController的拓展类,在拓展类里写方法。比如当需要提示成功时,直接[self showSuccessAlertView];就可以。然后控件的初始化以及属性设置都放在- showSuccessAlert;里面了。其次,想到这个控件整个项目中都要用,所以可以用单例模式,这样可以节省不必要的性能消耗。再者,考虑到由于不同内容的显示,AlertView中layer的路径也会不一样。我便创建了三个继承CAShapeLayer的layer。分别为YQErrorLayerYQLoadingLayerYQSuccessLayer。然后可在AlertView中控制layer的使用。因为这三个很类似,所以干脆再创一个继承CAShapeLayer的layer:YQShapeLayer,再把上面三个layer继承自YQShapeLayer。这样一来有个好处,就是他们一样的方法可以写到父类中。方便管理。如果感觉有点乱,关系如下图:

图片 6Layer关系图.png

2.UIBezierPath

UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装。所以说两者本质是相似,只是UIBezierPath更加好用。所以今天就来学习这个类。前面有提到,CAShapeLayer的形状是由path决定的。所以可以想到,需要使用这个类来设置路径,然后把这个路径给CAShapeLayer,这样图层就算绘制好了。

三、开始代码

// .h文件@interface UIViewController (YQAlertView)- showLoadingAlert;- showLoadingAlertWithMessage:(NSString *)message;- showErrorAlert;- showErrorAlertWithMessage:(NSString *)message;- showSuccessAlert;- showSuccessAlertWithMessage:(NSString *)message;- dismissAlert;@end

对应的,.m文件中写好上述方法的实现。不管别的,至少现在vc可以直接[self showSuccessAlertView];了。

创建一个继承自UIView的AlertView,在拓展类的.m文件中初始化AlertView。直接上代码:

+ (instancetype)shareAlertView{ static YQAlertView *handle = nil; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ handle = [[YQAlertView alloc] init]; }); return handle;}- (instancetype)init{ if (self = [super init]) { [self initView]; } return self;}- initView{ //省略了控件创建的代码 //一些不变的控件都在这里创建,比如背景view,提醒label等}

设置一些AlertView的属性,可以在初始化AlertView后设置这些属性。以下两个是必要的,其他的可以随自己爱好添加。

@property (nonatomic, assign) YQAlertViewType type;@property (nonatomic, copy) NSString *message;

上述的YQAlertViewType:

typedef enum { YQAlertViewTypeSuccess, YQAlertViewTypeError, YQAlertViewTypeLoading} YQAlertViewType;

然后写一个设置上述属性的方法:

- setAlertViewType:(YQAlertViewType)type message:(NSString *)message;

到这里,可以在vc拓展类中初始化AlertView和设置属性啦。以成功为例子:

- showSuccessAlert{ [self showSuccessAlertWithMessage:nil];}- showSuccessAlertWithMessage:(NSString *)message{ YQAlertView *alert = [YQAlertView shareAlertView]; [alert setAlertViewType:YQAlertViewTypeSuccess message:message]; [self.view addSubview:alert];}

效果如下:

图片 7未完成的提醒框.png

上面的效果图看来,现在还缺少layer以及动画。按照思路里说的,创建4个layer。在layer中,写一个初始化方法,在其中设置属性以及添加子layer。同样已成功举例子:

图片 8成功layer.png

它由外圈和内钩组成。所以代码如下:

- (instancetype)initWithFrame:frame strokeColor:(UIColor *)color{ if (self = [super init]) { self.backgroundColor = [UIColor clearColor].CGColor; self.color = color; self.frame = frame; [self configShape]; } return self;}- configShape{ _circleLayer = [[CAShapeLayer alloc] init]; _circleLayer.frame = self.bounds; _circleLayer.path = [UIBezierPath bezierPathWithOvalInRect:self.bounds].CGPath; _circleLayer.strokeStart = 1; _circleLayer.lineWidth = 3; _circleLayer.strokeColor = self.color.CGColor; _circleLayer.fillColor = [UIColor clearColor].CGColor; [_circleLayer setValue:@ forKeyPath:@"transform.rotation.z"]; [self addSublayer:_circleLayer]; _successLayer = [[CAShapeLayer alloc] init]; _successLayer.frame = CGRectMake(self.frame.size.width*0.15, self.frame.size.height*0.15, self.frame.size.width*0.7, self.frame.size.width*0.7); _successLayer.path = [self successLayerPath].CGPath; _successLayer.strokeEnd = 0; _successLayer.lineWidth = 5; _successLayer.strokeColor = self.color.CGColor; _successLayer.fillColor = [UIColor clearColor].CGColor; _successLayer.lineCap = kCALineCapRound; _successLayer.lineJoin = kCALineJoinRound; [self addSublayer:_successLayer];}- (UIBezierPath *)successLayerPath{ // 中点为0.35 0.35 UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(self.frame.size.width*0.09, self.frame.size.width*0.37)]; [path addLineToPoint:CGPointMake(self.frame.size.width*0.29, self.frame.size.width*0.57)]; [path addLineToPoint:CGPointMake(self.frame.size.width*0.64, self.frame.size.width*0.22)]; return path;}

因为需要动画,所以我把圆的strokeStart设置为1,钩的strokeEnd设置为0。当执行动画的时候,改变strokeStart或者strokeEnd的值,便出现了绘制的动画了。开始动画代码:

- startAni{ CABasicAnimation *circleAni = [CABasicAnimation animationWithKeyPath:@"strokeStart"]; circleAni.toValue = @; circleAni.duration = 1; circleAni.removedOnCompletion = NO; circleAni.fillMode = kCAFillModeForwards; circleAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; [_circleLayer addAnimation:circleAni forKey:@"circleAni"]; CABasicAnimation *successAni = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; successAni.toValue = @; successAni.duration = 1; successAni.removedOnCompletion = NO; successAni.fillMode = kCAFillModeForwards; successAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; [_successLayer addAnimation:successAni forKey:@"successAni"];}

这里有一点需要注意,- startAni;``- (instancetype)initWithFrame:frame strokeColor:(UIColor *)color;两个方法在三个layer中都有,所以可在父类中声明。

由于需要知道该AlertView属于哪个类型才能初始化哪个layer类。所以我把layer的初始化放在了- setAlertViewType:(YQAlertViewType)type message:(NSString *)message;中。代码如下:

- setAlertViewType:(YQAlertViewType)type message:(NSString *)message{ self.type = type; self.message = message; self.alpha = 1; CGRect layerRect = CGRectZero; if  { layerRect = CGRectMake(60, 20, 80, 80); self.messageLabel.text = message; } else { layerRect = CGRectMake(60, 30, 80, 80); } if (_aniLayer) { [_aniLayer removeFromSuperlayer]; _aniLayer = nil; } switch  { case YQAlertViewTypeError: _aniLayer = [[YQErrorLayer alloc] initWithFrame:layerRect strokeColor:[UIColor colorWithRed:0.0431 green:0.7569 blue:0.9412 alpha:1.0]]; break; case YQAlertViewTypeSuccess: _aniLayer = [[YQSuccessLayer alloc] initWithFrame:layerRect strokeColor:[UIColor colorWithRed:0.0431 green:0.7569 blue:0.9412 alpha:1.0]]; break; default: _aniLayer = [[YQLoadingLayer alloc] initWithFrame:layerRect strokeColor:[UIColor colorWithRed:0.0431 green:0.7569 blue:0.9412 alpha:1.0]]; break; } [self.alertView.layer addSublayer:_aniLayer]; if (type != YQAlertViewTypeLoading) { dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ [self dismiss]; }); }}

其实说白了,这个方法里,都是一些需要知道属性才能设置的代码。比如layer的位置设置或者layer的初始化或者messageLabel是否隐藏。_aniLayer是父类YQShapeLayer类的变量,不管AlertView的type如何,不管初始化哪个layer,赋值给他都没问题,毕竟他是父类嘛。

这里也有个需要注意的地方,由于我们用的是单例模式,而layer的初始化并不是放在单例方法中,所以如果不执行[_aniLayer removeFromSuperlayer];方法,就会出现下图两个layer都存在的问题:

图片 9问题.png

AlertView能出现,也需要能消失。

- dismiss{ [UIView animateWithDuration:0.5 animations:^{ self.alpha = 0.1; } completion:^(BOOL finished) { [self removeFromSuperview]; }];}

当需要消失的时候调用该方法即可。这里也有一个注意点,就是load是不需要自己消失的,其他两个类型是需要自己消失的。所以在设置完type属性的时候,就应该判断是否不为load类型,如果是,就需要自己消失。代码其实在第5步中已经写了。

剩下的是一些细节的处理了。比如AlertView出现时的动画设置,消失的动画处理等等。

到这里,简单的提醒控件AlertView就实现了。由于我的能力较浅,暂时只能封装到这一步。文章中或者代码中有任何问题请不吝赐教!谢谢~

本文章对应代码:

3.CABasicAnimation、CAKeyframeAnimation

CABasicAnimation和CAKeyframeAnimation都是CAPropertyAnimation的子类。

图片 10CABasicAnimation概念.png

概念其实看不出什么,主要还是看使用方法。

1.CAShapeLayer

先上代码

 CAShapeLayer *layer = [CAShapeLayer layer]; // 填充颜色 layer.fillColor = [UIColor clearColor].CGColor; // 绘制颜色 layer.strokeColor = [UIColor greenColor].CGColor; layer.lineCap = kCALineCapRound; layer.lineJoin = kCALineJoinRound; layer.lineWidth = 4; layer.frame = self.view.bounds; layer.path = [self circlePath].CGPath; [self.view.layer addSublayer:layer];

这些代码我是直接在viewDidLoad里面写的。可以发现其实CAShapeLayer使用很简单,初始化后,设置基本属性,然后设置path,最后添加到layer上去。需要注意的是,path这个属性必须需要设置,不然是没有效果的。

2.UIBezierPath

下面介绍UIBezierPath的使用方法。(我把UIBezierPath的绘制放到一个方法中,然后在path属性设置时调用)

a.1 圆
- (UIBezierPath *)circlePath{ return [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];}

效果:

图片 11圆形.png

a.2矩形
- (UIBezierPath *)rectanglePath{ return [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];}

效果:

图片 12矩形.png

a.3圆角矩形
- (UIBezierPath *)roundedPath{ return [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 100, 100) cornerRadius:5];}

效果:

图片 13圆角矩形.png

a.4圆弧
- (UIBezierPath *)arcPath{ return [UIBezierPath bezierPathWithArcCenter:CGPointMake radius:50 startAngle:M_PI_2 endAngle:M_PI_2*3 clockwise:YES];}

效果:

图片 14圆弧.png

注意:这里的startAngle是从这个圆的最右边那个点开始的。所以如果要绘制上半个圆,startAngle就是M_PI,endAngle就是2*M_PI。clockwise这个属性设置是否顺时针,若为YES,则顺时针绘制。

a.5一级贝塞尔
- (UIBezierPath *)classOneBezierPath{ UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake]; // 给定终点和两个控制点绘制贝塞尔曲线 [path addQuadCurveToPoint:CGPointMake controlPoint:CGPointMake]; return path;}

效果:

图片 15一级贝塞尔.png

a.6二级贝塞尔
- (UIBezierPath *)classTwoBezierPath{ UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake]; // 给定终点和两个控制点绘制贝塞尔曲线 [path addCurveToPoint:CGPointMake controlPoint1:CGPointMake controlPoint2:CGPointMake]; return path;}

效果:

图片 16二级贝塞尔.png

a.7DIY
- (UIBezierPath *)DIYPath{ UIBezierPath *DIYPath = [UIBezierPath bezierPath]; [DIYPath moveToPoint:CGPointMake]; [DIYPath addLineToPoint:CGPointMake]; [DIYPath addLineToPoint:CGPointMake]; [DIYPath moveToPoint:CGPointMake]; [DIYPath addLineToPoint:CGPointMake]; return DIYPath;}

效果:

图片 17diy.png

b.1 线宽对绘制的影响

仔细看a.1和a.2的效果,也就是圆形和矩形,可以发现,这两个图形的顶部和左部有一小部分在外面。而导致一个现象的原因就是线宽了。以a.1举例,path不变,设置 layer.lineWidth = 40;这时线宽为40。效果如下:

图片 18线宽为40的圆.png

效果图中红线是我自己加上去,其实这个红线才是我们设置的路径。然后由于线宽为40,所以系统默认红线左右两边都20。同理,线宽为40的矩形效果图:(左部和顶部有20像素没显示出来)

图片 19线宽为40的矩形.png

b.2 不同的形状,不同的开始绘制点

在我做动画的时候,发现不同的路径,开始绘制点也会不同,所以导致动画不如意。下面我们来看看这个属性。CAShapeLayer有两个属性:strokeStart和strokeEnd。分别为开始绘制点和结束绘制点。这两个属性类似,我们以strokeStart来解释。strokeStart默认为0,最大值为1。若strokeStart设置为0.5,也就是说从这个路径的50%处开始绘制。下面我们来通过效果分析:首先,我们在view中添加一个slider,然后滑动slider来改变layer.strokeStart。看看效果:

图片 20圆形的strokeStart.gif图片 21矩形的strokeStart.gif图片 22贝塞尔的strokeStart.gif图片 23自定义的strokeStart.gif

不难发现,圆形的开始绘制点是从最左侧那个点开始,矩形是左上角那个点,贝塞尔是从左侧开始,而自定义的得根据你绘制的开始点。

- (UIBezierPath *)DIYPath{ UIBezierPath *DIYPath = [UIBezierPath bezierPath]; [DIYPath moveToPoint:CGPointMake]; [DIYPath addLineToPoint:CGPointMake]; [DIYPath addLineToPoint:CGPointMake]; [DIYPath moveToPoint:CGPointMake]; [DIYPath addLineToPoint:CGPointMake]; return DIYPath;}

从代码看出这个自定义路径是开始点为。绘制的步骤为从最顶点到最底点,再到左侧点。然后又从最底点到右侧点。观察效果图发现确实是如此。

3.CABasicAnimation、CAKeyframeAnimation

我在view上加了一个开始动画按钮,点击开始动画。

- startAnimate{ [self.layer addAnimation:[self pathBasicAnimate] forKey:@"animate"];}

和上面一样,我把动画的使用也放在方法中,需要用时直接调用。

3.1.a keyPath为path的BasicAnimate
- (CABasicAnimation *)pathBasicAnimate{ CABasicAnimation *animate = [CABasicAnimation animationWithKeyPath:@"path"]; animate.removedOnCompletion = NO; animate.duration = 2; animate.fillMode = kCAFillModeForwards; animate.toValue = (__bridge id _Nullable)([self classTwoBezierPath].CGPath); return animate;}

效果:

图片 24keyPath为path的BasicAnimate.gif

3.1.b keyPath为position的BasicAnimate
- (CABasicAnimation *)positionBasicAnimate{ CABasicAnimation *animate = [CABasicAnimation animationWithKeyPath:@"position"]; animate.removedOnCompletion = NO; animate.duration = 1; animate.fillMode = kCAFillModeForwards; animate.toValue = [NSValue valueWithCGPoint:CGPointMake(self.view.frame.size.width/2 + 100, self.view.frame.size.height/2)]; return animate;}

效果:

图片 25keyPath为position的BasicAnimate.gif

3.1.c keyPath为transform.rotation.z的BasicAnimate
- (CABasicAnimation *)rotationBasicAnimate{ CABasicAnimation *animate = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; animate.removedOnCompletion = NO; animate.duration = 1; animate.fillMode = kCAFillModeForwards; animate.toValue = @; return animate;}

效果

图片 26keyPath为rotation的BasicAnimate.gif

3.1.d CABasicAnimation的使用总结

认真对比上面的代码,发现CABasicAnimation的使用其实很简单。首先清楚自己需要怎么样的动画,是需要位移,还是旋转,还是改变绘制路径等等。然后找到对应的属性并初始化。CABasicAnimation *animate = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];然后设置该动画的持续时间animate.duration = 1;设置动画结束后是否还原

animate.removedOnCompletion = NO;animate.fillMode = kCAFillModeForwards;

然后设置KeyPath终止时的值animate.toValue = (__bridge id _Nullable)([self classTwoBezierPath].CGPath);这样,简单的动画就做好了。

前面的基本动画只是单一的动画,如果你要改变一个layer的很多次path,或者多次改变layer的position,就可以使用CAKeyframeAnimation。

- (CAKeyframeAnimation *)keyframeAnimation{ CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"path"]; keyframeAnimation.duration = 3; keyframeAnimation.values = @[(__bridge id)[self classOneBezierPath].CGPath, (__bridge id)[self classTwoBezierPath].CGPath, (__bridge id)[self arcPath].CGPath, (__bridge id)[self DIYPath].CGPath]; keyframeAnimation.keyTimes = @[@, @, @, @]; keyframeAnimation.fillMode = kCAFillModeForwards; keyframeAnimation.removedOnCompletion = NO; return keyframeAnimation;}

可以看到还是类似,找到动画对应的属性,设置动画的属性。不同的是这里需要设置values属性。因为你需要的动画更复杂了对吧。看看效果:

图片 27keyframeAnimation.gif

其他layer的属性也是类似的,就不一一举例了。

这个是顺带一提的,使用也很简单。当你需要既改变layer的path,又改变他的position时,使用。

- (CAAnimationGroup *)animationGroup{ CABasicAnimation *animate = [CABasicAnimation animationWithKeyPath:@"position"]; animate.removedOnCompletion = NO; animate.fillMode = kCAFillModeForwards; animate.toValue = [NSValue valueWithCGPoint:CGPointMake(self.view.frame.size.width/2 + 100, self.view.frame.size.height/2)]; CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"path"]; keyframeAnimation.values = @[(__bridge id)[self classOneBezierPath].CGPath, (__bridge id)[self classTwoBezierPath].CGPath, (__bridge id)[self arcPath].CGPath, (__bridge id)[self DIYPath].CGPath]; keyframeAnimation.keyTimes = @[@, @, @, @]; keyframeAnimation.fillMode = kCAFillModeForwards; keyframeAnimation.removedOnCompletion = NO; CAAnimationGroup *group = [CAAnimationGroup animation]; group.animations = @[animate, keyframeAnimation]; group.removedOnCompletion = NO; group.fillMode = kCAFillModeForwards; group.duration = 3; return group;}

把你需要的动画放到数组中,然后赋值给group.animations。效果:

图片 28animationGroup.gif

看效果图时你会发现,在改变path的时候,不是很好看。其实执行path的动画时,系统默认将上一个path的开始点设为对应下一个path的开始点。仔细观察效果图,可以看到第一个path为贝塞尔,最左侧为绘制开始点,然后这个点始终是接下去任何一个path的开始点,所以他会不规则的动来动去。结束点也是如此。

到这里就全部介绍完了。当你看到一个复杂的动画时,把他分解开来,然后一个个部分设置动画,就肯定能做出来。本文github地址:

实战1:动画实战:自定义下拉刷新控件实战2:动画实战:自定义提醒控件AlertView实战3:动画实战:自定义转场动画实现

本文由永利402游戏网站-永利402com官方网站发布于网络编程,转载请注明出处:iOS基础:上手CAShapeLayer,动画其实并不难

关键词: