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


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

那么苹果到底是如何用上面那张阴影图来实现书籍的阴影? 望各位大神指点,不胜感激!
1 bashbot 2018 年 7 月 26 日 IOS 不了解,但是背景图片缩放这个问题,当年做安卓时,标准解法是用 .9.png 文件,图片中用透明度给出了可缩放区域的信息。这样改变背景尺寸时,只缩放其中一部分区域。IOS 可以参考一下原理,具体实现自己找找。 https://www.jianshu.com/p/3fd048644e3f |
2 Weny 2018 年 7 月 26 日 via iPhone 大概是一个点光源偏上的一个阴影 用算法算 建一个点光源 物体 底平面 推一下就行 |
5 rivt 2018 年 7 月 26 日 slicing? 我瞎猜的。。。 |
7 GG668v26Fd55CP5W 2018 年 7 月 26 日 via iPhone 有意思 |
8 Pudge1337 2018 年 7 月 26 日 via Android 根据书籍的宽度来改变阴影的宽度? |
9 but0n 2018 年 7 月 26 日 via iPhone 九宫格了解一下 |
10 alvin666 2018 年 7 月 26 日 via Android 安卓是根据碘酒 png 来定的,但是你这个阴影图貌似不是碘酒,应该是有个类似碘酒算法处理一下的 |
12 sennes 2018 年 7 月 26 日 太长的话可以从中间切掉呀。 |
13 Tokin 2018 年 7 月 26 日 感觉如果是 CSS 的话,写起来很简单。。。 |
14 littlejohnny 2018 年 7 月 26 日 这种阴影可以用类似点 9 图的缩放方法做出来,安卓一直都这么做的,不过 iOS 这个怎么做的就不知道了 |
15 bumz 2018 年 7 月 26 日 把图片分成九个部分,分别缩放即可 |
16 whileFalse 2018 年 7 月 26 日 因为美术给出这张图、程序把他打包在 app 里面的时候,iBooks 还只支持标准书籍尺寸。后来需求改变,程序就只是加了个九宫格缩放,图也没变。 |
17 mogutouer 2018 年 7 月 26 日 手机 CPU 都赶上几年前的电脑了,独立图形芯片都有了,算几个阴影还开销大啊,同一屏也就几个。 |
18 forkon OP |
19 zwzmzd 2018 年 7 月 26 日 via iPhone 九宫格显示边缘,太常见的做法了 |
20 Microi 2018 年 7 月 26 日 关注一下。 |
21 hahasong 2018 年 7 月 26 日 ios 不能用 constrait 做缩放就好了吗。跟碘酒一样原理。不同的是碘酒要写 xml。autolayout 直接拖就可以了 |
22 canxden 2018 年 7 月 26 日 UIImage 有一个切割的方法叫 resizableImageWithCapInsets, 类似安卓的.9 只要设置一个 edge 就好了, 可以纯代码实现, 而且中心的部分可以通过 resizingMode 设置, 选择是拉伸还是填充模式. 聊天的气泡也是类似的方法, 把图片导入工程 xcassets 可以直接用 Show Slicing 进行切割拉伸. |
23 newbieo0O 2018 年 7 月 26 日 原来是用图来实现的。我一直以为有 CSS 类似的 shadow 属性呢 |
24 persimmon 2018 年 7 月 26 日 先把阴影素材缩放到正确比例,再垫下去? |
25 zhudou 2018 年 7 月 26 日 iOS 开发中可以设置图片只拉伸中间部分,圆角处保持原样高清,实现也很简单。 |
26 xhyzidane 2018 年 7 月 26 日 CSS 中看过有类似的处理方法,图片做的这么大是因为要考虑容器需要兼容的最大尺寸。不了解客户端的处理方法不知道是不是一样 |
28 forkon OP |