先说明一下:目前 支持 webp 动图 的 三方图片库,只有Fresco,想控制 动图 播放 和 暂停 的 也只有 Fresco
(声明:博主并不是 Fresco 的 铁粉,其他的三方库也都用过,只不过本文标题的功能 目前只有 Fresco 能简单实现)
先看一下效果:
Gradle添加引用:
compile 'com.facebook.fresco:fresco:1.3.0'
compile 'com.facebook.fresco:animated-webp:1.3.0'
compile 'com.facebook.fresco:animated-gif:1.3.0'
fresco 是 必须 添加 的,webp 和 gif 看项目 按需 添加,这里 拿 WebP 举例
(这里说明一下:如果添加了 animated-webp 的引用,就不用再添加 webpsupport 的引用)
布局文件 activity_main:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.webp.MainActivity">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/sdv"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
Java代码 MainActivity:
package com.example.webp;
import android.graphics.drawable.Animatable;
import android.net.Uri;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.drawee.controller.BaseControllerListener;
import com.facebook.drawee.controller.ControllerListener;
import com.facebook.drawee.interfaces.DraweeController;
import com.facebook.drawee.view.SimpleDraweeView;
import com.facebook.imagepipeline.animated.base.AbstractAnimatedDrawable;
import com.facebook.imagepipeline.image.ImageInfo;
public class MainActivity extends AppCompatActivity {
String webp1 = "https://isparta.github.io/compare-webp/image/gif_webp/webp/1.webp";
SimpleDraweeView sdv;
AbstractAnimatedDrawable animatable;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Fresco.initialize(this);
setContentView(R.layout.activity_main);
sdv = (SimpleDraweeView) findViewById(R.id.sdv);
ControllerListener controllerListener = new BaseControllerListener<ImageInfo>() {
@Override
public void onFinalImageSet(String id, @Nullable ImageInfo imageInfo, @Nullable Animatable anim) {
if (anim != null) {
anim.start();
}
animatable = (AbstractAnimatedDrawable) anim;
}
};
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(Uri.parse(webp1))
.setControllerListener(controllerListener)
.build();
sdv.setController(controller);
// final Animatable animatable = sdv.getController().getAnimatable();
sdv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (animatable != null) {
if (animatable.isRunning()) {
animatable.pause();
} else {
animatable.start();
}
}
}
});
}
}
注意:Fresco.initialize(this); 这句 初始化 代码 应该 放到 Application 里面,我这里 图方便 就放到 Activity 里面了。可以 看到 我 这句代码 放到了 setContentView 之前,因为初始化之前,用该库的 控件 会报错。也就是说,如果初始化放到 setContentView 之后,就会报布局文件 activity_main 里面 SimpleDraweeView 控件 的异常