Fresco加载图片使用笔记--基本使用，播放动态wbep，控制播放次数，预加载，闪帧解决

1. 简单使用
2. 属性控制
3. 播放动态webp
4. 监听webp播放及控制webp播放次数
5. 预取图片
6. 连续加载多张动图闪帧解决方案

1. 简单使用

1）添加依赖：

dependencies {
  //必须添加
  implementation 'com.facebook.fresco:fresco:1.9.0'
  //依需要添加
  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:1.9.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:1.9.0'
  implementation 'com.facebook.fresco:webpsupport:1.9.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:1.9.0'

  // Provide the Android support library (you might already have this or a similar dependency)
  implementation 'com.android.support:support-core-utils:24.2.1'
}

2）Application中初始化
在你AndroidManifest中指定的Application的onCreate方法中初始化，如果没有指定，需要继承并指定。

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this);
    }
}

 <manifest
    ... >
    <application
      ...
      android:label="@string/app_name"
      android:name=".MyApplication"
      >
      ...
    </application>
    ...
 </manifest>

3）编写xml,记得指定fresco命名空间，需要注意的是SimpleDraweeView必须指定确定大小，不支持wrap_content

xmlns:fresco="http://schemas.android.com/apk/res-auto"

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="130dp"
    android:layout_height="130dp"
    fresco:placeholderImage="@drawable/my_drawable" />

4）指定Uri

Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/master/docs/static/logo.png");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);

或直接在xml中指定
fresco:actualImageUri
fresco:actualImageResource

Fresco 不支持 相对路径的URI. 所有的 URI 都必须是绝对路径，并且带上该 URI 的 scheme。

2. 属性控制

属性都基本可以在xml和代码中控制，见文生义，这里就不详细解释了

<com.facebook.drawee.view.SimpleDraweeView
  android:id="@+id/my_image_view"
  android:layout_width="20dp"
  android:layout_height="20dp"
  fresco:fadeDuration="300"
  fresco:actualImageScaleType="focusCrop"
  fresco:placeholderImage="@color/wait_color"
  fresco:placeholderImageScaleType="fitCenter"
  fresco:failureImage="@drawable/error"
  fresco:failureImageScaleType="centerInside"
  fresco:retryImage="@drawable/retrying"
  fresco:retryImageScaleType="centerCrop"
  fresco:progressBarImage="@drawable/progress_bar"
  fresco:progressBarImageScaleType="centerInside"
  fresco:progressBarAutoRotateInterval="1000"
  fresco:backgroundImage="@color/blue"
  fresco:overlayImage="@drawable/watermark"
  fresco:pressedStateOverlayImage="@color/red"
  fresco:roundAsCircle="false"
  fresco:roundedCornerRadius="1dp"
  fresco:roundTopLeft="true"
  fresco:roundTopRight="false"
  fresco:roundBottomLeft="false"
  fresco:roundBottomRight="true"
  fresco:roundWithOverlayColor="@color/corner_color"
  fresco:roundingBorderWidth="2dp"
  fresco:roundingBorderColor="@color/border_color"
/>

3. 播放动态webp

1)自动播放：

Uri uri;
DraweeController controller = Fresco.newDraweeControllerBuilder()
    .setUri(uri)
    .setAutoPlayAnimations(true)
    . // 其他设置
    .build();
mSimpleDraweeView.setController(controller);

2）手动控制播放播放

ControllerListener controllerListener = new BaseControllerListener<ImageInfo>() {
    @Override
    public void onFinalImageSet(
        String id,
        @Nullable ImageInfo imageInfo,
        @Nullable Animatable anim) {
        if (anim != null) {
          // 其他控制逻辑，可以在此处设置图片加载结束的标志位
          anim.start();
        }
    }
};

Uri uri;
DraweeController controller = Fresco.newDraweeControllerBuilder()
    .setUri(uri)
    .setControllerListener(controllerListener)
    // 其他设置
    .build();
mSimpleDraweeView.setController(controller);

使用animatable.start()开始播放动画，animatable.stop()停止播放动画

4. 控制动态webp播放次数，监听webp播放，获取动图时长

1）控制播放次数
需添加依赖：
implementation 'com.facebook.fresco:animated-drawable:1.9.0'

final DraweeController controller = Fresco.newDraweeControllerBuilder()
    .setAutoPlayAnimations(true)
    .setUri(uri)
    .setControllerListener(new BaseControllerListener<ImageInfo>() {
      @Override
      public void onFinalImageSet(
          String id,
          @Nullable ImageInfo imageInfo,
          @Nullable Animatable animatable) {
        if (animatable instanceof AnimatedDrawable2) {
          AnimatedDrawable2 animatedDrawable = (AnimatedDrawable2) animatable;
          animatedDrawable.setAnimationBackend(new LoopCountModifyingBackend(animatedDrawable.getAnimationBackend(), 3));//设置循环次数
        }
      }
    })
    .build();
simpleDraweeView.setController(controller);

public class LoopCountModifyingBackend extends AnimationBackendDelegate {

  private int mLoopCount;

  public LoopCountModifyingBackend(
      @Nullable AnimationBackend animationBackend,
      int loopCount) {
    super(animationBackend);
    mLoopCount = loopCount;
  }

  @Override
  public int getLoopCount() {
    return mLoopCount;
  }
}

2）监听动态webp

animatedDrawable.setAnimationListener()

animaetdDrawable是AnimatedDrawable2的实例

3）获取动图时长

animatedDrawable.getLoopDurationMs()

其它的还有：

animatedDrawable.getFrameCount()//获取帧数
animatedDrawable.getLoopCount()//获取循环次数

5. 预取图片/预加载图片

获取ImagePipeline:

Fresco.getImagePipeline()

获取ImageRequest

ImageRequest.fromFile(file);
ImageRequest.fromUri(uri);

预加载到磁盘缓存:

imagePipeline.prefetchToDiskCache(imageRequest, callerContext);

预加载到内存缓存:

imagePipeline.prefetchToBitmapCache(imageRequest, callerContext);

取消预加载:

DataSource<Void> prefetchDataSource = imagePipeline.prefetchTo...;
prefetchDataSource.close();

6. 连续播放多张动图闪帧解决方案

连续播放多张动图，中间会有几十毫秒的加载间隔。
本来想将动态webp缓存到内存，后来发现行不通，动态的webp貌似无法缓存到内存。
最后另辟蹊径，才用setPlaceHolder(),使其先显示的是动图的第一帧，解决问题。
代码如下：

 GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources());
/*设置placeholder，减少连续加载两个动图时的间隙，同时设置渐变时间为0,动态webp不会缓存到内存*/
GenericDraweeHierarchy hierarchy = builder
         .setPlaceholderImage(ResourcesCompat.getDrawable(getResources(), drawableId, null))
         .setFadeDuration(0)
         .build();
            
DraweeController controller = Fresco.newDraweeControllerBuilder()
        .setUri(uri)
        .setControllerListener(controllerListener)
        .build();
mSimpleDraweeView.setHierarchy(hierarchy);
mSimpleDraweeView.setController(controller);

需要注意的是，设置placeholder后，在播放下一张动图时，如果下一张动图没有设置placeholder，那么上一张的placeholder会闪一下，所以在加载下一张动图前需要设置placeholder或者将placeholder置为空。

refer：
http://frescolib.org/
https://www.fresco-cn.org/
https://github.com/facebook/fresco