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 [email protected], 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



你可能感兴趣的:(android动画,逐帧动画,载入动画,实用工具动画视图,载入工具)