首页 > 代码库 > Lottie 动画

Lottie 动画

2024-09-21 14:39:58   216人阅读


#### 三方框架之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，因此动画不必每次都反序列化。

Lottie 动画


联系
我们