Lottie Android 初探

Lottie Android 初探

Lottie是一个支持AndroidiOSReact Native,并由 Adobe After Effects制作aep格式的动画,然后经由bodymovin插件转化渲染为json格式可被移动端本地识别解析的Airbnb开源库。
Lottie实时呈现After Effects动画效果,让应用程序可以像使用静态图片一样轻松地使用动画。
Lottie支持API 14及以上。

一、预览

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

二 、基本使用

在自己项目module的build.gradle文件中添加如下代码:

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

LottieAnimationView使用最简单的方法是:

<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" />

其中lottie_loop属性为是否重复无限期动画,当为true时,动画无限次数播放,为false时,播放一次。

或者把json资源放在app/src/main/assets下,也可以这样使用它:

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

该方法将加载文件并在后台解析动画,在完成后异步开始呈现。

如果您希望重用一个动画,例如在列表的每个项目中,或者从一个网络请求JSONObject中加载它:

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

 // 取消异步加载
 // compositionCancellable.cancel();

你也可以控制动画添加监听:

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();

你可以给整个动画,一个特定的图层,或者一个图层的特定内容添加一个颜色过滤器。

// 任何符合颜色过滤界面的类
final PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.LIGHTEN);

// 在整个视图中添加一个颜色过滤器
animationView.addColorFilter(colorFilter);

//在特定的图层中添加一个颜色滤镜
animationView.addColorFilterToLayer("hello_layer", colorFilter);

// 添加一个彩色过滤器特效“hello_layer”上的内容
animationView.addColorFilterToContent("hello_layer", "hello", colorFilter);

// 清除所有的颜色滤镜
animationView.clearColorFilters();

注意:颜色过滤器只适用于图层,如图像层和实层,以及包含填充、描边或组内容的内容。

在引擎盖下,LottieAnimationView使用LottieDrawable呈现其动画。如果需要,您可以直接使用可绘制的表单:

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

如果你的动画会经常重用,LottieAnimationView内置了一个可选的缓存策略。使用LottieAnimationView .setAnimation(String,CacheStrategy)。CacheStrategy可以Strong, Weak, 或者None。LottieAnimationView对加载和解析的动画持有强或弱的参考。弱或强表示缓存中组合的GC参考强度。

三、Image 支持

如果您的动画是从assets中加载的,并且您的图像文件位于assets 的子目录中,那么您可以对图像进行动画。你可以用LottieAnimationView或者LottieDrawable对象调用setImageAssetsFolder(String)方法,明确assets相对文件夹内的路径,确保图像bodymovin出口与他们的名字不变,文件夹应该img_ 开头。如果直接使用LottieDrawable,当你完成时您必须调用recycleBitmaps。
如果你需要提供你自己的位图,如果你从网络或其他地方下载,你可以提供一个委托来做这个:

animationView.setImageAssetDelegate(new ImageAssetDelegate() {
         @Override public Bitmap fetchBitmap(LottieImageAsset asset) {
           getBitmap(asset);
         }
       });

四、性能和内存

如果该组合没有遮罩或mattes,那么性能和内存开销应该相当不错。没有创建任何位图,大多数操作都是简单的画布绘制操作。
如果这个组合有遮罩或mattes,就会使用屏幕外的缓冲区,并且会有一个性能打击。
如果在你的动画列表中使用,推荐使用CacheStrategy,在调用LottieAnimationView.setAnimation(String, CacheStrategy)的时候,所以动画不需要每次都反序列化。

五、Lottie官方Demo下载

https://fir.im/lottiedemo

六、参考资料

http://airbnb.design/lottie/
http://www.lottiefiles.com/
https://github.com/airbnb/lottie-android
http://www.adobe.com/cn/products/aftereffects.html
https://github.com/bodymovin/bodymovin
https://github.com/airbnb/lottie-react-native
https://github.com/airbnb/lottie-ios
https://github.com/airbnb

原创文章,转载请注明出处。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容