Lottie-移动动画效果框架

Posted 2022-12-09 freeCodeSunny

Lottie简介

       Airbnb开源了一个名叫Lottie的动画库, 他同时支持ios， android， react_native。

Android : https://github.com/airbnb/lottie-android

iOS : https://github.com/airbnb/lottie-ios

React Native : https://github.com/airbnb/lottie-react-native

       可以实现各种炫酷的动画效果，Lottie解析和渲染通过AE上BodyMovin插件导出的json文件，这里我们就拷贝几个官方效果图， 来感受一下炫酷的动画效果：

       其他的效果可以查看官方样例，lottie-android git地址。除了上述效果还可以控制播放进度等效果。

       他主要是采用Canvas来draw动画。 因此效果比gif， AnimationDrawable效果要好很多， 也更流畅，不过当前版本他是不能交互的，只能进行动画展示。
       使用流程大致如下：

       目前，Lottie支持路径修剪，蒙版、遮盖等操作。此外还有一个可选的缓存机制，对那些频繁使用的东西能够更快加载。这款应用的目标就是帮助开发者和动画师能够更轻松的为应用创建动画，从而在整体上提升互动因素。

环境安装

       工欲善其事必先利其器，要使用Lottie进行动画开发，首先要AE制作动画，然后用bodymovin导出动画的json描述，为了体验该动画，你可能需要UI设计师跟你一起合作，不过作为程序员最好是能自己制作简单的进行体验。

AE安装

       这里给出mac版的ae安装方式，不过需要注意的是一定要按照他给定的方式进行安装AE安装与破解

主要步骤是先下载对应的dmg， 之后点击dmg打开后，会出现build目录，点击install.pkg进行安装
其次下载Adobe Zii cc2017.zip，解压后双击Adobe Zii.app，之后出现patch or drag， 等待completed就ok了

ZXP installer

       AE安装完成后，需要安装ZXP install，zxp是一个AE插件与脚本安装工具， 需要他进行bodyMovin安装，下载链接， 点击install出现如下界面：

       选择cmd+o可以进行插件安装。

bodymovin

       bodymovin是一个插件，一个将AE合成转换为记录动画信息的JSON文件的插件， 链接，主要下载build-extension-bodymovin_zxp， 该格式就是zxp安装支持的格式。下载完成后：

点击zxp install，弹出安装界面，选择cmd+ o， 选择下载的bodymovin.zxp
重启AE

生成json

       环境安装好以后，打开AE，选择一个aep文件，该文件可以从官方样例中拷贝：

• open project选择一个aep，可能会因为版本不同，出现很多提示，可以都选择ok
• 选择Window-Extension-bodymovin，出现如下界面

       根据制作的aep不同，可能会出现多个列表，可以选中其中一个列表，点击。。。指定输出路径

• 点击Render按钮，生成对应的json，可能还会生成images文件夹，制作中使用的图片都会导出到images文件中

需要注意的事，生成后的json文件可能会很大，与aep制作相关，尤其是文字多的情况下，可能生成的json文件会达到好几M

实例

       所有的准备工作做完后，我们来实际使用一下，将之前生成的json和images文件都拷贝到工程中的assert文件夹中。这里主要是Android工程，在布局界面中指定json文件与images文件，代码如下：

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:lottie_autoPlay="true"
        android:scaleType="centerCrop"
        app:lottie_fileName="splash.json"
        app:lottie_imageAssetsFolder="images"
        app:lottie_loop="true"/>

       需要注意的事，需要指定imageAssetsFolder来指定图片路径，loop表示动画是否一直循环，autoPlay表示自动播放。

       app下的build.gradle中添加如下配置：

dependencies 
    compile 'com.airbnb.android:lottie:2.0.0-beta3'

       动画就可以运行了。

后记

       目前为止只是进行了尝试，遇到了如下问题：

1：如果制作aep中没有设置背景颜色，默认背景都是#ffffff，可以在json中搜索，改为自己需要的颜色
2：界面为完整适配，当前做了一个aep，导出750*1334大小aep工程，在Android手机上未占满整个屏幕，他是根据高宽自动缩放的