Lottieアンドリュースオープンソースのアニメーションライブラリ

Lottieバンカー

Airbnbは、最近発見の興奮のように、このニュースが出てきた、まだカスタムコントロールを探るためにクールなエフェクトのすべての種類に苦しんでいます。同時にiOS版、Androidの開発とReactNativeをサポートすることができますソースの名前のLottieアニメーションライブラリを開き、I新世界は、一般的には。それは言うことができる、Lottieが表示され、無限に書き込みます大幅にアニメーションの定義を作業からのAndroid / iOSのネイティブエンジニアを解放。
我々は時間の複雑な視覚効果の数とGIFプロジェクトを実現する際に、多くが発生します問題。例えば、GIFは大きすぎるファイル、および異なるデバイスの解像度と色深度の問題GIF形式は、ソフトのスポットですフィットする不都合があります。

たとえば、次のいくつかのアニメーション：

明らかにこれらのアニメーション効果はないプログラマが何かのために責任を負わなければならないということ。それを指示モバイルエンド用に設計されたAEアニメーションソフトウェアでアートを作るための方法がないこと？書き込みコードの設計
はい、Lottieの使用です。

、上記AEという名前のプラグbodymovinにインストールされているソフトウェアを示すように、AEをアニメーション化することができ、プロジェクトファイルは、様々なAEの効果にページをレンダリングするために使用されるプラグ自体bodymovin、共通フォーマットのJSONプロファイルに変換され、オープンソースのライブラリは、実行するlottieはのアニメーションファイルを達成するために、さまざまな携帯端末プラットフォーム上でAEアニメーションをレンダリングすることができる方法を実現することであるドロー、どこでも利用できる変換、効果が。
もちろん、Javaなど一次编译,随处运行、のようなlottie自体アニメーションライブラリは、クロスプラットフォームではありません。

始めましょう

そんなに、のライブラリバンカーを使用するための方法を詳細に説明しましょうと述べた。最初に、亀裂のバージョンが含まれている可能性のあるソフトウェアに関連する次のあなたが資金を提供した場合に、本物のサポートしてください。
ソフトウェアの次の使用を2017年2月6日日本人が有効です。

効果CC 2017の後のAdobeをインストールします。

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をインストールするには3つの方法があるとします。

ZXPインストーラは、サードパーティ製のソフトウェアをインストールします。
手動でインストール;
使用のAdobeプラグインのインストールがされてインストールされています。

私はすべての3つの効果的な第二の方法について、ここで詳細にのみ第二は（も最も退屈なようです）という結論に達した試してみました：

- AEをオフにします。
- WinRARのまたは類似のソフトウェアで開かbodymovin.zxp直接解凍にコピーされたファイル、フォルダやファイルC:\Program Files (x86)\Common Files\Adobe\CEP\extensions
  またはC:<username>\AppData\Roaming\Adobe\CEP\extensionsMACマシンのパスのために、下/Library/Application\ Support/Adobe/CEP/extensions/bodymovin

- 修改注册表.对于Windows,打开注册表修改器,找到HKEY_CURRENT_USER/Software/Adobe/CSXS.6,并在此路径下添加一个名为PlayerDebugMode的KEY,
  并赋值为1;对于MAC,打开文件~/Library/Preferences/com.adobe.CSXS.6.plist并在末尾添加一行,键为PlayerDebugMode,值为1.
- 设置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文件中加入:

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

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

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

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

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

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