天天看点

Android 动图 WebP Gif 的 播放 和 暂停

先说明一下:目前 支持 webp 动图 的 三方图片库,只有Fresco,想控制 动图 播放 和 暂停 的 也只有 Fresco

(声明:博主并不是 Fresco 的 铁粉,其他的三方库也都用过,只不过本文标题的功能 目前只有 Fresco 能简单实现)

先看一下效果:

Android 动图 WebP Gif 的 播放 和 暂停

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 控件 的异常