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,因此动画不必每次都反序列化。