Skip to content

Commit

Permalink
修复 markdown 标题标签失效的问题
Browse files Browse the repository at this point in the history
  • Loading branch information
AAChartModel committed Dec 14, 2017
1 parent 5bbd491 commit b8349c6
Show file tree
Hide file tree
Showing 15 changed files with 163 additions and 163 deletions.
12 changes: 6 additions & 6 deletions 1-图层树/图层树.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#图层的树状结构
# 图层的树状结构

>巨妖有图层,洋葱也有图层,你懂吗?我们都有图层 -- 史莱克
Expand All @@ -8,7 +8,7 @@ Core Animation是一个*复合引擎*,它的职责就是尽可能快地组合

在我们讨论动画之前,我们将从图层树开始,涉及一下Core Animation的*静态*组合以及布局特性。

##图层和视图
## 图层和视图
如果你曾经在iOS或者Mac OS平台上写过应用程序,你可能会对*视图*的概念比较熟悉。一个视图就是在屏幕上显示的一个矩形块(比如图片,文字或者视频),它能够拦截类似于鼠标点击或者触摸手势等用户输入。视图在层级关系中可以互相嵌套,一个视图可以管理它的所有子视图的位置。图1.1显示了一种典型的视图层级关系

<img src="./1.1.jpeg" alt="图1.1" title="图1.1" width="700"/>
Expand All @@ -17,12 +17,12 @@ Core Animation是一个*复合引擎*,它的职责就是尽可能快地组合

在iOS当中,所有的视图都从一个叫做`UIVIew`的基类派生而来,`UIView`可以处理触摸事件,可以支持基于*Core Graphics*绘图,可以做仿射变换(例如旋转或者缩放),或者简单的类似于滑动或者渐变的动画。

###CALayer
### CALayer
`CALayer`类在概念上和`UIView`类似,同样也是一些被层级关系树管理的矩形块,同样也可以包含一些内容(像图片,文本或者背景色),管理子图层的位置。它们有一些方法和属性用来做动画和变换。和`UIView`最大的不同是`CALayer`不处理用户的交互。

`CALayer`并不清楚具体的*响应链*(iOS通过视图层级关系用来传送触摸事件的机制),于是它并不能够响应事件,即使它提供了一些方法来判断是否一个触点在图层的范围之内(具体见第三章,“图层的几何学”)

###平行的层级关系
### 平行的层级关系
每一个`UIview`都有一个`CALayer`实例的图层属性,也就是所谓的*backing layer*,视图的职责就是创建并管理这个图层,以确保当子视图在层级关系中添加或者被移除的时候,他们关联的图层也同样对应在层级关系树当中有相同的操作(见图1.2)。

<img src="./1.2.jpeg" alt="图1.2" title="图1.2" width="700"/>
Expand Down Expand Up @@ -54,7 +54,7 @@ Core Animation是一个*复合引擎*,它的职责就是尽可能快地组合

我们将会在后续章节中探索这些功能,首先我们要关注一下在应用程序当中`CALayer`是怎样被利用起来的。

##使用图层
## 使用图层
首先我们来创建一个简单的项目,来操纵一些`layer`的属性。打开Xcode,使用*Single View Application*模板创建一个工程。

在屏幕中央创建一个小视图(大约200 X 200的尺寸),当然你可以手工编码,或者使用Interface Builder(随你方便)。确保你的视图控制器要添加一个视图的属性以便可以直接访问它。我们把它称作`layerView`
Expand Down Expand Up @@ -120,7 +120,7 @@ Core Animation是一个*复合引擎*,它的职责就是尽可能快地组合
但是这些例子都很少见,总的来说,处理视图会比单独处理图层更加方便。
##总结
## 总结
这一章阐述了图层的树状结构,说明了如何在iOS中由`UIView`的层级关系形成的一种平行的`CALayer`层级关系,在后面的实验中,我们创建了自己的`CALayer`,并把它添加到图层树中。
在第二章,“图层关联的图片”,我们将要研究一下`CALayer`关联的图片,以及Core Animation提供的操作显示的一些特性。
22 changes: 11 additions & 11 deletions 10-缓冲/缓冲.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
#缓冲
# 缓冲

>生活和艺术一样,最美的永远是曲线。 -- 爱德华布尔沃 - 利顿
在第九章“图层时间”中,我们讨论了动画时间和`CAMediaTiming`协议。现在我们来看一下另一个和时间相关的机制--所谓的*缓冲*。Core Animation使用缓冲来使动画移动更平滑更自然,而不是看起来的那种机械和人工,在这一章我们将要研究如何对你的动画控制和自定义缓冲曲线。

##动画速度
## 动画速度

动画实际上就是一段时间内的变化,这就暗示了变化一定是随着某个特定的速率进行。速率由以下公式计算而来:

Expand All @@ -20,7 +20,7 @@

现实生活中的任何一个物体都会在运动中加速或者减速。那么我们如何在动画中实现这种加速度呢?一种方法是使用*物理引擎*来对运动物体的摩擦和动量来建模,然而这会使得计算过于复杂。我们称这种类型的方程为*缓冲函数*,幸运的是,Core Animation内嵌了一系列标准函数提供给我们使用。

###`CAMediaTimingFunction`
### `CAMediaTimingFunction`

那么该如何使用缓冲方程式呢?首先需要设置`CAAnimation``timingFunction`属性,是`CAMediaTimingFunction`类的一个对象。如果想改变隐式动画的计时函数,同样也可以使用`CATransaction``+setAnimationTimingFunction:`方法。

Expand Down Expand Up @@ -81,7 +81,7 @@
@end
```
###`UIView`的动画缓冲
### `UIView`的动画缓冲
UIKit的动画也同样支持这些缓冲方法的使用,尽管语法和常量有些不同,为了改变`UIView`动画的缓冲选项,给`options`参数添加如下常量之一:
Expand Down Expand Up @@ -132,7 +132,7 @@ UIKit的动画也同样支持这些缓冲方法的使用,尽管语法和常量
@end
```

###缓冲和关键帧动画
### 缓冲和关键帧动画

或许你会回想起第八章里面颜色切换的关键帧动画由于线性变换的原因(见清单8.5)看起来有些奇怪,使得颜色变换非常不自然。为了纠正这点,我们来用更加合适的缓冲方法,例如`kCAMediaTimingFunctionEaseIn`,给图层的颜色变化添加一点*脉冲*效果,让它更像现实中的一个彩色灯泡。

Expand Down Expand Up @@ -188,15 +188,15 @@ UIKit的动画也同样支持这些缓冲方法的使用,尽管语法和常量
@end
```
##自定义缓冲函数
## 自定义缓冲函数
在第八章中,我们给时钟项目添加了动画。看起来很赞,但是如果有合适的缓冲函数就更好了。在现实世界中,钟表指针转动的时候,通常起步很慢,然后迅速啪地一声,最后缓冲到终点。但是标准的缓冲函数在这里没一个适合它,那该如何创建一个新的呢?
除了`+functionWithName:`之外,`CAMediaTimingFunction`同样有另一个构造函数,一个有四个浮点参数的`+functionWithControlPoints::::`(注意这里奇怪的语法,并没有包含具体每个参数的名称,这在objective-C中是合法的,但是却违反了苹果对方法命名的指导方针,而且看起来是一个奇怪的设计)。
使用这个方法,我们可以创建一个自定义的缓冲函数,来匹配我们的时钟动画,为了理解如何使用这个方法,我们要了解一些`CAMediaTimingFunction`是如何工作的。
###三次贝塞尔曲线
### 三次贝塞尔曲线
`CAMediaTimingFunction`函数的主要原则在于它把输入的时间转换成起点和终点之间成比例的改变。我们可以用一个简单的图标来解释,横轴代表时间,纵轴代表改变的量,于是线性的缓冲就是一条从起点开始的简单的斜线(图10.1)。
Expand Down Expand Up @@ -301,7 +301,7 @@ UIKit的动画也同样支持这些缓冲方法的使用,尽管语法和常量
}
```

###更加复杂的动画曲线
### 更加复杂的动画曲线

考虑一个橡胶球掉落到坚硬的地面的场景,当开始下落的时候,它会持续加速知道落到地面,然后经过几次反弹,最后停下来。如果用一张图来说明,它会如图10.5所示。

Expand All @@ -314,7 +314,7 @@ UIKit的动画也同样支持这些缓冲方法的使用,尽管语法和常量
*`CAKeyframeAnimation`创建一个动画,然后分割成几个步骤,每个小步骤使用自己的计时函数(具体下节介绍)。
* 使用定时器逐帧更新实现动画(见第11章,“基于定时器的动画”)。

###基于关键帧的缓冲
### 基于关键帧的缓冲

为了使用关键帧实现反弹动画,我们需要在缓冲曲线中对每一个显著的点创建一个关键帧(在这个情况下,关键点也就是每次反弹的峰值),然后应用缓冲函数把每段曲线连接起来。同时,我们也需要通过`keyTimes`来指定每个关键帧的时间偏移,由于每次反弹的时间都会减少,于是关键帧并不会均匀分布。

Expand Down Expand Up @@ -394,7 +394,7 @@ UIKit的动画也同样支持这些缓冲方法的使用,尽管语法和常量
这种方式还算不错,但是实现起来略显笨重(因为要不停地尝试计算各种关键帧和时间偏移)并且和动画强绑定了(因为如果要改变动画的一个属性,那就意味着要重新计算所有的关键帧)。那该如何写一个方法,用缓冲函数来把任何简单的属性动画转换成关键帧动画呢,下面我们来实现它。
###流程自动化
### 流程自动化
在清单10.6中,我们把动画分割成相当大的几块,然后用Core Animation的缓冲进入和缓冲退出函数来大约形成我们想要的曲线。但如果我们把动画分割成更小的几部分,那么我们就可以用直线来拼接这些曲线(也就是线性缓冲)。为了实现自动化,我们需要知道如何做如下两件事情:
Expand Down Expand Up @@ -523,7 +523,7 @@ float bounceEaseOut(float t)
}
```

##总结
## 总结
在这一章中,我们了解了有关缓冲和`CAMediaTimingFunction`类,它可以允许我们创建自定义的缓冲函数来完善我们的动画,同样了解了如何用`CAKeyframeAnimation`来避开`CAMediaTimingFunction`的限制,创建完全自定义的缓冲函数。

在下一章中,我们将要研究基于定时器的动画--另一个给我们对动画更多控制的选择,并且实现对动画的实时操纵。
Loading

0 comments on commit b8349c6

Please sign in to comment.