吊炸天的项目 — Lottie学习研究(入门篇)

Aribnb推出的复杂动画解决方案

Posted by 晓晨DEV on February 8, 2017

Lottie — 快速生成复杂 Android 、iOS 、React Native 动画的解决方案。

今年10月1的时候我开了个AnimJsonView的项目,旨在用json来描述Android动画,考虑用 React Native 实现个编辑器,来快速生成 ANDROID 动画,后来因为一直忙忙忙就搁置了,直到看到了 lottie 才感叹大厂果然 NB ,虽然思路差不多都是用 Json 来描述动画,不过人家直接从 AE 上手,用 AE 就能生成描述动画的josn文件,还同时支持 Android iOS ReactNative 简直吊炸天,而且是 Native 的实现对比 gif 肯定要好很多,赶紧去看看学习一下。

地址

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

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

ReactNative : https://github.com/airbnb/lottie-react-native

命名

Lottie 是以一位德国电影导演名字命名,他是德国剪影动画的先锋。

效果图

上几张Gitub的效果图

Example1

Example2

Example3

Community

Example4

官方提供了一个 Sample App,这玩意也算是个小的效果预览器,你可以把你sd卡里面 json 动画文件显示出来。

地址这里(自己推墙):https://play.google.com/store/apps/details?id=com.airbnb.lottie

开始

阅读本文的主要是程序员群体,首先你要有一个 AE 自己搞定吧。 这个库从 AE 生成 json 文件靠的是一个插件bodymovin。

地址在这里:https://github.com/bodymovin/bodymovin

我们按照文档推荐的第一种方式安装上这个插件,反正也没用过 AE …… 本人是 mac,windows 用户自行折腾下,其他安装方法参考 bodymovin 主页就行了:

  1. 下载压缩包,点击github的download zip

  2. 安装ZXP INstaller http://aescripts.com/learn/zxp-installer/

  3. 解压压缩包,找到‘/build/extension’ 里面的后缀名是.zxp 文件用 zxp installer 打开,安装上去。

这时候打开 ae 发现菜单里 windows -> extensions 里面有bodymovin 就是安装成功了。

接下来我就带领大家来玩一下这个项目。 作为一个程序员 AE 我是不怎么会的,但是我们可以找一个现成的文件.

  1. 进入 https://material.uplabs.com 选择 Download 选择 -> view all -> 在tools这一栏里面选择 After effects 然后选择一个免费的项目下载下来 用ae打开。 uplabs

  2. 然后选择 windows -> extensions -> bodymovin 出现如下画面。 bodymovin

  3. 我选择的项目是 https://material.uplabs.com/posts/cloase-animation menu变换按钮

  4. 选择2个动画设置好存储路径 然后render 然后就生成了这个json文件。

render

Android 程序员出手了

有了这个json文件,我们来做一个简单的控件吧!

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/anim_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:lottie_fileName="menu.json"
        app:lottie_loop="false"
        app:lottie_autoPlay="false"
        />
        

mAnimationView = (LottieAnimationView) findViewById(R.id.anim_view);
        mAnimationView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mAnimationView.playAnimation();

            }
        });

这个项目并不是所有的AE工程都能完美的转换的,有一些AE的特性是不支持的。这一篇就先说到这里,下一篇我们来具体学习点更加复杂问题。

我是晓晨DEV 欢迎关注我的公众号 晓晨Android组 一起讨论学习Android开发

openwx


分享