V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
forkon
V2EX  ›  问与答

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

  •  
  •   forkon · 2018-07-26 11:06:31 +08:00 · 5292 次点击
    这是一个创建于 2073 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    iBooks app 包内阴影素材

    Imgur

    iBooks 书籍的阴影效果

    Imgur


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

    Imgur

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

    30 条回复    2018-07-27 08:28:32 +08:00
    bashbot
        1
    bashbot  
       2018-07-26 11:45:38 +08:00   ❤️ 1
    IOS 不了解,但是背景图片缩放这个问题,当年做安卓时,标准解法是用 .9.png 文件,图片中用透明度给出了可缩放区域的信息。这样改变背景尺寸时,只缩放其中一部分区域。IOS 可以参考一下原理,具体实现自己找找。
    https://www.jianshu.com/p/3fd048644e3f
    Weny
        2
    Weny  
       2018-07-26 11:55:01 +08:00 via iPhone
    大概是一个点光源偏上的一个阴影 用算法算 建一个点光源 物体 底平面 推一下就行
    forkon
        3
    forkon  
    OP
       2018-07-26 11:56:13 +08:00
    @bashbot 这个方法我知道,如果苹果真是这么实现,它为什么要搞一张 732x1058 这么大的阴影图,耐人寻味……
    forkon
        4
    forkon  
    OP
       2018-07-26 11:57:42 +08:00
    @Weny 老哥你这个开销也太大了吧。
    rivt
        5
    rivt  
       2018-07-26 12:05:42 +08:00
    slicing? 我瞎猜的。。。
    forkon
        6
    forkon  
    OP
       2018-07-26 12:10:48 +08:00
    @rivt 有可能,但是不知道苹果为什么要搞一张 732x1058 这么大的阴影图来 slicing。
    falcon05
        7
    falcon05  
       2018-07-26 12:12:53 +08:00 via iPhone
    有意思
    Pudge1337
        8
    Pudge1337  
       2018-07-26 12:25:42 +08:00 via Android
    根据书籍的宽度来改变阴影的宽度?
    but0n
        9
    but0n  
       2018-07-26 12:26:08 +08:00 via iPhone
    九宫格了解一下
    alvin666
        10
    alvin666  
       2018-07-26 12:31:45 +08:00 via Android
    安卓是根据碘酒 png 来定的,但是你这个阴影图貌似不是碘酒,应该是有个类似碘酒算法处理一下的
    forkon
        11
    forkon  
    OP
       2018-07-26 12:46:19 +08:00
    @Pudge1337 那么他的高度呢

    @but0n 九宫格?
    sennes
        12
    sennes  
       2018-07-26 13:03:26 +08:00
    太长的话可以从中间切掉呀。
    Tokin
        13
    Tokin  
       2018-07-26 13:16:05 +08:00
    感觉如果是 CSS 的话,写起来很简单。。。
    littlejohnny
        14
    littlejohnny  
       2018-07-26 13:26:37 +08:00
    这种阴影可以用类似点 9 图的缩放方法做出来,安卓一直都这么做的,不过 iOS 这个怎么做的就不知道了
    bumz
        15
    bumz  
       2018-07-26 13:41:43 +08:00
    把图片分成九个部分,分别缩放即可
    whileFalse
        16
    whileFalse  
       2018-07-26 14:26:32 +08:00
    因为美术给出这张图、程序把他打包在 app 里面的时候,iBooks 还只支持标准书籍尺寸。后来需求改变,程序就只是加了个九宫格缩放,图也没变。
    mogutouer
        17
    mogutouer  
       2018-07-26 14:32:45 +08:00
    手机 CPU 都赶上几年前的电脑了,独立图形芯片都有了,算几个阴影还开销大啊,同一屏也就几个。
    forkon
        18
    forkon  
    OP
       2018-07-26 14:55:25 +08:00
    @whileFalse 这个可能性不大。

    @mogutouer 话虽这么说,但你把 iOS 里的所有的图片资源导出来看你就会发现,苹果更多的是使用图片来实现阴影而不是现画。
    zwzmzd
        19
    zwzmzd  
       2018-07-26 15:05:18 +08:00 via iPhone
    九宫格显示边缘,太常见的做法了
    Microi
        20
    Microi  
       2018-07-26 15:07:53 +08:00
    关注一下。
    hahasong
        21
    hahasong  
       2018-07-26 15:48:24 +08:00
    ios 不能用 constrait 做缩放就好了吗。跟碘酒一样原理。不同的是碘酒要写 xml。autolayout 直接拖就可以了
    canxden
        22
    canxden  
       2018-07-26 18:06:32 +08:00   ❤️ 1
    UIImage 有一个切割的方法叫 resizableImageWithCapInsets, 类似安卓的.9 只要设置一个 edge 就好了, 可以纯代码实现, 而且中心的部分可以通过 resizingMode 设置, 选择是拉伸还是填充模式. 聊天的气泡也是类似的方法, 把图片导入工程 xcassets 可以直接用 Show Slicing 进行切割拉伸.
    newbieo0O
        23
    newbieo0O  
       2018-07-26 18:17:51 +08:00
    原来是用图来实现的。我一直以为有 CSS 类似的 shadow 属性呢
    persimmon
        24
    persimmon  
       2018-07-26 18:18:28 +08:00
    先把阴影素材缩放到正确比例,再垫下去?
    zhudou
        25
    zhudou  
       2018-07-26 18:38:32 +08:00
    iOS 开发中可以设置图片只拉伸中间部分,圆角处保持原样高清,实现也很简单。
    xhyzidane
        26
    xhyzidane  
       2018-07-26 19:51:07 +08:00
    CSS 中看过有类似的处理方法,图片做的这么大是因为要考虑容器需要兼容的最大尺寸。不了解客户端的处理方法不知道是不是一样
    darkcode
        27
    darkcode  
       2018-07-26 20:06:27 +08:00
    @zhudou 应该是你说的这样
    forkon
        28
    forkon  
    OP
       2018-07-26 21:44:04 +08:00
    @canxden #22
    @zhudou #25

    不知道是不是还有其它 API 可以实现这样的效果,我的疑点在这张图片的尺寸上,一般来说用于局部拉伸显示的图片尺寸都不大,这张图的分辨率居然达到 735x1058,远大于实际需要用到的尺寸。
    在拉伸之前还需要把它缩到更小的尺寸?
    zhudou
        29
    zhudou  
       2018-07-26 21:49:35 +08:00
    @forkon #28 也许同时可以用来当占位图吧- -
    bashbot
        30
    bashbot  
       2018-07-27 08:28:32 +08:00
    @forkon #28
    这个值肯定是有来由的,比如 #29 说的占位,我估计是设计稿中就这么大吧,美术出图一般不会额外做缩放给研发用的,研发可能拿来就用了,没有自己做缩放。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3571 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 04:46 · PVG 12:46 · LAX 21:46 · JFK 00:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.