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

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

该动画是在du的轮廓中进行,类似一个镂空效果,轮廓的填充是用双波浪的形式,类似于水流慢慢注入容器的过程。
动画使用CADisplayLink来进行刷新,保证了动画的流程性,利用CAShapeLayer来构建波浪的轮廓,最后利用CALayermask属性来实现逐渐填充的过程。

背景知识介绍

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

  1. CADisplayLink
  2. UIBezierPath
  3. CAShapeLayer
  4. mask

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

1、CADisplayLink

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

1
2
3
4
5
6
  _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等属性,如果你想同时设置几个不同颜色的多个形状,你就需要为每个形状准备一个图层。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  - (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];
}

显示的形状如下:

4、mask

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

mask图层的color属性是无关紧要的,真正重要的是它的轮廓,mask属性就像一个切割机,父视图被mask切割,相交的部分会留下,其他的部分则被丢弃。
CALayer的蒙版图层真正厉害的地方在于蒙版图层不局限于静态图,任何有图层构成的都可以作为mask属性,这意味着蒙版可以通过代码甚至是动画实时生成。这也为我们实现示例中波浪的变化提供了支持。

绘制波浪轮廓

我们利用UIBezierPath来绘制波浪的轮廓,通过正弦函数和余弦函数来创建顶部的波浪曲线,在单位为1的右手直角坐标系中的曲线变化如下:

可以看到在(-2π , 2π )的范围类,y值在[-1, 1]之间变化。
以正弦曲线为例,它可以表示为y=Asin(ωx+φ)+k,公式中各符号表示的含义:

  • A–振幅,即波峰的高度。
  • (ωx+φ)–相位,反应了变量y所处的位置。
  • φ–初相,x=0时的相位,反映在坐标系上则为图像的左右移动。
  • k–偏距,反映在坐标系上则为图像的上移或下移。
  • ω–角速度,控制正弦周期(单位角度内震动的次数)。

通过上面的函数,我们就能计算出波浪曲线上任意位置的坐标点。通过UIBezierPath的函数addLineToPoint来把这些点连接起来,就构建了波浪形状的path。只要我们的设定相邻两点的间距够小,就能构建出平滑的正弦曲线,构建正弦波浪的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  - (UIBezierPath *)createSinPath
{
UIBezierPath *wavePath = [UIBezierPath bezierPath];
CGFloat endX = 0;
for (CGFloat x = 0; x < self.waveWidth + 1; x += 1) {
endX=x;
CGFloat y = self.maxAmplitude * sinf(360.0 / _waveWidth * (x * M_PI / 180) * self.frequency + self.phase * M_PI/ 180) + self.maxAmplitude;
if (x == 0) {
[wavePath moveToPoint:CGPointMake(x, y)];
} else {
[wavePath addLineToPoint:CGPointMake(x, y)];
}
} CGFloat endY = CGRectGetHeight(self.bounds) + 10;
[wavePath addLineToPoint:CGPointMake(endX, endY)];
[wavePath addLineToPoint:CGPointMake(0, endY)]; return wavePath;
}

显示的效果如下:

在这里我们设定了两个正弦曲线上的点的横坐标间距是1,现在来解释一下通过横坐标x来得出y的计算过程:

y = self.maxAmplitude * sinf(360.0 / _waveWidth * (x  * M_PI / 180) * self.frequency + self.phase * M_PI/ 180) + self.maxAmplitude;

第一个self.maxAmplitude表示曲线的波峰值,360.0 / _waveWidth计算出单位间距1pixel代表的度数,x * M_PI / 180表示将横坐标值转换为角度。self.frequency表示角速度,即单位面积内波动次数,波浪的大小。self.phase * M_PI/ 180代表上面公式中的初相,通过规律的变化初相,可以制造出曲线上的点动起来的效果,self.maxAmplitude代表偏距,由于我们需要让波浪曲线的波峰在layer的范围内显示,所以需要将整个曲线向下移动波峰大小的单位,因为CALayer使用左手坐标系,所以向下移动需要加上波峰的大小。

让波浪曲线动起来

正弦或者余弦曲线上的点,不论角度如何,在y轴上的变化范围在它的波峰与波谷之间。拿单位正交直角坐标系来说,只要我们规律性的增加角度值,那么曲线上的点就会在[1, -1]之间变化,我们以曲线上x=0的点为例,角度的不断增加,会让它的y值规律性的来回变化:

如若曲线上的点都能这样规律的变化,我们就能让波浪曲线浪起来。
要让曲线上所有的点都动起来,在这里我们使用CADisplayLink来不断刷新由UIBezierPath创建的形状,两次刷新之间曲线的变化通过增加初相来实现,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
- (void)startLoading
{
[_displayLink invalidate];
self.displayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(updateWave:)];
[_displayLink addToRunLoop:[NSRunLoop currentRunLoop]
forMode:NSRunLoopCommonModes];
} - (void)updateWave:(CADisplayLink *)displayLink
{
self.phase += 8;//逐渐累加初相
self.waveSinLayer.path = [self createSinPath].CGPath;
} - (UIBezierPath *)createSinPath
{
UIBezierPath *wavePath = [UIBezierPath bezierPath];
CGFloat endX = 0;
for (CGFloat x = 0; x < self.waveWidth + 1; x += 1) {
endX=x;
CGFloat y = self.maxAmplitude * sinf(360.0 / _waveWidth * (x * M_PI / 180) * self.frequency + self.phase * M_PI/ 180) + self.maxAmplitude;
if (x == 0) {
[wavePath moveToPoint:CGPointMake(x, y)];
} else {
[wavePath addLineToPoint:CGPointMake(x, y)];
}
} CGFloat endY = CGRectGetHeight(self.bounds) + 10;
[wavePath addLineToPoint:CGPointMake(endX, endY)];
[wavePath addLineToPoint:CGPointMake(0, endY)]; return wavePath;
}

CAShapeLayer的背景色设置为淡红色,波浪曲线会在Layerbounds类波动,动起来的波浪曲线如下:

构建波浪上升的镂空效果

到目前为止,我们利用CAShapeLayerUIBezierPath以及CADisplayLink实现了动起来的波浪效果,下面我们需要实现的是在du的轮廓里,水波不断上升填充的过程,整个动画过程中,会呈现一个du的镂空效果,在它轮廓之外的水波则不会显示,这样的效果需要借助CALayermask属性来实现。

我们需要的动画素材如下:

将这三个图片位置设置为一样,底层放置动画中一直显示的底层轮廓,中间层用以实现余弦波浪,最外层用于实现正弦波浪,将中间层和最外层图片的mask属性赋值为我们创建的用来呈现余弦波浪和正弦波浪的CAShapeLayer,这样动画开始后,利用CADisplayLink来不断刷新两个CAShapeLayerpath来让波浪浪起来,再利用CABasicAnimation来对两个CAShapeLayerposition进行动画,实现从下到上的填充效果。我们想要的效果就完成了:

完整的代码示例在这里

参考

动画黄金搭档:CADisplayLink&CAShapeLayer的更多相关文章

  1. 动画黄金搭档:CADisplayLink & CAShapeLayer

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

  2. JavaScript大杂烩8 - 理解文本解析的"黄金搭档"

    文本解析"黄金搭档" - String与RegExp对象 文本解析是任何语言中最常用的功能,JavaScript中也是一样,而正则表达式作为最常用的方式,JavaScript也同样 ...

  3. MarkDown的黄金搭档Typora编辑器

    让你成为热爱写作的程序员 学习编程的小伙伴,要养成记笔记的好习惯,并发布到博客上去与同行分享你的学习经验,那么传统的文本编辑器或多或少会不尽人意,效率低,而且码字体验与写代码完全不一样. 下面推荐一款 ...

  4. Apache Hudi:CDC的黄金搭档

    1. 介绍 Apache Hudi是一个开源的数据湖框架,旨在简化增量数据处理和数据管道开发.借助Hudi可以在Amazon S3.Aliyun OSS数据湖中进行记录级别管理插入/更新/删除.AWS ...

  5. iOS - Core Animation 核心动画

    1.UIView 动画 具体讲解见 iOS - UIView 动画 2.UIImageView 动画 具体讲解见 iOS - UIImageView 动画 3.CADisplayLink 定时器 具体 ...

  6. iOS中的时钟动画

    iOS 动画效果非常多,我们在开发中可能会遇到很多动画特效,我们就会用到核心动画框架CoreAnimation,核心动画里面的动画效果有很多,都是在QuartzCore.framework框架里面,今 ...

  7. Swift:使用CAShapeLayer打造一个ProgresssBar

    ProgressBar是一个很小却在很多地方都会用到的东西.也许是网络连接,也许APP本身有很多东西需要加载的.默认的只有一个旋转的菊花,对于打造一款个性的APP这显然是不够的.这里就使用CAShap ...

  8. 深度掌握SVG路径path的贝塞尔曲线指令

    一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...

  9. 常用iOS第三方库以及XCode插件介绍

    第三方库 CocoaPod CocoaPod并不是iOS上的第三方库 而是大名鼎鼎的第三方库的管理工具 在CocoaPod没有出现之前 第三方库的管理是非常痛苦的 尤其是一些大型的库(比如nimbus ...

随机推荐

  1. hdu 1502 Regular Words

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=1502 思路:给定一个n,分别由n个a,b,c组成的字符串的所有前缀中a的个数大于等于b的个数大于等于c的个 ...

  2. VS2010+C#+EmguCV 配置详解

    在VS2010(VC10)中配置能使用C#开发语言调用Open CV视觉库的方法如下.众所周知,能供C#使用的OpenCV库叫:Emgu CV.注意用C#开发的话,是不需要单独安装OpenCV的,em ...

  3. python中文字符乱码(GB2312,GBK,GB18030相关的问题)

    转自博主 crifan http://againinput4.blog.163.com/blog/static/1727994912011111011432810/ 在玩wordpress的一个博客搬 ...

  4. Android -- Activity,Fragment lifecycle

    Activity Lifecyce Fragment Lifecycle: 程序运行: 09-16 13:59:22.883 19022-19022/com.example.android.archi ...

  5. Delphi多线程编程--线程同步的方法(事件、互斥、信号、计时器)简介

    更详细的可以参考:http://www.cnblogs.com/xumenger/p/4450659.html 或者参考之后的博客 四个系统内核对象(事件.互斥.信号.计时器)都是线程同步的手段,从这 ...

  6. python莫名其妙的yield, yield from, yield.send

    练了几行代码, 慢慢找感觉. TASK,多线程,异步,很多地方都用到的呢. #!/usr/bin/env python # -*- coding: utf-8 -*- import time from ...

  7. Oracle 11g新特性延迟段创建和truncate的增强

    下面测试Oracle 11g开始的新特性truncate的增强和延迟段空间创建. Oracle从11g开始,当用户创建一张空表的时候不会先分配段和空间,只有当对这张表插入第一行数据的时候才分配段和空间 ...

  8. Leetcode: Surrounded regions

    Given a 2D board containing 'X' and 'O', capture all regions surrounded by 'X'. A region is captured ...

  9. React的双向绑定

    以前对于双向绑定概念来自于Angular.js,现在我用我感兴趣的react.js来实现这样的方式.有2种方式分析,1:不用插件,2:用插件 (引入react.js操作省略...) 不用插件: 先创建 ...

  10. 【Unity3d游戏开发】Unity3D中的3D数学基础---向量

    向量是2D.3D数学研究的标准工具,在3D游戏中向量是基础.因此掌握好向量的一些基本概念以及属性和常用运算方法就显得尤为重要.在本篇博客中,马三就来和大家一起回顾和学习一下Unity3D中那些常用的3 ...