Android实用视图动画及工具系列之一：简单的载入视图和载入动画

实现效果

功能说明

简单的载入视图和载入动画，相信大家一听名字就知道是些什么功能了，本Demo主要实现了安卓逐帧动画的开始播放，暂停和停止功能，适用于新手及新学习Android的码友们，老玩家当然也可以看看，这个还是挺简单挺实用的，在后面会简略介绍实现方法及源代码，同时博客的最后还提供源代码和图片等资源github下载地址。

实现步骤

步骤一：添加逐帧动画资源

顾名思义，逐帧动画就是一帧一帧的播放，在Android原生组件不主持gif的情况下，我们要实现逐帧动画只能使用一张一张图片来逐帧播放以达到效果，如下面的几张图（其他图片资源在源代码内，需要的自行下载，有白色和灰色两套资源）：

将所有帧图片导入到Android项目目录的drawable文件夹下：

步骤二：新建逐帧动画Drawable

在drawable目录下新建xml，取名loading_progress_gray_rotate，输入如下代码（附属性说明）：

animation-list：Android动画列表 

oneshot：true播放一次，false循环播放

item：每项动画

android:drawable：图片索引

android:duration：每帧持续时间

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >

    <item android:duration="100" android:drawable="@drawable/loading_gray_01">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_gray_02">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_gray_03">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_gray_04">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_gray_05">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_gray_06">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_gray_07">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_gray_08">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_gray_09">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_gray_10">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_gray_11">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_gray_12">
    </item>

</animation-list>

步骤三：新建自定义动画类

新建类ListAniImageView，代码如下，此类主要继承自ImageView，实现了基本动画播放，暂停和停止功能，注意包名改为自己的：

package com.jaiky.test.loadinganimation;

import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Author by Jaiky, Email jaikydota@163.com, Date on 9/22/2016.
 * PS: Not easy to write code, please indicate.
 */
public class ListAniImageView extends ImageView {

    private AnimationDrawable animationDrawable;

    public ListAniImageView(Context context) {
        super(context);
        inti();

    }

    public ListAniImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        inti();
    }

    public ListAniImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        inti();
    }

    public void inti() {
        animationDrawable = (AnimationDrawable) getDrawable();
        animationDrawable.start();
    }

    public void startAnimation() {
        animationDrawable.start();
    }

    public void stopAnimation() {
        animationDrawable.setVisible(true, true);
        animationDrawable.stop();
    }

    public void pauseAnimation() {
        animationDrawable.stop();
    }

}

步骤四：Demo测试修改布局和主类

修改activity_main.xml内容如下（注意自定义控件包名）：

<?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"
    android:background="@android:color/black"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.jaiky.test.loadinganimation.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn1"
            android:text="暂停"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <Button
            android:id="@+id/btn2"
            android:text="停止"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <Button
            android:id="@+id/btn3"
            android:text="开始"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
    </LinearLayout>

    <com.jaiky.test.loadinganimation.ListAniImageView
        android:id="@+id/flGray"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_centerInParent="true"
        android:src="@drawable/loading_progress_gray_rotate" />

    <com.jaiky.test.loadinganimation.ListAniImageView
            android:id="@+id/flWhite"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerVertical="true"
        android:src="@drawable/loading_progress_white_rotate" />
</RelativeLayout>

修改MainActiivty内容如下（注意包名）：

package com.jaiky.test.loadinganimation;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    Button btn1, btn2, btn3;
    ListAniImageView flWhite, flGray;

    Object mObject;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn1 = (Button) findViewById(R.id.btn1);
        btn2 = (Button) findViewById(R.id.btn2);
        btn3 = (Button) findViewById(R.id.btn3);
        flWhite = (ListAniImageView) findViewById(R.id.flWhite);
        flGray = (ListAniImageView) findViewById(R.id.flGray);

        //暂停动画（停留在当前帧）
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                flWhite.pauseAnimation();
                flGray.pauseAnimation();
            }
        });
        //停止动画（停止到第一帧）
        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                flWhite.stopAnimation();
                flGray.stopAnimation();
            }
        });
        //开始动画
        btn3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                flWhite.startAnimation();
                flGray.startAnimation();
            }
        });
    }
}

--------------------------------------------------------------------------------------------------------------------

获取源代码及资源文件：

https://github.com/jaikydota/Android-LoadingAnimation

--------------------------------------------------------------------------------------------------------------------

声明

欢迎转载，但请保留文章原始出处
作者：Jaiky_杰哥 
出处：http://blog.csdn.net/jaikydota163/article/details/52098833