• 请不要在回答技术问题时复制粘贴 AI 生成的内容
v2yllhwa
0.01D
V2EX  ›  程序员

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

  •  1
     
  •   v2yllhwa ·
    yllhwa · Apr 6, 2024 · 2958 views
    This topic created in 814 days ago, the information mentioned may be changed or developed.

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

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

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

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

    <https://github.com/StylingAndroid/AnimatedIcons/>
    DeweyReed
        5
    DeweyReed  
       Apr 6, 2024
    realJamespond
        6
    realJamespond  
       Apr 7, 2024
    lottie-js 让美工导出动画?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2887 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 49ms · UTC 15:02 · PVG 23:02 · LAX 08:02 · JFK 11:02
    ♥ Do have faith in what you're doing.