转-Lottie开源动画库介绍与使用示例

转-Lottie开源动画库介绍与使用示例

Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就像发现的新大陆一般.可以说,Lottie的出现,将极大地解放Android/iOS工程师于无尽的编写原生自定义动画的工作中.

直接说Lottie的好处

直接使用 AE 上的动画文件导出 json 文件就可以实现各种炫酷特效

当我们的项目中用GIF实现一些复杂的视觉效果的时候,会遇到许多的问题.比如,GIF的文件过于庞大,并且对于不同分辨率设备的适配存在不便,并且Gif格式的色深问题是一个死穴.

比如下面这几个动画效果:

这里写图片描述

还有这些:

这里写图片描述

怎么样?这些可不是简单的移动、缩放、旋转就搞得定的,可能有些人思考了之后大概有以下实现思路:

使用 Gif,这种方式当然可行,但是使用 Gif 占用空间较大,而且需要为各种屏幕尺寸、分辨率做适配,因为 Android 没有提供原生 Gif 的 api 支持,所以这种方案还会遇到兼容性问题;

使用帧动画,这种方式还不如使用 Gif,一般来说使用帧动画占用空间比 Gif 还要大的多,而且一样要做多屏幕分辨率的适配,不过不会遇到兼容性问题;

使用视频,这种方式当然可以,但是一般来说宣传片才用的上视频,一般的动画远不需要用视频才能实现的,未免有些大材小用了,而且占用空间依然很大。

就没有更好的实现方式了么?

当然有,Android 5.x 之后提供了对 SVG 的支持,通过 VectorDrawable、AnimatedVectorDrawable 的结合可以实现一些稍微复杂的动画,兼容性是一个问题,不过整个实现流程非常麻烦,每次全新实现一个动画都得重头来过,最最关键的是,如果一个公司下的 App,iOS 也要实现一套一样的动画,资源的占用就显得过大了。

而 Airbnb 开源的这个项目完美的解决以上难题,我们来看下整个流程是什么样的。

假设我们要做一个引导页面的欢迎动画,这个一般设计师会用 Adobe 旗下的 After Effects (简称 AE)来做个动画出来,设计师用 AE 做个动画比工程师用代码去实现一个动画要快的多的多,调整起来也很方便,之后 AE 上有一款插件叫做 Bodymovin,这个插件也比较屌,可以直接根据 AE 上的动画文件导出 json 文件,这个 json 文件描述了该动画的一些关键点的坐标以及运动轨迹,之后我们在项目中引用 Lottie 开源库,在布局文件中简单的加上这么几句引用就完美的实现了。

这里写图片描述

如上图所示,通过安装在AE上的一款名叫bodymovin的插件,能够将AE中的动画工程文件转换成通用的json格式描述文件,bodymovin插件本身是用于在网页上呈现各种AE效果的一个开源库,lottie做的事情就是实现了一个能够在不同移动端平台上呈现AE动画的方式.从而达到动画文件的一次绘制、一次转换、随处可用的效果.
当然,就如Java一次编译,随处运行一样,lottie本身这个动画播放库并不是跨平台的.

值得一提的是,我们的 hello-world.json 文件只需要放在 app/src/main/assets 目录下就 ok 了。

当然,还有更多的用法,比如给动画添加事件,比如描述动画的 json 文件可以远程更新下载到本地,这样就可以不动声色的定期更新你的动画了。

有了这个库,我们可以充分发挥我们的想象力,很简单方便的就实现了一套很酷炫的动画,最重要的是,这个库是跨平台的,支持 Android、iOS 以及 ReactNative,共用一套 json 动画描述文件。

其实 Facebook 前段时间开源了一个类似的库叫做 Keyframes,也是跨平台的,但是 Littie 比 Keyframes 支持的特性更多,而且据 Airbnb 官方博客介绍,以后对让这个库支持更多的特性与功能,不得不说,真乃良心!

上手使用

说了那么多,下面来详细说说怎样使用这个碉堡的库.首先声明,以下涉及到的软件可能包含破解版,如果你资金充裕,请支持正版.
以下使用方式与软件在2017年2月6日都有效.

安装Adobe After Effects CC 2017

Adobe是个好公司,做了很多牛逼的软件,但是无一例外都被国人破解了.本例使用的是最新版的AE CC 2017.

这里写图片描述

可用下载地址 http://www.dayanzai.me/after-effects-cc-2014.html

CDN 分流地址
http://trojx-me.oss-cn-hangzhou.aliyuncs.com/AE%202017%5BWwW.DaYanZai.Me%5D.rar

感谢作者提供软件.注意此版本只适用于WIN 64位系统,笔者在 Win7 64 位
环境下能够正常安装并使用.安装过程中按照内置说明安装即可.

安装bodymovin插件

想了解此插件可以参看该插件的GitHub页面
下载bodymovin.zxp插件包

此文件位于工程中的/build/extension/目录下,如果外网速度慢可以从这里可以下载该插件的最新版本.

安装插件

项目说明中给出了为AE安装插件的三种方式:

1.通过第三方软件ZXP Installer安装;
2.手动安装;
3.使用Adobe官方插件安装器安装.

使用Adobe官方插件安装器安装

这三种笔者都试过,最后得出只有第二种(也是看起来最繁琐的)有效.这里详细说明一下第二种方法:

  1. 先关闭AE;
  2. 用WinRAR或类似软件打开bodymovin.zxp文件,并将解压后的文件夹直接复制到C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
    或者是C:\AppData\Roaming\Adobe\CEP\extensions下,对于MAC机器路径是/Library/Application\ Support/Adobe/CEP/extensions/bodymovin
    这里写图片描述
    这里写图片描述
  3. 修改注册表.对于Windows,打开注册表修改器,找到HKEY_CURRENT_USER/Software/Adobe/CSXS.6,并在此路径下添加一个名为PlayerDebugMode的KEY,
    并赋值为1;对于MAC,打开文件~/Library/Preferences/com.adobe.CSXS.6.plist并在末尾添加一行,键为PlayerDebugMode,值为1.
  4. 设置AE 无论以何种方式安装bodymovin插件,都需要在AE的编辑->首选项->常规中勾选允许脚本写入文件和访问网络(默认不开启)
    这里写图片描述
开始制作动画

由于笔者目前不会使用AE(废话,软件都是刚装的),这里我们打开一个现有的工程文件.
从这里可以找到一些Lottie中演示过的动画的AE源文件,下载到本地后在AE中打开即可.这里我们选用EmptyState.aep这个实例工程,稍作修改:

这里写图片描述

导出json数据

如果上文的bodymovin插件安装成功的话,在AE中的窗口->拓展中是能够找到它的.

这里写图片描述

在插件窗口中选择json数据文件导出的路径,点击Render按钮即可渲染工程并导出.

这里写图片描述

原始工程动画效果:

这里写图片描述

原始工程导出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_origin.json

修改后工程动画效果:

这里写图片描述

修改后工程导出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_edit.json

使用Lottie库播放动画

终于说到主角了,然而关于它的使用方式却是相对简单的.Lottie的引入与使用就如其他库一样,这里以Android平台的使用为例.

在项目的build.gradle文件中加入:

dependencies {  
      compile 'com.airbnb.android:lottie:1.0.1'
      ...
    }

Lottie支持Jellybean (API 16)及以上的系统,最简单的使用方式是直接在布局文件中添加:

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:lottie_fileName="hello-world.json"
            app:lottie_loop="true"
            app:lottie_autoPlay="true" />

或者,你也可以通过代码的方式添加.比如从位于app/src/main/assets路径下的json文件中导入动画数据:

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);

这方法将在后台线程异步加载数据文件,并在加载完成后开始渲染显示动画.
如果你想复用加载的动画,例如下一个ListView中每一项都需要显示这个动画,那么你可以这么做:

    LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
    ...
    LottieComposition composition = LottieComposition.fromJson(getResources(), jsonObject, (composition) -> {
        animationView.setComposition(composition);
        animationView.playAnimation();
    });

你还可以通过API控制动画,并且设置一些监听:

    animationView.addAnimatorUpdateListener((animation) -> {
        // Do something.
    });
    animationView.playAnimation();
    ...
    if (animationView.isAnimating()) {
        // Do something.
    }
    ...
    animationView.setProgress(0.5f);
    ...
    // 自定义速度与时长
    ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
        .setDuration(500);
    animator.addUpdateListener(animation -> {
        animationView.setProgress(animation.getAnimatedValue());
    });
    animator.start();
    ...
    animationView.cancelAnimation();

在使用遮罩的情况下,LottieAnimationView 使用 LottieDrawable来渲染动画.如果需要的话,你可以直接使用drawable形式:

    LottieDrawable drawable = new LottieDrawable();
    LottieComposition.fromAssetFileName(getContext(), "hello-world.json", (composition) -> {
        drawable.setComposition(composition);
    });

如果你需要频发使用某一个动画,可以使用LottieAnimationView内置的一个缓存策略:
LottieAnimationView.setAnimation(String, CacheStrategy)
其中CacheStrategy的值可以是Strong,Weak或者None,它们用来决定LottieAnimationView对已经加载并转换好的动画持有怎样形式的引用(强引用/弱引用).

补充

lottie在iOS中的使用介绍可以参看陳董DON的文章

分享一个能够在浏览器中预览json动画数据的网站

Lottie官方给的Android Demo安装包使用它能够查看示例动画,并能够载入并播放来自本地存储或网络的json动画数据.

好了,先写到这里,我去研究AE去了~后续应该会补上一个使用Lottie的Android Demo.
原文地址 http://www.trojx.me/2017/02/06/android-lottie-library/

本文主要转自简书作者:Trojx
参考文章:这个项目碉堡了

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3-lottie是一个用于在Vue3中使用Lottie动画的插件。安装它的步骤如下: 1. 首先,确保你已经安装了npm、cnpm、pnpm或yarn,这些都是常用的包管理工具,你可以根据自己的喜好选择其中一个来安装依赖。 2. 在你的项目中,打开终端并执行以下命令来安装vue3-lottie插件:npm install vue3-lottie@latest 或者 cnpm install vue3-lottie@latest 或者 pnpm install vue3-lottie@latest 或者 yarn add vue3-lottie@latest。 3. 安装完成后,你可以在你的项目中使用vue3-lottie插件了。 关于Lottie动画文件的获取,你可以访问https://lottiefiles.com/featured 网站来获取一些精选的Lottie动画文件。在这个网站上,你可以找到各种各样的动画效果,并下载对应的json文件。 在使用vue3-lottie插件时,你只需要将下载的Lottie动画的json文件导入到你的Vue组件中,并将其渲染到界面上即可。你可以参考Lottie官方地址来了解更多关于该插件的详细信息。 所以,总结起来,安装vue3-lottie的步骤是:1、安装npm/cnpm/pnpm/yarn;2、下载Lottie动画的json文件;3、将json文件导入到Vue组件中并渲染。 希望能对你有帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue3+lottie的使用神器:vue3-lottie (electron也适用)](https://blog.csdn.net/qq_41619796/article/details/131866960)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值