Lottie 动画

#### 三方框架之Lotti使用
Lottie 的使用

1、添加 Gradle 依赖

dependencies { compile ‘com.airbnb.android:lottie:1.5.3‘}

2、使用View

Lottie支持Jellybean(API 16)及以上。最简单的使用方法是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 “ />
}

或者从 代码中加载。 从 app / src / main / assets中的json资源:

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

如果你想复用动画,比如在列表中的每个项目或者从网络请求加载JSONObject

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

然后控制动画执行或者对动画添加监听

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(); // 关闭

支持 After Effects 的功能

关键的插值器

  • Linear Interpolation 线性插值器
  • Bezier Interpolation 贝塞尔插值器
  • Hold Interpolation 保持插值器

Rove Across Time

Spatial Bezier

固定变换

  • Transform Anchor Point 锚点变换
  • Transform Position 位置变换
  • Transform Scale 伸缩比例变换
  • Transform Rotation 旋转变换
  • Transform Opacity 透明度变换

遮罩 (碉堡了!)

Path 路径

  • Opacity 不透明度
  • Multiple Masks (additive, subtractive, inverted) 多重多样的遮罩

Track

  • Alpha Matte 透明度遮罩

Parenting

Multiple Parenting

Nulls

图层形状

  • Rectangle (All properties) 矩形
  • Ellipse (All properties) 椭圆
  • Polystar (All properties) 北极星?什么鬼
  • Polygon (All properties. Integer point values only.) 多边形
  • Path (All properties) 路径

Anchor Point 锚点

Position 位置坐标

Scale 缩放

Rotation 旋转

Opacity 不透明

Group Transforms (Anchor point, position, scale etc) 合成变换

Multiple paths in one group 多路径合成

冲程(形状层,外层)

  • Stroke Color 描边颜色
  • Stroke Opacity 不透明描边
  • Stroke Width 描边宽度
  • Line Cap 压线帽
  • Dashes 破折号

填充

  • Fill Color 填充颜色
  • Fill Opacity 填充不透明度

修剪路径

  • Trim Paths Start
  • Trim Paths End
  • Trim Paths Offset

性能和内存

1、如果组合没有用到遮罩masks或mattes,那么性能和内存开销应该相当不错。没有创建位图bitmap,大多数操作都是简单的画布操作。

2、如果组合中有遮罩masks或mattes,将在合成的地方创建2-3个bitmap,当动画师徒添加到view时,bitmap由lotti自动创建,并在View删除时被回收。所以不建议在RecyclerView中使用带有遮罩masks或mattes的动画,可能会造成溢出。(后面看到git又把这一条更新掉了,索性还是贴上来吧)!后来看到Git更新为:如果组合有遮罩或遮罩,将使用屏幕外缓冲区,画面以外的缓冲区的使用和性能会有影响了。

3、如果在list中使用,建议在LottieAnimationView.setAnimation(String,CacheStrategy)中使用CacheStrategy,因此动画不必每次都反序列化。

时间: 2024-09-29 01:28:02

Lottie 动画的相关文章

Lottie 动画里有图片怎么办?设计师小姐姐也能帮你减少开发量!

一.序 Hi,大家好,我是承香墨影! Lottie 是 Airbnb 开源的一套跨平台的完整解决方案,设计师只需要使用 After Effectes (之后简称 AE)设计出动画之后,使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式,就可以直接运用在 iOS.Android 和 React Native之上,无需关心中间的实现细节. 这样,对于不同的工作角色来说,Lottie 带来的都是更简洁的工作流.开发小哥哥不再担心动画实现困难,设计师小姐姐也不需要担

[UWP]在UWP平台中使用Lottie动画

原文:[UWP]在UWP平台中使用Lottie动画 最近QQ影音久违的更新了,因为记得QQ影音之前体验还算不错(FFmepg的事另说),我也第一时间去官网下载体验了一下,结果发现一些有趣的事情. 是的,你没看错,QQ影音主界面上这个动画效果是使用Lottie动画实现的! 这让我大为惊奇,我对Lottie了解还算是比较多的,但是Lottie常见应用于移动端APP和网页,在传统桌面端见到还是第一次. 那就趁这个机会,来分享点关于Lottie动画的东西吧! Lottie动画的UWP实现 Lottie是

[UWP]缓存Lottie动画帧

原文:[UWP]缓存Lottie动画帧 在上一篇博文<[UWP]在UWP平台中使用Lottie动画>中我简单介绍了一下LottieUWP项目以及如何使用它呈现Lottie动画,这篇文章里我们来讲点进阶的东西--缓存Lottie动画帧. 为什么会有这样的需求呢? 有两方面原因: 直接在XAML中使用Lottie动画时,是边播放边渲染,计算量比较大,某些Lottie文件会非常吃性能!另外也会存在渲染不正确(有黑色区域)的情况,但是如果我们把每一帧缓存下来,自己控制播放的话,性能会提升很多! 应用于

lottie动画实战(仿汽车之家底部Tab切换动画)

GitHub地址:https://github.com/kongpf8848/Animation 效果如下: 主要是自定义View继承LottieAnimationView并实现Checkable接口,代码如下: import android.content.Context; import android.util.AttributeSet; import android.widget.Checkable; import com.airbnb.lottie.LottieAnimationView

站在 Android 开发的角度,聊聊 Airbnb 的 Lottie!!!

一.前言 你有没有遇上一些设计师,对一些酷炫的动画着迷,喜欢根据场景设计出可爱而流畅的动画.但是在实际工作中,哪怕开发人员也觉得这些动画非常的棒,可我们知道,越是定制化的动画,实现起来将会越麻烦和耗时.这有时候就会引发设计师和工程师的矛盾. 而自从 Airbnb 开发出 Lottie 之后,设计师只需要使用 After Effects 设计出完美的动画,然后通过 Bodymovin 插件进行简单的转换和导出成 JSON,最后工程师将 JSON 放入 App 项目中,就可以将动画 100% 还原到

Lottie 使用

原文:https://mp.weixin.qq.com/s?__biz=MzIxNjc0ODExMA==&mid=2247485033&idx=1&sn=54dd477b4c4cd30d12fde48eba929546&chksm=97851f48a0f2965e342a2cdf55cbefceaa20a24b887e2b79ff940ca57a17b6cb9ae999643ace#rd 设计师使用 After Effects 设计出完美的动画,然后通过 Bodymovin

这样做动画交互,一点都不费力!

本文由云+社区发表 作者:paulzeng 导语:Lottie是Airbnb开源的一个面向 iOS.Android.React Native 的动画库,可实现非常复杂的动画,使用也及其简单,极大释放人力,值得一试. 一.简介 Lottie 是Airbnb开源的一个面向 iOS.Android.React Native 的动画库,能分析 Adobe After Effects 导出的动画,并且能让原生 App 像使用静态素材一样使用这些动画,完美实现动画效果. 现在使用各平台的 native 代码

这样做动画交互,一点都不费力

本文由云+社区发表 作者:paulzeng **导语:**Lottie是Airbnb开源的一个面向 iOS.Android.React Native 的动画库,可实现非常复杂的动画,使用也及其简单,极大释放人力,值得一试. 一.简介 Lottie 是Airbnb开源的一个面向 iOS.Android.React Native 的动画库,能分析 Adobe After Effects 导出的动画,并且能让原生 App 像使用静态素材一样使用这些动画,完美实现动画效果. 现在使用各平台的 nativ

【译】Java、Kotlin、RN、Flutter 开发出来的 App 大小,你了解过吗?

现在开发 App 的方式非常多,原生.ReactNative.Flutter 都是不错的选择.那你有没有关注过,使用不同的方式,编译生成的 Apk ,大小是否会有什么影响呢?本文就以一个最简单的 Hello World App,来看看不同的框架,编译出来的 Apk 大小,有什么区别.当然,本文的环境下是一个最简单的 Apk,其实只能部分说明问题,你觉得呢? - 承香墨影 移动开发发展至今,已经可以接受很多方式来开发 App,例如基于特定平台的原生开发方式(使用 Java 或者 Kotlin 开发