iOS CoreAnimation专题——总览篇

来源:互联网 发布:网络协议抽象成软件 编辑:程序博客网 时间:2024/05/01 14:52

概述

本专题将详细介绍iOS CoreAnimation框架,我们将从原理等理论知识开始,详细的探究iOS中的绘图和动画(实际上CoreAnimation框架更多的是处理的绘制,动画只是衍生产品)。当你们完全掌握了本专题的知识后,在界面的实现上你会非常的得心应手,无论产品经理或者客户给了你们多么炫酷的界面效果,你们至少都能找到实现思路而不会茫然不知无从下手。

本专题将直戳重点,讲解我们平时在实现界面效果的时候大多数情况下会用到的东西,不会完整的介绍整个CoreAnimation框架。如果大家想系统的学习CoreAnimation框架,请参阅苹果的官方文档或者这篇翻译的文章:https://zsisme.gitbooks.io/ios-/content/index.html

你应该已经有了一定iOS开发的相关经验,至少能使用UIKit来进行简单的界面开发(手写代码而不是拖xib或者storyboard),你应该了解UIView动画如何来实现。如果你是一个iOS开发新手,请先学习相关知识后再来前往本专题学习。

所有文章将在近期依次放出,绝不拖更!

我将分以下三个阶段来逐步讲解CoreAnimation:

原理篇

这一篇中,我们将简单的探究动画原理(所以这一篇很多文字内容)。

首先我们要知道我们在屏幕上看到的一切是如何被绘制出来的,我们将介绍CALayer与UIView之间的关系,以及CALayer的一些特性。

博客地址:
iOS CoreAnimation专题——原理篇(一) CALayer与UIView之间的关系

然后我们会研究UIKit的UIView+block动画实现原理,为什么同样的一行代码在block里面就有动画在block外面就没动画。

博客地址:
iOS CoreAnimation专题——原理篇(二) UIView block动画实现原理

接下来我们将深入到layer内部,结合CABasicAnimation看看两个非常重要的概念:modelLayer和presentationLayer,以及模型和显示的同步。

博客地址:
iOS CoreAnimation专题——原理篇(三) CALayer的模型层与展示层

最后我们将通过进一步研究CABasicAnimation来研究“动画时间”这个概念。我们将看到如何控制动画进程,如何暂停动画。我们将会在技巧篇中再次详细探讨这个概念,届时将有更复杂的数学推导。

博客地址:
iOS CoreAnimation专题——原理篇(四)动画时间控制

技巧篇

这一篇中,我们将介绍各种进阶绘图(动画实际上就是一系列的绘图)技巧以及更深入的动画思想。

首先我们将介绍一个非常牛逼非常关键的类叫做CADisplayLink,并且我们会讲解在动画实现中非常重要的概念:插值。我们将研究如何通过实现每次屏幕刷新的回调并应用插值效果来逐帧绘制视图以实现动画效果。我们将遇到一些挑战,比如Ease效果的实现,这将对你们的数学能力有一定考验。

博客地址:
iOS CoreAnimation专题——技巧篇(一)CADisplayLink –同步屏幕刷新的神器

接着我们会介绍几个常用的CALayer子类,它们能帮助我们绘制出你在不了解它们的时候可能难以想象的图像效果。我们将在这个过程简单的介绍贝塞尔曲线,系统的贝塞尔曲线能解决大部分问题了,但是它最多只支持三阶贝塞尔曲线(至多两个控制点),我们会讲解如果想要任意阶的贝塞尔曲线应该如何去处理。

博客地址:
iOS CoreAnimation专题——技巧篇(二)CAShapeLayer with Bezier Path - Layer世界的神奇画笔

然后我们会讲解图层蒙版(mask,有些人把它叫做遮罩,我觉得遮罩跟蒙版完全是两个不同的概念,用过PS的朋友应该都懂)。使用蒙版能达到很多意想不到的效果,并且一些界面的实现会变得更加简单。

博客地址:
iOS CoreAnimation专题——技巧篇(三)Layer Masking - 图层蒙版

最后我将介绍我在实现动画的时候使用的杀手锏:平面向量。无论你有没有接触过向量,在你使用了它之后就会感受到它的强大。当然iOS系统自带的向量我并没有使用过(我也不清楚是否有自带的平面向量),我将介绍我自己封装的一个向量类并将其开源,然后用它来解决一些问题。

实战篇

这一篇中,我们将结合上面学到的东西来实现各种看似非常高端、大气、炫酷的界面效果,一来是对我们之前学习的总结和整理,二来让大家感受一下CoreAnimation的强大之处。

首先我们会用蒙版的思想实现一些非常高端的进度条效果,各种奇怪的进度条都能用我们强大的蒙版+CAAnimation+CADisplayLink来实现。

然后我们会实现各种各样奇葩的统计图。折线统计图、扇形统计图、柱状统计图等,包括它们的各种动效的实现。

然后我们会使用CADisplayLink真正的能力:同步屏幕刷新,结合系统自带的Spring动画,来实现一个带有弹性效果的按钮。

接下来我们将接触到更高端的效果:3D变换。我将介绍如何使用一个拖动手势(UIPanGestureRecognizer)结合平面向量来模拟控制视图的3D变换。

最后我将告诉大家如何提高绘图性能。这其实是一个big problem,在有限的篇幅很难讲明白,我将直戳重点,简要的介绍原理后告诉大家一些直接的小技巧来提高绘图性能。

0 0
原创粉丝点击