使用 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并加到基础图片上

4:添加动画效果(开始值、结束值)

运行效果:


maskView 配合带 alpha 通道图片的使用
1:直接使用带Alpha通道的图片比使用CAGradientLayer的方式更加高效
2:可以使用一些技巧在maskView上添加多张图片
3:可以在maskView中做简单的动画
代码:
1:添加两张图片,第一张覆盖第二张

2:创建maskView作为容器

3:添加两张带有alpha通道的图片到MaskView上面
第一张的下半部分透明,第二张的上半部分透明



4:添加动画效果

运行效果:


设计文本横向渐变消失的控件
1:接口设计
2:封装CAGradientLayer用以提供mask遮罩
3:动画样式的分析与设计
1:封装控件
.h 给定文本属性 给定渐变方法

声明label、mask属性并创建



给text赋值

实现留给外界的动画方法

主控制器初始化并调用:

运行效果:


总结:
maskView(maskLayer)的基本原理
maskView配个CAGradientLayer的使用(创建渐变的图层)
maskView配合alpha通道图片的使用
设计文本横向渐变消失的控件