百思不得解:苹果到底是如何实现这样的阴影效果?

2018-07-26 11:06:31 +08:00
 forkon

最近在尝试实现 iOS 12 里 iBooks 的书籍展示效果。在研究 iBooks app 包内资源的时候发现一张阴影图片,估计苹果就是用这张图片来实现书籍的阴影效果的。

iBooks app 包内阴影素材

iBooks 书籍的阴影效果


我想到的解决方法是将这张阴影图调成适当的尺寸然后放在书籍封面图之后,但是这种方法有个问题——对于不同尺寸的书籍封面图阴影的半径也各不一样(如下图所示),跟 iBooks 上面的效果不一样。

那么苹果到底是如何用上面那张阴影图来实现书籍的阴影? 望各位大神指点,不胜感激!

5346 次点击
所在节点    问与答
30 条回复
hahasong
2018-07-26 15:48:24 +08:00
ios 不能用 constrait 做缩放就好了吗。跟碘酒一样原理。不同的是碘酒要写 xml。autolayout 直接拖就可以了
canxden
2018-07-26 18:06:32 +08:00
UIImage 有一个切割的方法叫 resizableImageWithCapInsets, 类似安卓的.9 只要设置一个 edge 就好了, 可以纯代码实现, 而且中心的部分可以通过 resizingMode 设置, 选择是拉伸还是填充模式. 聊天的气泡也是类似的方法, 把图片导入工程 xcassets 可以直接用 Show Slicing 进行切割拉伸.
newbieo0O
2018-07-26 18:17:51 +08:00
原来是用图来实现的。我一直以为有 CSS 类似的 shadow 属性呢
persimmon
2018-07-26 18:18:28 +08:00
先把阴影素材缩放到正确比例,再垫下去?
zhudou
2018-07-26 18:38:32 +08:00
iOS 开发中可以设置图片只拉伸中间部分,圆角处保持原样高清,实现也很简单。
xhyzidane
2018-07-26 19:51:07 +08:00
CSS 中看过有类似的处理方法,图片做的这么大是因为要考虑容器需要兼容的最大尺寸。不了解客户端的处理方法不知道是不是一样
darkcode
2018-07-26 20:06:27 +08:00
@zhudou 应该是你说的这样
forkon
2018-07-26 21:44:04 +08:00
@canxden #22
@zhudou #25

不知道是不是还有其它 API 可以实现这样的效果,我的疑点在这张图片的尺寸上,一般来说用于局部拉伸显示的图片尺寸都不大,这张图的分辨率居然达到 735x1058,远大于实际需要用到的尺寸。
在拉伸之前还需要把它缩到更小的尺寸?
zhudou
2018-07-26 21:49:35 +08:00
@forkon #28 也许同时可以用来当占位图吧- -
bashbot
2018-07-27 08:28:32 +08:00
@forkon #28
这个值肯定是有来由的,比如 #29 说的占位,我估计是设计稿中就这么大吧,美术出图一般不会额外做缩放给研发用的,研发可能拿来就用了,没有自己做缩放。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/474287

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX