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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2310 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

iBooks app 包内阴影素材

Imgur

iBooks 书籍的阴影效果

Imgur

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

Imgur

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

阴影

ibooks

书籍

imgur

30 条回复 • 2018-07-27 08:28:32 +08:00

bashbot

2018-07-26 11:45:38 +08:00

IOS 不了解，但是背景图片缩放这个问题，当年做安卓时，标准解法是用 .9.png 文件，图片中用透明度给出了可缩放区域的信息。这样改变背景尺寸时，只缩放其中一部分区域。IOS 可以参考一下原理，具体实现自己找找。
https://www.jianshu.com/p/3fd048644e3f

Weny

2018-07-26 11:55:01 +08:00 via iPhone

大概是一个点光源偏上的一个阴影用算法算建一个点光源物体底平面推一下就行

forkon

2018-07-26 11:56:13 +08:00

@bashbot 这个方法我知道，如果苹果真是这么实现，它为什么要搞一张 732x1058 这么大的阴影图，耐人寻味……

forkon

2018-07-26 11:57:42 +08:00

@Weny 老哥你这个开销也太大了吧。

rivt

2018-07-26 12:05:42 +08:00

slicing? 我瞎猜的。。。

forkon

2018-07-26 12:10:48 +08:00

@rivt 有可能，但是不知道苹果为什么要搞一张 732x1058 这么大的阴影图来 slicing。

falcon05

2018-07-26 12:12:53 +08:00 via iPhone

有意思

Pudge1337

2018-07-26 12:25:42 +08:00 via Android

根据书籍的宽度来改变阴影的宽度？

but0n

2018-07-26 12:26:08 +08:00 via iPhone

九宫格了解一下

alvin666

2018-07-26 12:31:45 +08:00 via Android

安卓是根据碘酒 png 来定的，但是你这个阴影图貌似不是碘酒，应该是有个类似碘酒算法处理一下的

forkon

2018-07-26 12:46:19 +08:00

@Pudge1337 那么他的高度呢

@but0n 九宫格？

sennes

2018-07-26 13:03:26 +08:00

太长的话可以从中间切掉呀。

Tokin

2018-07-26 13:16:05 +08:00

感觉如果是 CSS 的话，写起来很简单。。。

littlejohnny

2018-07-26 13:26:37 +08:00

这种阴影可以用类似点 9 图的缩放方法做出来，安卓一直都这么做的，不过 iOS 这个怎么做的就不知道了

bumz

2018-07-26 13:41:43 +08:00

把图片分成九个部分，分别缩放即可

whileFalse

2018-07-26 14:26:32 +08:00

因为美术给出这张图、程序把他打包在 app 里面的时候，iBooks 还只支持标准书籍尺寸。后来需求改变，程序就只是加了个九宫格缩放，图也没变。

mogutouer

2018-07-26 14:32:45 +08:00

手机 CPU 都赶上几年前的电脑了，独立图形芯片都有了，算几个阴影还开销大啊，同一屏也就几个。

forkon

2018-07-26 14:55:25 +08:00

@whileFalse 这个可能性不大。

@mogutouer 话虽这么说，但你把 iOS 里的所有的图片资源导出来看你就会发现，苹果更多的是使用图片来实现阴影而不是现画。

zwzmzd

2018-07-26 15:05:18 +08:00 via iPhone

九宫格显示边缘，太常见的做法了

Microi

2018-07-26 15:07:53 +08:00

关注一下。

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 进行切割拉伸.