为什么需要动效落地?当你听到这些声音:希望你的动效快点落地、开发实现动效效果不好、你的动效到底怎么落地?你动效牛逼有啥用,开发不会做……

    【动效落地】Svga, Lottie, Apng及动效标注 - 图1

    所以要实现动效果落地。

    文章目录:

    1. 格式对比

    2. Gif 导出

    3. Apng 安装使用

    4. Lottie 安装使用 / 召回

    5. SVGA 安装使用、效果支持

    6. PS、sketch、 AI 导入 AE

    7. 动效标注文档

    8. 格式对比

    【动效落地】Svga, Lottie, Apng及动效标注 - 图2

    【动效落地】Svga, Lottie, Apng及动效标注 - 图3

    【动效落地】Svga, Lottie, Apng及动效标注 - 图4

    【动效落地】Svga, Lottie, Apng及动效标注 - 图5

    【动效落地】Svga, Lottie, Apng及动效标注 - 图6

    1. Gif 导出

    【动效落地】Svga, Lottie, Apng及动效标注 - 图7

    【动效落地】Svga, Lottie, Apng及动效标注 - 图8

    【动效落地】Svga, Lottie, Apng及动效标注 - 图9

    【动效落地】Svga, Lottie, Apng及动效标注 - 图10

    【动效落地】Svga, Lottie, Apng及动效标注 - 图11

    【动效落地】Svga, Lottie, Apng及动效标注 - 图12

    【动效落地】Svga, Lottie, Apng及动效标注 - 图13

    【动效落地】Svga, Lottie, Apng及动效标注 - 图14

    1. Apng 安装使用

    【动效落地】Svga, Lottie, Apng及动效标注 - 图15

    【动效落地】Svga, Lottie, Apng及动效标注 - 图16

    【动效落地】Svga, Lottie, Apng及动效标注 - 图17

    【动效落地】Svga, Lottie, Apng及动效标注 - 图18

    【动效落地】Svga, Lottie, Apng及动效标注 - 图19

    【动效落地】Svga, Lottie, Apng及动效标注 - 图20

    1. Lottie 安装使用 / 召回

    【动效落地】Svga, Lottie, Apng及动效标注 - 图21

    啊,这迷人的女人,让我想起了洛丽塔~~

    【动效落地】Svga, Lottie, Apng及动效标注 - 图22

    【动效落地】Svga, Lottie, Apng及动效标注 - 图23

    【动效落地】Svga, Lottie, Apng及动效标注 - 图24

    【动效落地】Svga, Lottie, Apng及动效标注 - 图25

    【动效落地】Svga, Lottie, Apng及动效标注 - 图26

    【动效落地】Svga, Lottie, Apng及动效标注 - 图27

    【动效落地】Svga, Lottie, Apng及动效标注 - 图28

    【动效落地】Svga, Lottie, Apng及动效标注 - 图29

    【动效落地】Svga, Lottie, Apng及动效标注 - 图30

    【动效落地】Svga, Lottie, Apng及动效标注 - 图31

    1. SVGA 安装使用、效果支持

    【动效落地】Svga, Lottie, Apng及动效标注 - 图32

    【动效落地】Svga, Lottie, Apng及动效标注 - 图33

    【动效落地】Svga, Lottie, Apng及动效标注 - 图34

    【动效落地】Svga, Lottie, Apng及动效标注 - 图35

    【动效落地】Svga, Lottie, Apng及动效标注 - 图36

    【动效落地】Svga, Lottie, Apng及动效标注 - 图37

    【动效落地】Svga, Lottie, Apng及动效标注 - 图38

    【动效落地】Svga, Lottie, Apng及动效标注 - 图39

    【动效落地】Svga, Lottie, Apng及动效标注 - 图40

    【动效落地】Svga, Lottie, Apng及动效标注 - 图41

    【动效落地】Svga, Lottie, Apng及动效标注 - 图42

    1. PS、sketch、 AI 导入 AE

    【动效落地】Svga, Lottie, Apng及动效标注 - 图43

    【动效落地】Svga, Lottie, Apng及动效标注 - 图44

    【动效落地】Svga, Lottie, Apng及动效标注 - 图45

    【动效落地】Svga, Lottie, Apng及动效标注 - 图46

    【动效落地】Svga, Lottie, Apng及动效标注 - 图47

    【动效落地】Svga, Lottie, Apng及动效标注 - 图48

    【动效落地】Svga, Lottie, Apng及动效标注 - 图49

    【动效落地】Svga, Lottie, Apng及动效标注 - 图50

    【动效落地】Svga, Lottie, Apng及动效标注 - 图51

    1. 动效标注文档

    【动效落地】Svga, Lottie, Apng及动效标注 - 图52

    【动效落地】Svga, Lottie, Apng及动效标注 - 图53

    【动效落地】Svga, Lottie, Apng及动效标注 - 图54

    【动效落地】Svga, Lottie, Apng及动效标注 - 图55

    部分来源:

    https://lottiefiles.com/

    https://blog.csdn.net/ityangjun/article/details/68946596

    http://svga.io/index.html

    https://jfson.github.io/2018/01/08/41-anim/

    https://juejin.im/entry/6844903507170967560

    https://zhuanlan.zhihu.com/p/72637097

    https://new.qq.com/omn/20200827/20200827A04QSP00.html

    https://blog.csdn.net/gutaocslg/article/details/79908414

    https://www.ui.cn/detail/460267.html

    https://www.ui.cn/detail/559342.html?nopop=1
    https://www.shejidaren.com/ui-dongxiao-luodi.html