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