Android中播放webp动画的一种方式:FrameSequenceDrawable

简介

本篇主要是介绍FrameSequenceDrawable的相关实现原理的文章，FrameSequenceDrawable是Google实现的可以播放Webp动画的Drawable，这个并没有在SDK里面，但是我们可以在googlesource中看到相关的代码，FrameSequenceDrawable相关代码地址

播放效果

在介绍之前，我们可以先看一下播放效果：

我想直接用

如果你说我不想看原理，我就想知道咋播放webp，那么我就帮助你完成一个简单小库，虽然是我封装的，但是代码可都是人家google开发哥哥写的，我帮你搬运过来，哈哈
这里是链接

如何引入到工程

• Add the JitPack repository to your build file

    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

• Add the dependency

  dependencies {
          compile 'com.github.humorousz:FrameSequenceDrawable:1.0.1-SNAPSHOT'
  }
  

如何使用

• xml

 <com.humrousz.sequence.view.AnimatedImageView
        android:id="@+id/google_sequence_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/group"
        app:loopCount="1"
        app:loopBehavior="loop_default|loop_finite|loop_inf"
        android:scaleType="centerCrop"
        android:src="@drawable/webpRes"/>

• java

public void setImage(){
    AnimatedImageView mGoogleImage;
    mGoogleImage = findViewById(R.id.google_sequence_image);
    //设置重复次数
    mGoogleImage.setLoopCount(1);
    //重复行为默认 根据webp图片循环次数决定
    mGoogleImage.setLoopDefault();
    //重复行为无限
    mGoogleImage.setLoopInf();
    //重复行为为指定  跟setLoopCount有关
    mGoogleImage.setLoopFinite();
    //设置Assets下的图片
    mGoogleImage.setImageResourceFromAssets("newyear.webp");
    //设置图片通过drawable
    mGoogleImage.setImageResource(R.drawable.newyear);
    Uri uri = Uri.parse("file:"+Environment.getExternalStorageDirectory().toString()+"/animation");
    //通过添加"file:"协议，可以展示指定路径的图片，如例子中的本地资源
    mGoogleImage.setImageURI(uri);
}

当然你也可以不使用我这里的AnimatedImageView，AnimatedImageView是我参考其它的代码后修改封装的类，直接使用FrameSequenceDrawable+ImageView也是可以的，使用方法如下

 ImageView mImage;
 InputStream in = null;
 in = getResources().getAssets().open("anim.webp");
 final FrameSequenceDrawable drawable = new FrameSequenceDrawable(in);
 drawable.setLoopCount(1);
 drawable.setLoopBehavior(FrameSequenceDrawable.LOOP_FINITE);
 drawable.setOnFinishedListener(new FrameSequenceDrawable.OnFinishedListener() {
     @Override
     public void onFinished(FrameSequenceDrawable frameSequenceDrawable) {

     }
 });
 mImage.setImageDrawable(drawable);

原理介绍

原理简介

• 利用了两个Bitmap对象，其中一个用于绘制到屏幕上，另外一个用于解析下一张要展示的图片，利用了HandlerThread在子线程解析，每次解析的时候获取上一张图片的展示时间，然后使用Drawable自身的scheduleSelf方法在指定时间替换图片，在达到替换时间时，会调用draw方法，在draw之前先去子线程解析下一张要展示的图片，然后重复这个步骤，直到播放结束或者一直播放
  #### 涉及到的类
• FrameSequenceDrawable
  这个我们直接使用播放webp动画的类，它继承了Drawable并且实现了Animatable, Runnable两个接口，所以我们可以像使用Drawable一样的去使用它
• FrameSequence
  从名字上来看这个类的意思很明确，那就是帧序列，它主要负责对传入的webp流进行解析，解析的地方是在native层，所以如果自己想编译FrameSequenceDrawable源码的话，需要编译JNI文件夹下的相关文件生成so库

流程分析

在分析源码之前，先把整个代码的流程分步骤简单介绍一下，后面根据这里介绍的流程去逐个分析源码
- 在FrameSequenceDrawable构造函数中创建解析线程，使用HandlerThread作为解析线程
- 在触发了setVisiable方法之后，会触发自身start方法开始解析第一张图片
- start方法调用scheduleDecodeLocked开始解析
- mDecodeRunnable的run方法执行，解析下一张要展示的图片，调用Drawable自身的scheduleSelf方法，参数when会设置为当前图片的展示时间
- scheduleSelf 会调用FrameSequenceDrawable所实现Runnable的run方法，并且导致draw，在draw方法中会首先调用解析线程去解析下一张图片，然后在继续绘制当前图片
- 反复执行绘制和解析步骤，知道循环次数达到设置状态或者无限循环

效果示意图