close
当前位置: 物联网在线 > 技术文库 > ios >

动画黄金搭档:CADisplayLink CAShapeLayer

我们在开发中有时会遇到一些看似非常复杂的动画,不知该如何下手,今天的这篇文章中我会讲到如何利用CADisplayLink和CAShapeLayer来构建一些复杂的动画,希望能在你下次构建动画中,给你一些启发。

在接下来的文章中,我们会构建如下的一个动画:

动画黄金搭档:CADisplayLink CAShapeLayer

该动画是在du的轮廓中进行,类似一个镂空效果,轮廓的填充是用双波浪的形式,类似于水流慢慢注入容器的过程。

动画使用CADisplayLink来进行刷新,保证了动画的流程性,利用CAShapeLayer来构建波浪的轮廓,最后利用CALayer的mask属性来实现逐渐填充的过程。

背景知识介绍

在动画创建过程的讲解之前,先介绍一下会使用到的一些知识点:

CADisplayLink

UIBezierPath

CAShapeLayer

mask

如果你已经对这些概念有了充分的了解,可以略过背景知识介绍这一节。

1、CADisplayLink

用绘制的方式构建的动画,必然需要不断的刷新绘制的内容来呈现流畅的动画,CADisplayLink就像是一个定时器,每隔几毫秒刷新一次屏幕。能让我们以和屏幕刷新频率相同的频率去刷新我们绘制到屏幕上的内容。

CADisplayLink的使用方式如下:

_displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateContent:)]; [_displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];

当CADisplayLink注册到runloop以后,屏幕刷新的时候就会调用绑定到它上面的target所拥有的selector方法。停止CADisplayLink的运行非常的简单,只需要调用它的invalidate方法。

NSTimer和CADisplayLink有什么不同?

iOS设备的屏幕每秒会刷新60次,正常情况下CADisplayLink在屏幕每次刷新时都会调用,精确度非常高,并且CADisplayLink的使用场合相对专一,适合做UI的不停重绘,比如动画的连续绘制。

NSTimer的使用范围要广泛很多,可以做单次或者循环处理某个任务,精度相比CADisplayLink要低。

2、UIBezierPath

使用UIBezierPath类可以创建基于矢量的路径,它是Core Graphics框架关于CGPathRef类型数据的封装,利用它创建直线或者曲线来构建我们想要的形状,每一个直线段或者曲线段的结束位置就是下一个线段开始的地方。这些连接的直线或者曲线的集合成为subpath。一个UIBezierPath对象的完整路径包括一个或者多个subpath。

创建一个完整的UIBezierPath对象的完整步骤如下:

创建一个Bezier Path对象。

使用方法moveToPoint:去设置初始线段的起点。

添加line或者curve去定义一个或者多个subpath。

修改UIBezierPath对象跟绘图相关的属性。

3、CAShapeLayer

CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。CAShapeLayer可以用来绘制所有通过CGPath来表示的形状,上面讲到了可以用UIBezierPath来创建任何你想要的路径,使用CAShapeLayer的属性path配合UIBezierPath创建的路径,就可以呈现出我们想要的形状。

这个形状不一定要闭合,图层路径也不一定是连续不断的,你可以在CAShapeLayer的图层上绘制好几个不同的形状,但是你只有一次机会去设置它的path、lineWith、lineCap等属性,如果你想同时设置几个不同颜色的多个形状,你就需要为每个形状准备一个图层。

下面的示例代码是通过UIBezierPath和CAShapeLayer来创建一个简单的火柴人。

- (void)viewDidLoad { [super viewDidLoad]; UIBezierPath *path = [[UIBezierPath alloc] init]; [path moveToPoint:CGPointMake(175, 100)]; [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES]; [path moveToPoint:CGPointMake(150, 125)]; [path addLineToPoint:CGPointMake(150, 175)]; [path addLineToPoint:CGPointMake(125, 225)]; [path moveToPoint:CGPointMake(150, 175)]; [path addLineToPoint:CGPointMake(175, 225)]; [path moveToPoint:CGPointMake(100, 150)]; [path addLineToPoint:CGPointMake(200, 150)]; //create shape layer CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.strokeColor = [UIColor colorWithRed:147/255.0 green:231/255.0 blue:182/255.0 alpha:1].CGColor; shapeLayer.fillColor = [UIColor clearColor].CGColor; shapeLayer.lineWidth = 5; shapeLayer.lineJoin = kCALineJoinRound; shapeLayer.lineCap = kCALineCapRound; shapeLayer.path = path.CGPath; //add it to our view [self.view.layer addSublayer:shapeLayer]; }

显示的形状如下:

动画黄金搭档:CADisplayLink CAShapeLayer

4、mask

CALayer有一个属性叫做mask,通常被称为蒙版图层,这个属性本身也是CALayer类型,有和其他图层一样的绘制和布局属性。它类似于一个子视图,相对于父图层(即拥有该属性的图层)布局,但是它却不是一个普通的子视图。不同于一般的subLayer,mask定义了父图层的可见区域,简单点说就是最终父视图显示的形态是父视图自身和它的属性mask的交集部分。

动画黄金搭档:CADisplayLink CAShapeLayer


(责任编辑:ioter)

用户喜欢...

iOS开发笔记 - 仿京东的加入购物车动画

请叫我死肥宅 之前APP里的加入购物车动画是最简单的UIView动画(一句代码那种),这几天正好有时间所以就跟产品那边确认优化了一下。虽然产品嘴上说让我自由发挥,但我相信没处理好肯...


快速入门指南:使用 UIViewPropertyAnimator 做动画

iOS 10 带来了一堆非常有意思的新特性,例如 UIViewPropertyAnimator 。这是一个能够改善动画处理方式的新类。 它彻底改变了我们所习惯的工作流,为动画逻辑添加了一个更为精细的控制手段。...


iOS 自定义转场动画浅谈

路漫漫其修远兮,吾将上下而求索 开门效果.gif 前记 想研究自定义转场动画很久了,时间就像海绵,挤一挤还是有的,花了差不多有10天的时间,终于对转场动画了解了一点。自从 iOS 7 以后...


iOS 动画进阶 - 实现炫酷的上拉刷新动效

最近撸了一个上拉刷新的小轮子,只要遵循一个协议就能自定义自己动效的上拉刷新和加载,我自己也写了几个动效进去,下面是一个比较好的动效的实现过程 先上效果图和 github地址 ,有其...


iOS控件CHIPageControl:酷帅的翻页状态切换动画组件

CHIPageControl is a set of cool animated page controls to replace boring UIPageControl. We were inspired by Jardson Almeida dribbble shot and implemented a few more page controls. Made with :heart: by Chili . Overview Requirements iOS 9.0+ Xcode 8+...


iOS动画-从不会到熟练应用

上次总结了多线程的用法,这次再复习下iOS动画的东西.这次依然先是以api为主,因为好多人还是api好多的东西还不会用.然后中间穿插些例子,例子和代码文章中都会有.因为篇幅比较长,先列一下...


iOS 用Swipe手势和动画实现循环播放图片

主要想法 添加3个ImageView展示图片,实现图片的无限循环。 使用Swipe手势识别用户向右或向左滑动图片。 使用CATransition给ImageView.layer添加动画,展示图片更换的效果。 实现 在storyboard添加三个...


iOS开源:CardSlider - 基于卡片的 Tinder 风格动画效果及演示

Card Slider for Swift Tons of apps use a Tinder-style interface with cards that users can swipe right to 'like' or left to 'dislike'. But Yaroslav Zubko came up with an innovative and fresh approach to giving users more options besides just 'like'...


iOS动画进阶 - 手摸手教你写ShineButton动画

前段时间在github上看见一个非常nice的动画效果,可惜是安卓的,想着用swift写一个iOS版的,下下来源代码研究了一下,下面是我写代码的心路历程 先上图 分析动画过程 刚开始看的时候感觉这...


实现一个iOS渐变背景动画效果的Switch

在dribbble看到一个Switch动画效果就手痒想实现,下面就是我实现的思路。 源代码 GitHub地址: VGGradientSwitch 如果觉得不错,欢迎点star。 设计图 来自dribbble上的设计作者 Nick Buturishvili image 效果...