安卓酷炫的动画效果Lottie

今日科技快讯

6月5日上午，从Acfun（下称A站）公关总监袁蕾处确认，快手全资收购A站。快手方面表示：“未来，A站将保持独立品牌、维持独立运营、保持原有团队、独立发展。快手会在资金、资源、技术等方面给予支持。”

前言

Lottie是一个Android和IOS端的支持库，它能够使用“Bodymovin”将Adobe AfterEffects动画转化为json的形式然后在移动端本地传输。

案例效果图

制作方法

1.安装好AE
2.导出json数据

疑问

其实在 Bodymovin 插件这里也是比较神奇的，它是怎么生成json文件的呢？这个后面有时间再研究。解析出来的json文件是这样子的：

{
  "assets": [

  ],
  "layers": [
    {
      "ddd": 0,
      "ind": 0,
      "ty": 1,
      "nm": "MASTER",
      "ks": {
        "o": {
          "k": 0
        },
        "r": {
          "k": 0
        },
        "p": {
          "k": [
            164.457,
            140.822,
            0
          ]
        },
        "a": {
          "k": [
            60,
            60,
            0
          ]
        },
        "s": {
          "k": [
            100,
            100,
            100
          ]
        }
      },
      "ao": 0,
      "sw": 120,
      "sh": 120,
      "sc": "#ffffff",
      "ip": 12,
      "op": 179,
      "st": 0,
      "bm": 0,
      "sr": 1
    },
    ……
  ],
  "v": "4.4.26",
  "ddd": 0,
  "ip": 0,
  "op": 179,
  "fr": 30,
  "w": 325,
  "h": 202
}

代码使用方法

在build.gradle里面添加如下
dependencies {
  implementation 'com.airbnb.android:lottie:2.5.4'
}

在布局里面：
"@+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" />

1.或者,你也可以通过代码的方式添加.比如从位于app/src/main/assets路径下的json文件中导入动画数据:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
    animationView.setAnimation("hello-world.json");
    animationView.loop(true);
2.这方法将在后台线程异步加载数据文件,并在加载完成后开始渲染显示动画.如果你想复用加载的动画,例如下一个ListView中每一项都需要显示这个动画,那么你可以这么做:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
    ...
    LottieComposition composition = LottieComposition.fromJson(getResources(), jsonObject, (composition) -> {
        animationView.setComposition(composition);
        animationView.playAnimation();
    });
3.你还可以通过API控制动画,并且设置一些监听:
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();

4.在使用遮罩的情况下,LottieAnimationView 使用 LottieDrawable来渲染动画.如果需要的话,你可以直接使用drawable形式:
LottieDrawable drawable = new LottieDrawable();
    LottieComposition.fromAssetFileName(getContext(), "hello-world.json", (composition) -> {
        drawable.setComposition(composition);
    });

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

说明

以上是我参考其它博客的然后自己在总结了一下，希望帮到其它小伙伴。