使用 maskView 设计动画

技术点：

maskView（maskLayer）基本原理

maskView配合CAGradientLayer的使用

maskView配合带alpha通道图片的使用

设计文本横向渐变消失的控件

maskView（maskLayer）基本原理：

png图片透明像素的原理

maskView（maskLayer）可类比多张png图片的叠加遮罩，原理类似

maskView是iOS8以上才有的方法，如果考虑版本的兼容问题，可以考虑用maskLayer替换

下面我们来编写代码：

1：导入图片

原图

带有透明效果的图片：

带有透明效果的图片

jpg图片是没有这种效果的

下面我们来写代码

1：加载图片

效果图

我们把模拟器调成一直呆在最前面，如上图所示。

2：显示第二张图片

效果图

下面我们来写两张图片叠加的效果

叠加效果图

之所以会产生这种效果，是因为我们利用了png图片透明的特性。

注意：maskView并不能用addSubView来添加

maskView 配合 CAGradientLayer 的使用

1：用CAGradientLayer直接产生带透明像素的layer，这一点和透明像素的图片相似，只不过我们这次用的是代码产生的layer来代替图片

2：用maskView直接加载带CAGradientLayer的View，也就是说我们可以直接把CAGradientLayer直接当Mask来使用

3：可是通过对CAGradientLayer进行动画的操作来实现动画效果

下面我们创建工程来实现

1：导入底图 这次不需要其他图片

2：创建CAGradientLayer

设定值：

设定值

3：创建容器View并加到基础图片上

容器View

4：添加动画效果（开始值、结束值）

动画

运行效果：

无动画效果 从左到右的动画效果

maskView 配合带 alpha 通道图片的使用

1：直接使用带Alpha通道的图片比使用CAGradientLayer的方式更加高效

2：可以使用一些技巧在maskView上添加多张图片

3：可以在maskView中做简单的动画

代码：

1：添加两张图片，第一张覆盖第二张

两张图片

2：创建maskView作为容器

maskView容器

3：添加两张带有alpha通道的图片到MaskView上面

第一张的下半部分透明，第二张的上半部分透明

第一张

---

第二张 添加两张带有alpha通道的图片

4：添加动画效果

第一个mskY轴上移、第二个Y轴下移

运行效果：

渐变效果1 渐变效果2

设计文本横向渐变消失的控件

1：接口设计

2：封装CAGradientLayer用以提供mask遮罩

3：动画样式的分析与设计

1：封装控件

.h 给定文本属性 给定渐变方法

.h

声明label、mask属性并创建

声明label、mask属性并创建 .m加载label .m加载mask

给text赋值

.m给label.text赋值

实现留给外界的动画方法

实现动画效果的方法

主控制器初始化并调用：

主控制器调用

运行效果：

动画开始1 动画将要结束

总结：

maskView（maskLayer）的基本原理

maskView配个CAGradientLayer的使用（创建渐变的图层）

maskView配合alpha通道图片的使用

设计文本横向渐变消失的控件