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






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

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


所以像饿了么的一些特效满减,准时达那样的圆角还带有颜色的效果为了避免用masksToBounds 可以直接设置layer 的背景色就可以实现圆角。
渐变一般有边框渐变和填充渐变。填充渐变又分线性渐变,径向渐变,环形渐变。
一般的线性渐变

我用设计思路讲解这几个属性
下面这几个点对应着location 的几个点,每个点对应有相应颜色就是colors。开始 结束 点就是 左上角 到右下键 范围【0-1】


边框渐变

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

径向渐变



设计的思路如下图

环形渐变


具体实现看链接
参考链接:https://github.com/ianhirschfeld/AngleGradientLayer
下面说一个综合例子,有时候我们看到一些悬浮的圆角还带有阴影渐变等特效,其实是多个图层结合处理的结果例如下面效果。


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

网友评论