关于CAGradientLayer的几个小动画

1.首先先上效果图,效果图上看起来不是那么流畅,可能是因为录屏软件的问题吧,实际中是很流畅的。

2.源码地址 : github地址 

 https://github.com/tianliangyihou/loadingView(觉得有那么点用的话,点个star)

3.源码的行数也不多就可以完成上面的效果

里面的难点主要就是在对layer的mask作用的理解和CAGradientLayer的locations属性的理解

(1)loactions

CAGradientLayer的坐标系是这样的

所以locations是一个元素为NSNumber的数组,里面的每一个number表示到比例处 颜色开始发生变化,及颜色渐变的地方。locations里面的数字个数可以多于或者少于colors,当颜色用完之后,还要发生渐变的话 就默认取最后一个元素。

还有一个就是startPoint和endPoint 你可以试试取值连线不是水平的 layer也会倾斜

(2) CAGradientLayer的mask

mask 就是蒙板的意思 ,这里mask是用来裁剪的,当你用CAGradientLayer创建一个渐变的layer,然后用layer的mask 对你创建的layer进行裁剪。

mask的裁剪原理:设置为mask 的layer,按照透明度裁剪,只保留非透明部分,文字就是非透明的,因此除了文字,其他都被裁剪掉,这样就只会显示文字下面渐变层的内容,相当于留了文字的区域,让渐变层去填充文字的颜色。

这几个效果我也是参考了网上几篇优秀的文章,我把他们的好的注释也给复制了过来,所以demo里面的注释是比较详细的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载://www.greatytc.com/p/32fcadd12108 每个UIView有一个伙伴称为l...
    F麦子阅读 6,321评论 0 13
  • 每个UIView有一个伙伴称为layer,一个CALayer。UIView实际上并没有把自己画到屏幕上;它绘制本身...
    shenzhenboy阅读 3,160评论 0 17
  • 一、CAShapelayer 我们知道可以不使用图片情况下利用CGpath去构建任意形状的阴影。其实我们也可...
    小猫仔阅读 1,518评论 0 5
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 女儿要上幼儿园,学校要体检,可吓坏宝宝了,一说立马翻脸,抱着座位死活拽不下去,爸爸好不容易抱进医院,硬是扎了俩针,...
    Y恶恶阅读 174评论 0 0