当前位置: 萬仟网 > IT编程>移动开发>IOS > 在 iOS 里 100% 还原 Sketch 实现的阴影效果

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

2020年05月07日  | 萬仟网IT编程  | 我要评论

还原不了设计师视觉稿的开发者不是一个合格的页面仔。

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

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

 

 

 

 

开发实现

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

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

  • shadowpath
  • shadowcolor
  • shadowopacity
  • shadowoffset
  • shadowradius

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

  • shadowpath ~> 阴影的范围
  • shadowcolor ~> 阴影的颜色
  • shadowopacity ~> 阴影的透明度
  • shadowoffset ~> x 和 y
  • shadowradius ~> 阴影的模糊

 

 

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

 

 

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

 

 

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

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

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

 

 

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


 

推荐

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
Copyright © 2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com