Lottie for Android:一个解放开发者双手的动画神器

96
Android小Y B67c298d f020 4f89 aac6 0710bc0709ec
8.9 2019.03.22 01:44* 字数 1442
Lottie

前言

动画是我们日常开发中必不可少的一个要点,比如某个场景要实现打勾的效果,一开始你的设想可能是这样子的:



 
用代码实现起来可能还好,绘制圆圈,一段圆弧圆周运动,绘制一个打勾路径,结合动画实现,美滋滋。但是等到设计师出图的那一天,是这样的:



看了效果图,内心有一句话不知道当不当讲
 

但是不要慌,你能不能想到竟然有这么一个库,可以让设计师"帮你实现动画效果"!没错,它就是今天的主角——Lottie。Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库,能解析 Adobe After Effects 视频制作软件导出的动画,并且在代码中能通过api直接调用这些生成的动画文件,完美实现动画效果,Lottie在这种时候就是救世主级别的存在了。

Lottie官网https://lottiefiles.com/

lottie效果图.gif

 

如何使用

看了效果,我们看下如何在Android中快速使用这个库实现各种炫酷动画。

1.导入Lottie库

在app的gradle中导入如下依赖:

dependencies {  
    compile 'com.airbnb.android:lottie:2.2.0'
}

注意:Lottie只支持Api16以上,如果项目中minSdkVersion小于16会报错。
 

2.导入动画文件

Lottie加载动画是靠解析Json文件来实现的,所以需要设计师从After Effect等软件中制作好动画并生成一个Json文件,文件的内容大概是下面这个样子:


json示意图

尽管看起来很复杂,但这都是通过软件生成的,我们只需要将其导入到项目中即可。由于Lottie默认是读取工程的Assets目录,所以我们将Json文件放到src/main/assets目录下。
 

3.使用姿势

1)静态方式

Lottie库提供了一个LottieAnimationView控件,它本质是一个ImageView,可直接在布局文件中声明:

<com.airbnb.lottie.LottieAnimationView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="anim.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true"/>

这里列举了有几个lottie的基本属性

  • lottie_fileName 调用的Json文件名
  • lottie_loop 是否开启循环动画
  • lottie_autoPlay 是否开启自动播放

当然lottie还有很多其他的属性,例如:

  • lottie_repeatCount 动画重复次数
  • lottie_repeatMode 动画重复模式
  • lottie_scale 放大倍数

这里就不一一列举了,运行后效果如下:


lottie demo效果图.gif

 

2)动态方式

Lottie也支持在代码中动态调用接口:

 LottieAnimationView lottieAnimationView = findViewById(R.id.anim_view);
 lottieAnimationView.setAnimation("anim.json");
 lottieAnimationView.loop(true);
 lottieAnimationView.playAnimation();

 

3)监听动画进度

Lottie同样提供了监听动画的接口,而且还是我们熟悉的ValueAnimator

lottieAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                // 判断动画加载结束
                Log.d("Lottie", "" + valueAnimator.getAnimatedFraction());
            }
});

 

4)加载动画优化

Lottie的性能比属性动画略逊一筹,不过支持开启硬件加速:

lottieAnimationView.useHardwareAcceleration(true);

Lottie支持对动画的缓存,会在动画加载完成后将其缓存为强缓存和弱缓存

lottieAnimationView.setAnimation("anim.json", LottieAnimationView.CacheStrategy.Strong);    //强缓存
lottieAnimationView.setAnimation("anim.json", LottieAnimationView.CacheStrategy.Weak);      //弱缓存

其内部是维护了两个HashMap:

private static final Map<String, LottieComposition> STRONG_REF_CACHE = new HashMap<>();
private static final Map<String, WeakReference<LottieComposition>> WEAK_REF_CACHE =
      new HashMap<>();
public void setAnimation(final String animationName, final CacheStrategy cacheStrategy) {
    //......
    if (cacheStrategy == CacheStrategy.Strong) {
      STRONG_REF_CACHE.put(animationName, composition);
    } else if (cacheStrategy == CacheStrategy.Weak) {
      WEAK_REF_CACHE.put(animationName, new WeakReference<>(composition));
    }
    //.....
}

 

原理解析

我们从LottieAnimationView的playAnimation()这个方法看下Lottie的动画流程:

public void playAnimation() {
    lottieDrawable.playAnimation();
    enableOrDisableHardwareLayer();
}

这里调用了一个lottieDrawable的playAnimation(),而lottieDrawable是一个LottieDrawable

LottieDrawable

LottieDrawable继承于Drawable,Lottie的动画都是在这个LottieDrawable里绘制的,它里面维护了一个LottieValueAnimator(继承于ValueAnimator),我们调用的loop或者playAnimation之类的方法其实本质上都是调用了它里面这个属性动画的Api:

public void loop(boolean loop) {
    animator.setRepeatCount(loop ? ValueAnimator.INFINITE : 0);
}
private void playAnimation(boolean setStartTime) {
    if (compositionLayer == null) {
      lazyCompositionTasks.add(new LazyCompositionTask() {
        @Override public void run(LottieComposition composition) {
          playAnimation();
        }
      });
      return;
    }
    long playTime = setStartTime ? (long) (progress * animator.getDuration()) : 0;
    animator.start();
    if (setStartTime) {
      animator.setCurrentPlayTime(playTime);
    }
}

那么它是怎么通过这个属性动画去实现绘制的呢?在LottieDrawable的构造方法里,设置了属性动画的监听器,然后将进度传给setProgress:

public LottieDrawable() {
    animator.setRepeatCount(0);
    animator.setInterpolator(new LinearInterpolator());
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override public void onAnimationUpdate(ValueAnimator animation) {
        if (systemAnimationsAreDisabled) {
          animator.cancel();
          setProgress(1f);
        } else {
          setProgress((float) animation.getAnimatedValue());
        }
      }
    });
}
public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    this.progress = progress;
    if (compositionLayer != null) {
      compositionLayer.setProgress(progress);
    }
}

可以看到动画过程中会不断触发setProgress,setProgress中调用了CompositionLayer的setProgress,然后再通过CompositionLayer把进度传递到各个图层:

@Override 
public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    super.setProgress(progress);
    if (timeRemapping != null) {
      long duration = lottieDrawable.getComposition().getDuration();
      long remappedTime = (long) (timeRemapping.getValue() * 1000);
      progress = remappedTime / (float) duration;
    }
    if (layerModel.getTimeStretch() != 0) {
      progress /= layerModel.getTimeStretch();
    }

    progress -= layerModel.getStartProgress();
    for (int i = layers.size() - 1; i >= 0; i--) {
      layers.get(i).setProgress(progress);
    }
}

各个图层收到通知之后,再处理后回调给LottieDrawable:

void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    if (progress < getStartDelayProgress()) {
      progress = 0f;
    } else if (progress > getEndProgress()) {
      progress = 1f;
    }

    if (progress == this.progress) {
      return;
    }
    this.progress = progress;

    for (int i = 0; i < listeners.size(); i++) {
      listeners.get(i).onValueChanged();
    }
}

@Override 
public void onValueChanged() {
    invalidateSelf();
}
private void invalidateSelf() {
    lottieDrawable.invalidateSelf();
}

LottieDrawable收到这些图层的通知就会调用invalidateDrawable来不断刷新自己:

@Override 
public void invalidateSelf() {
    final Callback callback = getCallback();
    if (callback != null) {
      callback.invalidateDrawable(this);
    }
}

以上是Lottie动画绘制的逻辑,时序图如下:


Lottie时序图

那么Lottie是怎么将这些Json数据跟动画关联起来的呢?After Effect制作动画的原理是将动画分为很多个图层,且每个图层有各自的细节动画,这样叠加合成最终的效果。那么Lottie也是同理,分为很多个图层(Layer),我们看下Json的外层结构如下:

{
    "v": "4.6.0",               //bodymovin的版本
    "fr": 24.291553280921,     //帧率
    "ip": 0,                    //起始关键帧
    "op": 84.0029442951,     //结束关键帧
    "w": 100,                   //动画宽度
    "h": 100,                   //动画高度
    "ddd": 0, 
    "assets": [...]             //资源信息
    "layers": [...]             //图层信息
}

Lottie会通过Json里的数据,解析出动画需要的关键帧信息,并且还有各个图层的动画数据,我们依旧是由表及里,从LottieAnimationView的setAnimation()开始看:

public void setAnimation(String animationName) {
    setAnimation(animationName, defaultCacheStrategy);
}
public void setAnimation(final String animationName, final CacheStrategy cacheStrategy) {
    //...省略部分代码
    compositionLoader = LottieComposition.Factory.fromAssetFileName(getContext(), animationName,
        new OnCompositionLoadedListener() {
          @Override public void onCompositionLoaded(LottieComposition composition) {
            if (cacheStrategy == CacheStrategy.Strong) {
              STRONG_REF_CACHE.put(animationName, composition);
            } else if (cacheStrategy == CacheStrategy.Weak) {
              WEAK_REF_CACHE.put(animationName, new WeakReference<>(composition));
            }

            setComposition(composition);
          }
    });
}

通过工厂模式从LottieComposition的Factory里读取我们Asset中的Json文件,并且将其转换为LottieComposition对象,那么看下LottieComposition:

static LottieComposition fromJsonSync(Resources res, JSONObject json) {
      Rect bounds = null;
      float scale = res.getDisplayMetrics().density;
      int width = json.optInt("w", -1);
      int height = json.optInt("h", -1);

      if (width != -1 && height != -1) {
        int scaledWidth = (int) (width * scale);
        int scaledHeight = (int) (height * scale);
        bounds = new Rect(0, 0, scaledWidth, scaledHeight);
      }

      long startFrame = json.optLong("ip", 0);
      long endFrame = json.optLong("op", 0);
      float frameRate = (float) json.optDouble("fr", 0);
      String version = json.optString("v");
      String[] versions = version.split("[.]");
      int major = Integer.parseInt(versions[0]);
      int minor = Integer.parseInt(versions[1]);
      int patch = Integer.parseInt(versions[2]);
      LottieComposition composition = new LottieComposition(
          bounds, startFrame, endFrame, frameRate, scale, major, minor, patch);
      JSONArray assetsJson = json.optJSONArray("assets");
      parseImages(assetsJson, composition);
      parsePrecomps(assetsJson, composition);
      parseFonts(json.optJSONObject("fonts"), composition);
      parseChars(json.optJSONArray("chars"), composition);
      parseLayers(json, composition);
      return composition;
}

LottieComposition其实就相当于Json和我们动画属性的一个转换器,将我们的Json数据解析成我们需要的内存数据,然后根据数据创建出一个或多个图层,再结合我们刚才分析的属性动画,实现最终各种酷炫的效果。

 

总结

Lottie是一个强大的动画库,许多代码实现比较复杂或者难以实现的动画,通过Lottie都能轻易实现,开发效率大大提高,并且后期万一要更换动画,同样十分方便。又或者可以将动画Json通过网络下发,实现动态更换客户端的动画效果。

参考

Lottie,让动画如此简单

 

GitHubGitHub-ZJYWidget
CSDN博客IT_ZJYANG
简 书Android小Y
GitHub 上建了一个集合炫酷自定义View的项目,里面有很多实用的自定义View源码及demo,会长期维护,欢迎Star~ 如有不足之处或建议还望指正,相互学习,相互进步,如果觉得不错动动小手给个Star, 谢谢~

关注Android 技术小栈,更多精彩原创
Android 开源库