Android中显示GIF动画的实现代码

本文实例讲述了Android中显示GIF动画的实现代码。分享给大家供大家参考,具体如下:

gif图动画在android中还是比较常用的,比如像新浪微博中,有很多gif图片,而且展示非常好,所以我也想弄一个。经过我多方的搜索资料和整理,终于弄出来了,其实github上有很多开源的gif的展示代码,我下载过几个,但是都不是很理想,不是我完全想要的。所以有时候就得自己学会总结,把开源的东西整理成自己的,现在无聊,也正好有朋友需要,所以现在整理了一下,留着以后备用!

废话不多说,直接上图:

在这里主要用的是:android中的android.graphics.Movie 这个类,这是android提供给我们的一个非常方便的工具。

首先,重写控件View,自定义一个展示gif图的GifView,代码如下:

package net.loonggg.gif.view;
import net.loonggg.gif.R;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Movie;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;
public class GifView extends View {
  /**
   * 默认为1秒
   */
  private static final int DEFAULT_MOVIE_DURATION = 1000;
  private int mMovieResourceId;
  private Movie mMovie;
  private long mMovieStart;
  private int mCurrentAnimationTime = 0;
  private float mLeft;
  private float mTop;
  private float mScale;
  private int mMeasuredMovieWidth;
  private int mMeasuredMovieHeight;
  private boolean mVisible = true;
  private volatile boolean mPaused = false;
  public GifView(Context context) {
    this(context, null);
  }
  public GifView(Context context, AttributeSet attrs) {
    this(context, attrs, R.styleable.CustomTheme_gifViewStyle);
  }
  public GifView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    setViewAttributes(context, attrs, defStyle);
  }
  @SuppressLint("NewApi")
  private void setViewAttributes(Context context, AttributeSet attrs,
      int defStyle) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
      setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }
    // 从描述文件中读出gif的值,创建出Movie实例
    final TypedArray array = context.obtainStyledAttributes(attrs,
        R.styleable.GifView, defStyle, R.style.Widget_GifView);
    mMovieResourceId = array.getResourceId(R.styleable.GifView_gif, -1);
    mPaused = array.getBoolean(R.styleable.GifView_paused, false);
    array.recycle();
    if (mMovieResourceId != -1) {
      mMovie = Movie.decodeStream(getResources().openRawResource(
          mMovieResourceId));
    }
  }
  /**
   * 设置gif图资源
   *
   * @param movieResId
   */
  public void setMovieResource(int movieResId) {
    this.mMovieResourceId = movieResId;
    mMovie = Movie.decodeStream(getResources().openRawResource(
        mMovieResourceId));
    requestLayout();
  }
  public void setMovie(Movie movie) {
    this.mMovie = movie;
    requestLayout();
  }
  public Movie getMovie() {
    return mMovie;
  }
  public void setMovieTime(int time) {
    mCurrentAnimationTime = time;
    invalidate();
  }
  /**
   * 设置暂停
   *
   * @param paused
   */
  public void setPaused(boolean paused) {
    this.mPaused = paused;
    if (!paused) {
      mMovieStart = android.os.SystemClock.uptimeMillis()
          - mCurrentAnimationTime;
    }
    invalidate();
  }
  /**
   * 判断gif图是否停止了
   *
   * @return
   */
  public boolean isPaused() {
    return this.mPaused;
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    if (mMovie != null) {
      int movieWidth = mMovie.width();
      int movieHeight = mMovie.height();
      int maximumWidth = MeasureSpec.getSize(widthMeasureSpec);
      float scaleW = (float) movieWidth / (float) maximumWidth;
      mScale = 1f / scaleW;
      mMeasuredMovieWidth = maximumWidth;
      mMeasuredMovieHeight = (int) (movieHeight * mScale);
      setMeasuredDimension(mMeasuredMovieWidth, mMeasuredMovieHeight);
    } else {
      setMeasuredDimension(getSuggestedMinimumWidth(),
          getSuggestedMinimumHeight());
    }
  }
  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    mLeft = (getWidth() - mMeasuredMovieWidth) / 2f;
    mTop = (getHeight() - mMeasuredMovieHeight) / 2f;
    mVisible = getVisibility() == View.VISIBLE;
  }
  @Override
  protected void onDraw(Canvas canvas) {
    if (mMovie != null) {
      if (!mPaused) {
        updateAnimationTime();
        drawMovieFrame(canvas);
        invalidateView();
      } else {
        drawMovieFrame(canvas);
      }
    }
  }
  @SuppressLint("NewApi")
  private void invalidateView() {
    if (mVisible) {
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        postInvalidateOnAnimation();
      } else {
        invalidate();
      }
    }
  }
  private void updateAnimationTime() {
    long now = android.os.SystemClock.uptimeMillis();
    // 如果第一帧,记录起始时间
    if (mMovieStart == 0) {
      mMovieStart = now;
    }
    // 取出动画的时长
    int dur = mMovie.duration();
    if (dur == 0) {
      dur = DEFAULT_MOVIE_DURATION;
    }
    // 算出需要显示第几帧
    mCurrentAnimationTime = (int) ((now - mMovieStart) % dur);
  }
  private void drawMovieFrame(Canvas canvas) {
    // 设置要显示的帧,绘制即可
    mMovie.setTime(mCurrentAnimationTime);
    canvas.save(Canvas.MATRIX_SAVE_FLAG);
    canvas.scale(mScale, mScale);
    mMovie.draw(canvas, mLeft / mScale, mTop / mScale);
    canvas.restore();
  }
  @SuppressLint("NewApi")
  @Override
  public void onScreenStateChanged(int screenState) {
    super.onScreenStateChanged(screenState);
    mVisible = screenState == SCREEN_STATE_ON;
    invalidateView();
  }
  @SuppressLint("NewApi")
  @Override
  protected void onVisibilityChanged(View changedView, int visibility) {
    super.onVisibilityChanged(changedView, visibility);
    mVisible = visibility == View.VISIBLE;
    invalidateView();
  }
  @Override
  protected void onWindowVisibilityChanged(int visibility) {
    super.onWindowVisibilityChanged(visibility);
    mVisible = visibility == View.VISIBLE;
    invalidateView();
  }
}

Movie其实管理着GIF动画中的多个帧,只需要通过 setTime() 一下就可以让它在draw()的时候绘出相应的那帧图像。通过当前时间与duration之间的换算关系,是很容易实现GIF动起来的效果。

其次,在xml布局文件中,把这个view定义进去,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >
  <net.loonggg.gif.view.GifView
    android:id="@+id/gif1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal"
    android:enabled="false" />
  <net.loonggg.gif.view.GifView
    android:id="@+id/gif2"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_gravity="center_horizontal"
    android:enabled="false" />
</LinearLayout>

最后,在MainActivity中的使用,代码如下:

package net.loonggg.gif;
import net.loonggg.gif.view.GifView;
import android.app.Activity;
import android.os.Bundle;
public class Gif extends Activity {
  private GifView gif1, gif2;
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    gif1 = (GifView) findViewById(R.id.gif1);
    // 设置背景gif图片资源
    gif1.setMovieResource(R.raw.kitty);
    gif2 = (GifView) findViewById(R.id.gif2);
    gif2.setMovieResource(R.raw.b);
    // 设置暂停
    // gif2.setPaused(true);
  }
}

注意:与ImageView和其他View唯一的区别在于我加了一个gif属性。

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="GifView">
    <attr name="gif" format="reference" />
    <attr name="paused" format="boolean" />
  </declare-styleable>
  <declare-styleable name="CustomTheme">
    <attr name="gifViewStyle" format="reference" />
  </declare-styleable>
</resources>

这个代码已经非常好了,使用也非常方便,其实不懂代码是什么意思也可以很好的用,只需要懂得我写注释的那几行和Activity里面的那几行代码就可以了!

希望本文所述对大家Android程序设计有所帮助。

时间: 2015-10-16

android播放gif格式图片示例

复制代码 代码如下: import android.content.Context;import android.graphics.Canvas;import android.graphics.Movie;import android.util.AttributeSet;import android.view.View;import android.view.ViewGroup.LayoutParams; import com.nmbs.R; public class GifView exten

Android中GIF动图的播放控制和监听详解

前言 最近接手的项目里涉及到了 GIF 动图的播放与监听,在上一版本中对于 GIF 的处理是由 H5 来实现的,因为考虑到用户体验,因此现在的需求是将这块儿原生化,途中差点误入歧途!下面来看看详细的介绍吧. Android 中 GIF 动图处理与监听 刚开始第一个想到的便是 glide , 但是自认为 glide 不能够控制 GIF 以及去监听它,所以网上去搜寻别的方法.看到有一个方案是将图片分帧,一张张的去用逐帧动画来实现. 我开始怀疑给这个解决方案的人了,都什么时代了还做这种费力不讨好,大量

Android通过Movie展示Gif格式图片

本文实例为大家分享Android通过Movie展示Gif格式图片的相关代码,供大家参考,具体内容如下 public class CommonGifView extends View { private Resources mResources; private Movie mMovie; private long startTime = 0; private float widthRatio; private float heightRatio; public CommonGifView(Con

Android中播放Gif动画取巧的办法

由于做的项目,要有个动画的等待效果,第一时间想到的就是Gif(懒,省事),但是试了好多据说能播放Gif的控件,也写过,但是放到魅族手机上就是不能播放,所有就想了个招,既然Gif能在浏览器上播放,那android 的 WebView 也能播放,写了个Demo,果然能播放. 1.将gif的文件放到android的资源文件夹里面 2.写个html,将android的gif源放到WebView里面去加载 <RelativeLayout xmlns:android="http://schemas.a

android 显示gif图片实例详解

在android中不支持gif格式的图片,但是由于我希望在我的程序中刚刚加载的时候有一个小人在跑步表示正在加载.而这个小人跑就是一个gif图片.也就是希望程序一启动时就加载gif图片.在网上查找了一些方法不知道是我使用的android的版本高(android4.4)还是什么问题就是加载不出来.最后想了一个办法加载了出来.这个办法就是将gif放在webView中让其显示. 下面是关于这个的代码: activity_prepare_fullscreen.xml文件 <RelativeLayout x

Android实现可播放GIF动画的ImageView

Android的原生控件并不支持播放GIF格式的图片.我们都知道,在Android中如果想要显示一张图片,可以借助ImageView来完成,但是如果将一张GIF图片设置到ImageView里,它只会显示这张图片的第一帧,不会产生任何的动画效果.今天我们来编写一个自定义的增强型ImageView(继承ImageView),可以播放GIF格式的图片,暂且叫做GifImageView吧. 1.自定义属性 <?xml version="1.0" encoding="utf-8&

Android加载Gif动画实现代码

Android加载Gif动画如何实现?相信大家都很好奇,本文就为大家揭晓,内容如下 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_he

Android使用glide加载gif动画设置播放次数

在使用glide加载gif动画,有时需要设置播放的次数,然后播放玩一次或者几次之后,需要在播放完做一些其他的操作,直接看代码: Glide.with(this) .load(R.drawable.xiaoguo) .diskCacheStrategy(DiskCacheStrategy.SOURCE) .listener(new RequestListener<Integer, GlideDrawable>() { @Override public boolean onException(Ex

Android中Glide加载到RelativeLayout背景图方法示例

前言 Glide是 Google推荐的图片加载库,它可以支持来自url,Android资源,文件,Uri中的图片加载,同时还支持gif图片的加载,以及各种图片显示前的bitmap处理(例如:圆角图片,圆形图片,高斯模糊,旋转,灰度等等),缓存处理,请求优先级处理,动画处理,缩略图处理,图片大小自定义等等.可谓是非常的强大. 一般情况下我们都是使用Glide加载图片到ImageView上,那么如何加载到RelativeLayout的背景上呢? RelativeLayou是一个用于设计用户界面的强大

Android 使用Glide加载网络图片等比例缩放的实现方法

在做android图片加载的时候,由于手机屏幕受限,很多大图加载过来的时候,我们要求等比例缩放,比如按照固定的宽度,等比例缩放高度,使得图片的尺寸比例得到相应的缩放,但图片没有变形.显然按照android:scaleType不能实现,因为会有很多限制,所以必须要自己写算法. 通过Glide来缩放 其实glide提供了这样的方法.具体是显示继承Transformation 的 setResource 方法. (1) 先获取网络或本地图片的宽高 (2) 获取需要的目标宽 (3) 按比例得到目标的高度

Android中Glide加载图片并实现图片缓存

今天工作中遇到Glide的缓存问题,之前在项目中一直用Glide加载本地及网络图片,但是没有考虑过缓存的问题,但是需求中需要提到了,所以在网上查了一下,再这里和大家简单的分享一下Glide的使用方法以及缓存 首先,Glide是Github上开源的一个图片库,作者是bumptech,所以要使用的话,必须添加依赖: compile 'com.github.bumptech.glide:glide:3.6.1' 加载方式: Glide.with(context) .load("https://ss0.

Android中Glide加载圆形图片和圆角图片实例代码

一.简介: 介绍两种使用 BitmapTransformation 来实现 Glide 加载圆形图片和圆角图片的方法.Glide 并不能直接支持 Round Pictures ,需要使用 BitmapTransformation 来进行处理. 二.网上的实现方式 这里介绍下网上常见的方式和使用 RoundedBitmapDrawable 两种方法,本质上是差不多的: 使用 Canvas 和 Paint 来绘制 使用 Android.support.v4.graphics.drawable.Rou

Android中Glide加载库的图片缓存配置究极指南

零.选择Glide 为什么图片加载我首先推荐Glide? 图片加载框架用了不少,从afinal框架的afinalBitmap,Xutils的BitmapUtils,老牌框架universalImageLoader,著名开源组织square的picasso,google推荐的glide到FaceBook推出的fresco.这些我前前后后都体验过,那么面对这么多的框架,该如何选择呢?下面简单分析下我的看法. afinal和Xuils在github上作者已经停止维护了,开源社区最新的框架要属KJFra

Android使用lottie加载json动画的示例代码

Lottie Lottie是 Airbnb 开源的一个动画项目,它支持 iOS, mac OS Android RN,由于某些复杂动画的实现,往往会写很多的 code 来实现它,而且调试动画的效果会比较花费时间.用它来解决某些动画会带来很大的便利. 设计师在After Effects设计好相关的动画,然后安装上BodyMovin这个插件,这个插件,可以帮导出动画效果的 JSON 文件,然后我们可以通过 Lottie 来加载相关的 JSON 文件来实现动画效果. 优势 开发可以方便的实现动画,节约

Android仿微博加载长图滚动查看效果

本文实例为大家分享了Android加载长图片的具体代码,供大家参考,具体内容如下 解决步骤 1.将图片缩放到与控件等宽 2.判断缩放后的图片高度,如果高度大于控件高度较多(这里设置的是1.5倍),认定为长图,可滑动查看图片                      |-如果高度小于控件高度的1.5倍,以控件高度为基准,重新缩放图片 package org.wandcf_ces.fairproject.widgets; import android.annotation.TargetApi; im

Android之仿美团加载数据帧动画

一:先来张效果图(这里是GIF动画,我就截屏的所有没有动画,实际是动的): 二:实现步骤: 1.xml布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" an

Android App中使用Glide加载图片的教程

与其他图片加载库相同,Glide除了可以加载网络图片之外,也可以加载本地图片.甚至还可以从各种各样奇葩的数据源中加载图片. 加载网络图片 很多情况下,我们使用图片加载库就是为了加载网络图片.网络操作是一个很复杂的东西.试想一下,如果没有图片加载库,我们就要手动去下载图片,缓存图片,最后再从文件里面读取bitmap并设置到Imageview里面.这还算好的,要是在Listview里面你会更头疼的.原因我就不说了,你懂的~~再加上各种各样的Bitmap操作,保准你再也不想撸代码了.而且Bitmap这