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

想知道 Ant Design 首页的这些 SVG 动画可以用什么软件导出生成

  •  
  •   cbais7890 · 2018-01-25 22:01:09 +08:00 · 7277 次点击
    这是一个创建于 2492 天前的主题,其中的信息可能已经有所发展或是发生改变。
    https://ant.design/index-cn
    https://pro.ant.design/index-cn

    都十分炫酷,是用 AE 导出的么?
    15 条回复    2020-02-24 12:40:51 +08:00
    lwbjing
        1
    lwbjing  
       2018-01-25 22:04:39 +08:00
    代码一行一行敲出来的,你是不是不信?
    cbais7890
        2
    cbais7890  
    OP
       2018-01-25 22:07:10 +08:00
    @lwbjing #1 只是感觉他们团队会用更高效的方式干这件事~
    Pudge1337
        3
    Pudge1337  
       2018-01-25 22:09:04 +08:00 via Android
    在 AE 用 bodymovin 插件导出 JSON 可以实现一些比较炫酷动画,楼主可以去 https://airbnb.design/lottie/看看
    cbais7890
        4
    cbais7890  
    OP
       2018-01-25 22:11:46 +08:00
    @Pudge1337 #3 我记得以前 Lottie 这个项目导出来的是 CANVAS,原来现在已经可以生成效果这么好的 SVG 了。感谢分享,看来是时候深入学一波 AE 了。
    Pudge1337
        5
    Pudge1337  
       2018-01-25 22:11:55 +08:00 via Android
    我也做过几个小动画在 Lottie preview 里看到的确是矢量的,而且还原度很高,感觉很炫酷。。就是还没学会怎么在 HTML 里引用。。😄
    cbais7890
        6
    cbais7890  
    OP
       2018-01-25 22:19:01 +08:00   ❤️ 1
    @Pudge1337 #5 搜到了这样一个教程 https://zhuanlan.zhihu.com/p/26304609 应该对你有帮助
    oness
        7
    oness  
       2018-01-26 09:27:50 +08:00
    一打开网页,发现 chrome 的 cpu 35%+。。这谁敢用啊
    oness
        8
    oness  
       2018-01-26 09:30:31 +08:00
    好像还有内存泄漏,以 0.5M/每秒 速度增加
    cbais7890
        9
    cbais7890  
    OP
       2018-01-26 14:51:43 +08:00
    @oness #7 没有这么严重吧,CPU 占用肯定是有,我这边最多到 10%
    vx2e
        10
    vx2e  
       2018-01-26 16:31:25 +08:00
    Animate CC - adobe 出品;可以导出 canvas 动画。
    likuku
        11
    likuku  
       2018-01-27 00:32:49 +08:00
    可能 @cbais7890 电脑的 CPU 性能是 @oness 的 3 倍有于...
    oness
        12
    oness  
       2018-01-27 13:22:12 +08:00
    i5 6500 的三倍是哪个?
    murriouz
        13
    murriouz  
       2018-01-29 10:33:06 +08:00
    CPU 占用确实高,内存泄漏也确实观察到了

    [email protected] 一打开就占用 50% 上下
    dalieba
        14
    dalieba  
       2018-07-03 17:27:41 +08:00 via Android
    Inkscape 有动画插件
    wwwwzf
        15
    wwwwzf  
       2020-02-24 12:40:51 +08:00
    基于 ae+插件,我实现了一个效果
    http://code.z01.com/lottie/


    名词解解释


    AE:adobe After Effects,adobe 公司的专业视频制作软件。



    Bodymovin:是一个 AE 的插件,它可以把动画直接输出成代码,直接给程序员使用放在各个终端上使用,是 airbnb 团队开发的一个插件,其原理是将动画转成 json 文件格式,然后通过 JS 程序输出,转换成 svg、canvas 或 html5 动画。



    Lottie:是集成 BodyMovin 一系列服务的总称,其官网是 https://airbnb.design/lottie/
    你可以称这一系列技术为 lottie 库,其官网如此介绍:

    Lottie is the native engine that Airbnb’s awesome team built. It uses Bodymovin as the animation exporter and is the ideal complement for getting animations to play natively everywhere.

    它是一款由 Airbnb 团队开发出的,完美地依托 Bodymovin 作为动画输出、帮助我们在项目中更自然便捷呈现动画的原生引

    完整教程:
    https://www.z01.com/blog/products/3524.shtml
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2813 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 11:54 · PVG 19:54 · LAX 03:54 · JFK 06:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.