关于动画,Lottie

Lottie,是一个支持web、 Android、iOS 以及 ReactNative、可以利用json实现动画效果的库。

1、安装Bodymovin

通过在AE上安装Bodymovin 插件,可以将 AE 中制作好的动画导出成一个 json 文件。

1、 下载bodymovin/bodymovin,在项目目录的“/build/extension”下找到“bodymovin.zxp”文件
2、 下载安装 zxp-installer(aescript+aeplugins zxp installer.exe)
3、 在zxp-installer中选择“File”>“Open”,打开“bodymovin.zxp”文件,会自动开始安装
4、 在AE中点击“窗口”>“扩展”>“Bodymovin”菜单项,就可以打开Bodymovin的界面使用插件了。

2、android端使用

airbnb/lottie-android

1、添加依赖

dependencies {  
 compile 'com.airbnb.android:lottie:2.0.0-beta4'
}

2、简单使用


1、其中json文件放在 app/src/main/assets目录下
2、支持API14及以上的版本

关于动画,Lottie_第1张图片
android上的简单效果

3、web端使用

在bodymovin/bodymovin的项目下的“\build\player\bodymovin.js”,得到js文件




   
   


   
关于动画,Lottie_第2张图片
web端使用

注意:
1、使用bodymovin.js时,不支持file协议,不能在本地运行,可以建一个本地服务器,运行(Tomcat安装及配置教程);
2、运行ipconfig得到内网、
3、在使用AE导出json文件时,也可以同时生成一个测试环境的js文件,暂替bodymovin.js

关于动画,Lottie_第3张图片
不支持 flie

链接: http://pan.baidu.com/s/1gf65Ckz 密码: cfr3

参考:大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画、如何看待 Airbnb 新发布的 Lottie?、从json文件到炫酷动画-Lottie实现思路和源码分析、Lottie的使用及原理浅析

你可能感兴趣的:(关于动画,Lottie)