|
|
51CTO旗下网站
|
|
移动端

在iOS里 100% 还原 Sketch 实现的阴影效果

Sketch 是 APP 设计的神器,大部分设计师都选择它作为 APP 界面的设计工具。在 Sketch 里设置一个阴影,请看正文。

作者:Codium来源:掘金|2019-11-21 14:36

Sketch 是 APP 设计的神器,大部分设计师都选择它作为 APP 界面的设计工具。

在 Sketch 里设置一个阴影,效果图和参数如下:

在iOS里 100% 还原 Sketch 实现的阴影效果

(Sketch 里的效果)

在iOS里 100% 还原 Sketch 实现的阴影效果

(Sketch 里的阴影参数)

开发实现

在 iOS 里实现阴影的方式是使用 UIView 的 layer 属性。

layer 里与阴影有关的设置是以下几个属性:

  • shadowPath
  • shadowColor
  • shadowOpacity
  • shadowOffset
  • shadowRadius

与 Sketch 里阴影参数的对应关系是:

  • shadowPath ~> 阴影的范围
  • shadowColor ~> 阴影的颜色
  • shadowOpacity ~> 阴影的透明度
  • shadowOffset ~> X 和 Y
  • shadowRadius ~> 阴影的模糊

在iOS里 100% 还原 Sketch 实现的阴影效果

(layer 属性和 Sketch 阴影的对应关系)

根据上图的对应关系,在代码里实现就是(shadowView 的大小是 100x100):

  1. let layer = shadowView.layer 
  2. // spread 对应 Sketch 里阴影的 “扩展”,值是 10 
  3. let spread: CGFloat = 10 
  4. var rect = CGRect(x: 0, y: 0, width: 100, height: 100); 
  5. rect = rect.insetBy(dx: -spread, dy: -spread) 
  6.  
  7. layer.shadowPath = UIBezierPath(rect: rect).cgPath 
  8. // 颜色是黑色( #000000 ) 
  9. layer.shadowColor = UIColor.black.cgColor 
  10. // alpha 50 
  11. layer.shadowOpacity = 0.5 
  12. // X: 0  Y: 10 
  13. layer.shadowOffset = CGSize(width: 0, height: 10) 
  14. // 对应 Sketch 里阴影的 “模糊” 的设置,值是 20 / 2 = 10 
  15. layer.shadowRadius = 10 

以上代码运行的效果如下:

在iOS里 100% 还原 Sketch 实现的阴影效果

(实现效果)

100% 还原了 Sketch 的设计,完美了。

值得一提的是:layer 阴影和圆角是可以共存的,而且阴影路径也需要考虑圆角的值。

为了使用方便,为 CALayer 添加一个设置阴影的扩展:

  1. extension CALayer { 
  2.     func skt_setShadow(color: UIColor? = .black, 
  3.                        alpha: CGFloat = 0.5, 
  4.                        x: CGFloat = 0, y: CGFloat = 2, 
  5.                        blur: CGFloat = 4, 
  6.                        spread: CGFloat = 0) { 
  7.         shadowOffset = CGSize(width: x, height: y) 
  8.         shadowRadius = blur * 0.5 
  9.         shadowColor = color?.cgColor 
  10.         shadowOpacity = Float(alpha) 
  11.  
  12.         let rect = bounds.insetBy(dx: -spread, dy: -spread) 
  13.         let path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius) 
  14.         shadowPath = path.cgPath 
  15.     } 

使用很简单,传入的值和 Sketch 里的阴影参数一样就行:

  1. layer.skt_setShadow(color: .black, alpha: 0.5, 
  2.                     x: 0, y: 10,  
  3.                     blur: 20,  
  4.                     spread: 10) 

【编辑推荐】

  1. 用于 APP 测试的 10 大 Android 设备
  2. 跨平台移动端框架UniApp的应用实践
  3. 如何正确优雅地给APP版本号命名?
  4. 时代进步or缩水?盘点那些即将消失的APP
  5. iPhone 终于能随意修改 App 图标啦
【责任编辑:未丽燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

骨干网与数据中心建设案例

骨干网与数据中心建设案例

高级网工必会
共20章 | 捷哥CCIE

403人订阅学习

中间件安全防护攻略

中间件安全防护攻略

4类安全防护
共4章 | hack_man

151人订阅学习

CentOS 8 全新学习术

CentOS 8 全新学习术

CentOS 8 正式发布
共16章 | UbuntuServer

291人订阅学习

读 书 +更多

精通Spring 2.0

本书是关于Spring 2.0的权威教程,是Java/Java EE开发者必备的参考书。本书详尽系统地介绍了Java EE的基础知识、Spring 2.0的各种功能,以...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微