V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
v2yllhwa
V2EX  ›  程序员

material design 中这种图标平滑切换是如何实现的?

  •  1
     
  •   v2yllhwa ·
    yllhwa · 217 天前 · 2151 次点击
    这是一个创建于 217 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如链接: https://m1.material.io/motion/creative-customization.html#creative-customization-icons

    这种图标转化时候线条平滑地切换到另一个图标是如何实现的?

    给常见的转换每一个都专门做动画吗?

    6 条回复    2024-04-07 14:27:08 +08:00
    geelaw
        1
    geelaw  
       217 天前 via iPhone   ❤️ 1
    需要单独实现。如果预算不允许的话,可以做一个简单的一般动画,离开的图标缩小且旋转且变得透明,进入的图标放大且旋转且变得透明。
    narmgalaxy
        2
    narmgalaxy  
       217 天前   ❤️ 1
    这个是 svg 动画
    lisongeee
        3
    lisongeee  
       217 天前   ❤️ 1
    DeweyReed
        4
    DeweyReed  
       217 天前   ❤️ 1
    都让开,我来。
    在 Android 上叫做 Animated Vector Drawable 。最简单的形式是,有初始和结束状态的两个矢量图标,二者的绘制命令是一样的,但点的位置不一样,这样通过代码实现实现动画。还有更复杂的形式。
    整体效果很好看,但实现所需的能力超出了很多设计人员的认知。

    <https://github.com/StylingAndroid/AnimatedIcons/>
    DeweyReed
        5
    DeweyReed  
       217 天前
    realJamespond
        6
    realJamespond  
       216 天前
    lottie-js 让美工导出动画?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2663 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 04:01 · PVG 12:01 · LAX 20:01 · JFK 23:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.