maskView(maskLayer)基本原理
maskView配合CAGradientLayer的使用
maskView配合带alpha通道图片的使用
设计文本横向渐变消失的控件
maskView(maskLayer)基本原理:
png图片透明像素的原理
maskView(maskLayer)可类比多张png图片的叠加遮罩,原理类似
maskView是iOS8以上才有的方法,如果考虑版本的兼容问题,可以考虑用maskLayer替换
下面我们来编写代码:
1:导入图片
![](https://i-blog.csdnimg.cn/blog_migrate/39f0056812cca73e51a8dbe0ea4060f1.webp?x-image-process=image/format,png)
带有透明效果的图片:
![](https://i-blog.csdnimg.cn/blog_migrate/03acf0ce71be394d86610d1ef07e8893.webp?x-image-process=image/format,png)
jpg图片是没有这种效果的
下面我们来写代码
1:加载图片
![](https://i-blog.csdnimg.cn/blog_migrate/cca478b9a4caefd075779d36eceff467.webp?x-image-process=image/format,png)
我们把模拟器调成一直呆在最前面,如上图所示。
2:显示第二张图片
![](https://i-blog.csdnimg.cn/blog_migrate/0f2346a8163994a8ba0e143c1e04d63c.webp?x-image-process=image/format,png)
下面我们来写两张图片叠加的效果
![](https://i-blog.csdnimg.cn/blog_migrate/a1bb8f8d7fd311a407b7a6c32cd3270f.webp?x-image-process=image/format,png)
之所以会产生这种效果,是因为我们利用了png图片透明的特性。
注意:maskView并不能用addSubView来添加
maskView 配合 CAGradientLayer 的使用
1:用CAGradientLayer直接产生带透明像素的layer,这一点和透明像素的图片相似,只不过我们这次用的是代码产生的layer来代替图片
2:用maskView直接加载带CAGradientLayer的View,也就是说我们可以直接把CAGradientLayer直接当Mask来使用
3:可是通过对CAGradientLayer进行动画的操作来实现动画效果
下面我们创建工程来实现
1:导入底图 这次不需要其他图片
2:创建CAGradientLayer
设定值:
![](https://i-blog.csdnimg.cn/blog_migrate/a2c552ddc2d3b7de8295b7cf341229db.webp?x-image-process=image/format,png)
3:创建容器View并加到基础图片上
![](https://i-blog.csdnimg.cn/blog_migrate/28c59bfd50c1529b3cdfb4338a8ef12e.webp?x-image-process=image/format,png)
4:添加动画效果(开始值、结束值)
![](https://i-blog.csdnimg.cn/blog_migrate/ed73a10c57025cf107d6366ca3f95556.webp?x-image-process=image/format,png)
运行效果:
![](https://i-blog.csdnimg.cn/blog_migrate/2d23075929a979cabbe69a82a4c605c9.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/5ad952d8e3b8a45ad68edec71a97347f.webp?x-image-process=image/format,png)
maskView 配合带 alpha 通道图片的使用
1:直接使用带Alpha通道的图片比使用CAGradientLayer的方式更加高效
2:可以使用一些技巧在maskView上添加多张图片
3:可以在maskView中做简单的动画
代码:
1:添加两张图片,第一张覆盖第二张
![](https://i-blog.csdnimg.cn/blog_migrate/45a2ee3104ca53aafe9441d8920e6c72.webp?x-image-process=image/format,png)
2:创建maskView作为容器
![](https://i-blog.csdnimg.cn/blog_migrate/d2209c69c689252eba1727b9e1acdb9f.webp?x-image-process=image/format,png)
3:添加两张带有alpha通道的图片到MaskView上面
第一张的下半部分透明,第二张的上半部分透明
![](https://i-blog.csdnimg.cn/blog_migrate/65846c4a70fa4d79557da91956a6d03d.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/a45dcbf715aba5776f32112c6bd4f3f3.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/dd448d663a6de90ecf15f05e5bc945a4.webp?x-image-process=image/format,png)
4:添加动画效果
![](https://i-blog.csdnimg.cn/blog_migrate/dc03a0682fb1d0c7a69ad811d26d8797.webp?x-image-process=image/format,png)
运行效果:
![](https://i-blog.csdnimg.cn/blog_migrate/36679d29eb23dd02b6a42c3371a65922.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/2e8b9142a4f3746a44eccfce8c11016c.webp?x-image-process=image/format,png)
设计文本横向渐变消失的控件
1:接口设计
2:封装CAGradientLayer用以提供mask遮罩
3:动画样式的分析与设计
1:封装控件
.h 给定文本属性 给定渐变方法
![](https://i-blog.csdnimg.cn/blog_migrate/d639dda0a1e1e90791abff60355d4d87.webp?x-image-process=image/format,png)
声明label、mask属性并创建
![](https://i-blog.csdnimg.cn/blog_migrate/e24c281a64b621a2864442040ab50ade.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/36090dbbdb8ae1a01b7ce991be850d21.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/77540a57b2c8fc26e670af584fca70aa.webp?x-image-process=image/format,png)
给text赋值
![](https://i-blog.csdnimg.cn/blog_migrate/b14698d06e9ca9a8ff59327f4236cd17.webp?x-image-process=image/format,png)
实现留给外界的动画方法
![](https://i-blog.csdnimg.cn/blog_migrate/18c3d177cd7f32fc2ed9b9a494b256b1.webp?x-image-process=image/format,png)
主控制器初始化并调用:
![](https://i-blog.csdnimg.cn/blog_migrate/226483d27fa5b17c7c64e3449a307ee3.webp?x-image-process=image/format,png)
运行效果:
![](https://i-blog.csdnimg.cn/blog_migrate/05573a9b20dbf4ff1518ed35e2e33bbf.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/4771844667a5d1d955e69bc03543649c.webp?x-image-process=image/format,png)
总结:
maskView(maskLayer)的基本原理
maskView配个CAGradientLayer的使用(创建渐变的图层)
maskView配合alpha通道图片的使用
设计文本横向渐变消失的控件
原文链接:http://www.jianshu.com/p/6e360516e3bc
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。