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

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

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

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

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

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

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

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