iOS CoreAnimation教程 第一篇

圆角在一些App中随处可见,图层的圆角属性cornerRadius,只是影响了当前层的背景色或者border,圆角属性cornerRadius不影响子图层,圆角属性cornerRadius不影响当前层的背景图片

iOS CoreAnimation教程 第一篇_第1张图片



iOS CoreAnimation教程 第一篇_第2张图片


iOS CoreAnimation教程 第一篇_第3张图片


iOS CoreAnimation教程 第一篇_第4张图片


iOS CoreAnimation教程 第一篇_第5张图片

设置圆角的一些方法11.0可以直接有方法设置,之前的可以用贝塞尔曲线生成一个CAShaperLayer给蒙版


iOS CoreAnimation教程 第一篇_第6张图片

当然如果当前View或者图层有边框,如果剪裁会把边框剪裁掉一部分。所以直接设置生成CAShaperLayer 的边框属性


iOS CoreAnimation教程 第一篇_第7张图片


iOS CoreAnimation教程 第一篇_第8张图片

所以像饿了么的一些特效满减,准时达那样的圆角还带有颜色的效果为了避免用masksToBounds 可以直接设置layer 的背景色就可以实现圆角。

渐变一般有边框渐变和填充渐变。填充渐变又分线性渐变,径向渐变,环形渐变。

一般的线性渐变

iOS CoreAnimation教程 第一篇_第9张图片

我用设计思路讲解这几个属性

下面这几个点对应着location 的几个点,每个点对应有相应颜色就是colors。开始 结束 点就是 左上角 到右下键 范围【0-1】


iOS CoreAnimation教程 第一篇_第10张图片


iOS CoreAnimation教程 第一篇_第11张图片

边框渐变

iOS CoreAnimation教程 第一篇_第12张图片

写了一个类别实现,其实没有直接设置的方法,是先创建一个渐变,然后一个形状给渐变遮罩,最后添加到视图根图层上


iOS CoreAnimation教程 第一篇_第13张图片

径向渐变

iOS CoreAnimation教程 第一篇_第14张图片


iOS CoreAnimation教程 第一篇_第15张图片


iOS CoreAnimation教程 第一篇_第16张图片

设计的思路如下图

iOS CoreAnimation教程 第一篇_第17张图片

环形渐变


iOS CoreAnimation教程 第一篇_第18张图片
iOS CoreAnimation教程 第一篇_第19张图片

具体实现看链接

参考链接:https://github.com/ianhirschfeld/AngleGradientLayer

下面说一个综合例子,有时候我们看到一些悬浮的圆角还带有阴影渐变等特效,其实是多个图层结合处理的结果例如下面效果。


iOS CoreAnimation教程 第一篇_第20张图片


iOS CoreAnimation教程 第一篇_第21张图片

有很多地方用到了贝塞尔曲线生成路径最终变成形状,其实贝塞尔曲线很重要可以帮助生成任意形状,下面有一个复杂的例子用它生成世界地图。看效果

iOS CoreAnimation教程 第一篇_第22张图片

你可能感兴趣的:(iOS CoreAnimation教程 第一篇)