[移动开发]手把手教你学会Android动画（帧动画、补间动画）

目录

帧动画?

帧动画概念

帧动画的使用

xml实现帧动画

Java实现帧动画

补间动画

概述

xml文件实现补间动画

透明度动画

缩放动画

位移动画

旋转动画

组合动画

用Java实现补间动画

透明度动画

缩放动画

位移动画

旋转动画

?组合动画

帧动画?

帧动画概念

在Android中，帧动画的本质是把一组预先准备好的图片循环切换播放，造成一种动画效果。

帧动画的使用

在安卓中帧动画的实现有两种方式：xml文件和Java去实现

xml实现帧动画

1.首先将所需要用到的图片导入到drawable文件中

2.创建xml文件

在drawable下创建一个xml文件

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false"><!--//是否只播一次-->
    <!--    -->
    <item android:drawable="@drawable/explosion_2"
        android:duration="200">
    </item>
    <item android:drawable="@drawable/explosion_3"
        android:duration="200">
    </item>
    <item android:drawable="@drawable/explosion_4"
        android:duration="200">
    </item>
    <item android:drawable="@drawable/explosion_5"
        android:duration="200">
    </item>
    <item android:drawable="@drawable/explosion_6"
        android:duration="200">
    </item>
    <item android:drawable="@drawable/explosion_7"
        android:duration="200">
    </item>
    <item android:drawable="@drawable/explosion_8"
        android:duration="200">
    </item>
    <item android:drawable="@drawable/explosion_9"
        android:duration="200">
    </item>

</animation-list>

?3.设置布局文件和Activity

给界面设置两个按钮和一个图片控件。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开始"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:text="暂停"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:background="@drawable/animation_baozha"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2"
        app:layout_constraintVertical_bias="0.54" />
</androidx.constraintlayout.widget.ConstraintLayout>

package com.c201801080119.day_5;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    Button mButtonStart;
    Button mButtonStop;
    ImageView mImageViewShow;
    AnimationDrawable mAnimationDrawable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mButtonStart=findViewById(R.id.button);
        mButtonStop=findViewById(R.id.button2);
        mImageViewShow=findViewById(R.id.imageView);
        //加载动画对象
        mAnimationDrawable= (AnimationDrawable) mImageViewShow.getBackground();
        mButtonStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                开始动画
                mAnimationDrawable.start();
            }
        });
        mButtonStop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                暂停动画
                mAnimationDrawable.stop();
            }
        });
    }
}

Java实现帧动画

package com.c201801080119.day_5;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    Button mButtonStart;
    Button mButtonStop;
    ImageView mImageViewShow;
    AnimationDrawable mAnimationDrawable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mButtonStart=findViewById(R.id.button);
        mButtonStop=findViewById(R.id.button2);
        mImageViewShow=findViewById(R.id.imageView);
//        //加载动画对象
//        mAnimationDrawable= (AnimationDrawable) mImageViewShow.getBackground();
        mAnimationDrawable=new AnimationDrawable();
        mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.explosion_2),200);
        mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.explosion_3),200);
        mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.explosion_4),200);
        mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.explosion_5),200);
        mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.explosion_6),200);
        mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.explosion_7),200);
        mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.explosion_8),200);
        mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.explosion_9),200);
        mAnimationDrawable.setOneShot(false);
        mImageViewShow.setBackground(mAnimationDrawable);
        mButtonStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                开始动画
                mAnimationDrawable.start();
            }
        });
        mButtonStop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                暂停动画
                mAnimationDrawable.stop();
            }
        });
    }
}

?

补间动画

概述

在Android动画中，补间动画一共可以分成四类即透明度动画、缩放动画、旋转动画、位移动画。
其实现方法可以通过xml来配置，也可以通过代码来实现。

xml文件实现补间动画

用xml实现补间动画，需要将xml放到res下的anim目录，Android工程默认是没有anim文件夹的，首先在res下创建anim目录，然后构建xml文件

透明度动画

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1"//起始透明度
    android:toAlpha="0.1"//结束透明度
    android:duration="2000"//持续时间>
</alpha>

缩放动画

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.2"//沿X的缩放的起始比例
    android:toXScale="1.5"//沿X缩放的结束比例
    android:fromYScale="0.2"//沿Y缩放的开始比例
    android:toYScale="1.5"//沿Y缩放的结束比例
    android:pivotY="50%"//缩放中轴点的x坐标
    android:pivotX="50%"//缩放中轴点y的坐标
    android:duration="2000"//持续时间>
</scale>

位移动画

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"//起始点x的坐标
    android:toXDelta="320"//结束点x的坐标
    android:fromYDelta="0"//起始点y的坐标
    android:toYDelta="0"//结束点y的坐标
    android:duration="2000"//持续时间>
</translate>

旋转动画

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"//旋转的起始角度
    android:toDegrees="360"//旋转的结束角度
    android:repeatCount="1"//旋转次数
    android:repeatMode="reverse"//设置重复模式，默认restart，但只有当repeatCount大于0或者infinite或-1时 才有效。还可以设置成reverse，表示偶数次显示动画时会做方向相反的运动
    android:duration="1000"//持续时间>

</rotate>

组合动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:pivotX="50%"
    android:pivotY="50%"
    android:fromYScale="0.2"
    android:fromXScale="0.2"
    android:toYScale="1.5"
    android:toXScale="1.5"
    android:duration="2000">
</scale>
    <translate android:fromYDelta="0"
        android:fromXDelta="0"
        android:toYDelta="0"
        android:toXDelta="320"
        android:duration="2000">
    </translate>
    <rotate android:fromDegrees="0"
        android:toDegrees="360"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:duration="1000">
    </rotate>
    <alpha android:fromAlpha="1"
        android:toAlpha="0.1">
    </alpha>
</set>

在Activity中的调用

 Animation animation= AnimationUtils.loadAnimation(MainActivity2.this,R.anim.anim_alpha);
                imageView.startAnimation(animation);

用Java实现补间动画

用Java代码去实现主要是实现补间动画的一些构造方法。

透明度动画

/* 
        //fromAlpha   动画开始的透明度，从0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明
        //toAlpha       动画结束时的透明度，也是从0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明
        public AlphaAnimation(float fromAlpha, float toAlpha) {
        }
*/
                Animation animation=new AlphaAnimation(0,1);
                animation.setDuration(2000);
                imageView.startAnimation(animation);

缩放动画

 /**
                public ScaleAnimation(float fromX, float toX, float fromY, float toY,
                int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {
                }
                fromX	沿着X轴缩放的起始比例
                fromY	沿着X轴缩放的起始比例
                toX	沿着X轴缩放的结束比例
                toY	沿着Y轴缩放的结束比例
                pivotXValue	缩放的中轴点X坐标，即距离自身左边缘的位置，比如50%就是以图像的 中心为中轴点
                pivotXType	有2种模式，RELATIVE_TO_SELF（相对于自身）和RELATIVE_TO_PARENT（相对于父布局）pivotx,pivotY的值就应该是0-1的浮点数，分别对应xml中的%（自身）和%p（父布局）
                pivotYValue	缩放的中轴点Y坐标，即距离自身左边缘的位置，比如50%就是以图像的 中心为中轴点
                pivotYType	同pivotXType
                **/
                Animation animation= new ScaleAnimation(0, 1.4f, 0, 1.4f,
                        ScaleAnimation.RELATIVE_TO_SELF,0.5f,ScaleAnimation.RELATIVE_TO_SELF,0.5f);
                animation.setDuration(2000);
                imageView.startAnimation(animation);

位移动画

  /**         //fromXDelta     起始点X轴坐标，可以是数值、百分数、百分数p 三种样式，同scale
                //fromYDelta    起始点Y轴从标，可以是数值、百分数、百分数p 三种样式
                //toXDelta         结束点X轴坐标
                //toYDelta        结束点Y轴坐标
                // fromYType、toYType同ScaleAnimation，
 public TranslateAnimation(int fromXType, float fromXValue, int toXType,
                float toXValue,int fromYType, float fromYValue, int toYType, float toYValue) {
                }
    **/
                Animation animation= new TranslateAnimation(TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0.5f,
                        TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0.5f);
                animation.setDuration(2000);
                imageView.startAnimation(animation);

旋转动画

     /**
                *
                 public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType,
                 float pivotXValue, int pivotYType, float pivotYValue) {
                 }
                 fromDegrees="0"//旋转的起始角度
                 toDegrees="360"//旋转的结束角度
                 repeatCount="1"//旋转次数
                 android:repeatMode="reverse"//设置重复模式，默认restart，但只有当repeatCount大于0或者infinite或-1时 才有效。还可以设置成reverse，表示偶数次显示动画时会做方向相反的运动
                * */
                Animation animation= new RotateAnimation(0, -720, RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                        RotateAnimation.RELATIVE_TO_SELF, 0.5f);
                animation.setDuration(2000);
                imageView.startAnimation(animation);

?组合动画

  Animation rotateAnimation = new RotateAnimation(0, -720, RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                        RotateAnimation.RELATIVE_TO_SELF, 0.5f);
                rotateAnimation.setDuration(2000);
                Animation translateAnimation = new TranslateAnimation(TranslateAnimation.RELATIVE_TO_PARENT, 0, TranslateAnimation.RELATIVE_TO_PARENT, 0.5f,
                        TranslateAnimation.RELATIVE_TO_PARENT, 0, TranslateAnimation.RELATIVE_TO_PARENT, 0.5f);
                translateAnimation.setDuration(2000);
                Animation scaleAnimation = new ScaleAnimation(0, 1.4f, 0, 1.4f, ScaleAnimation.RELATIVE_TO_SELF,
                        0.5f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
                scaleAnimation.setDuration(2000);
                Animation alphaAnimation = new AlphaAnimation(0, 1);
                alphaAnimation.setDuration(2000);
                AnimationSet animationSet = new AnimationSet(true);
                animationSet.addAnimation(rotateAnimation);
                animationSet.addAnimation(translateAnimation);
                animationSet.addAnimation(scaleAnimation);
                animationSet.addAnimation(alphaAnimation);
                animationSet.setDuration(4000);
                animationSet.setFillAfter(true);
                imageView.startAnimation(animationSet);

完整代码

package com.c201801080119.day_5;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity2 extends AppCompatActivity {
    Button button;
    Button button1;
    Button button2;
    Button button3;
    Button button4;
    ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        button=findViewById(R.id.button3);
        button1=findViewById(R.id.button4);
        button2=findViewById(R.id.button5);
        button3=findViewById(R.id.button6);
        button4=findViewById(R.id.button7);
        imageView=findViewById(R.id.imageView2);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                Animation animation= AnimationUtils.loadAnimation(MainActivity2.this,R.anim.anim_alpha);
//                imageView.startAnimation(animation);
/**
        //fromAlpha   动画开始的透明度，从0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明
        //toAlpha       动画结束时的透明度，也是从0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明
        public AlphaAnimation(float fromAlpha, float toAlpha) {
        }
**/
                Animation animation=new AlphaAnimation(0,1);
                animation.setDuration(2000);
                imageView.startAnimation(animation);
            }
        });
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                Animation animation=AnimationUtils.loadAnimation(MainActivity2.this,R.anim.anim_scale);
               /**
                public ScaleAnimation(float fromX, float toX, float fromY, float toY,
                int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {
                }
                fromX	沿着X轴缩放的起始比例
                fromY	沿着X轴缩放的起始比例
                toX	沿着X轴缩放的结束比例
                toY	沿着Y轴缩放的结束比例
                pivotXValue	缩放的中轴点X坐标，即距离自身左边缘的位置，比如50%就是以图像的 中心为中轴点
                pivotXType	有2种模式，RELATIVE_TO_SELF（相对于自身）和RELATIVE_TO_PARENT（相对于父布局）pivotx,pivotY的值就应该是0-1的浮点数，分别对应xml中的%（自身）和%p（父布局）
                pivotYValue	缩放的中轴点Y坐标，即距离自身左边缘的位置，比如50%就是以图像的 中心为中轴点
                pivotYType	同pivotXType
                **/
                Animation animation= new ScaleAnimation(0, 1.4f, 0, 1.4f,
                        ScaleAnimation.RELATIVE_TO_SELF,0.5f,ScaleAnimation.RELATIVE_TO_SELF,0.5f);
                animation.setDuration(2000);
                imageView.startAnimation(animation);
            }
        });
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

//                Animation animation =AnimationUtils.loadAnimation(MainActivity2.this,R.anim.anim_translate);
    /**         //fromXDelta     起始点X轴坐标，可以是数值、百分数、百分数p 三种样式，同scale
                //fromYDelta    起始点Y轴从标，可以是数值、百分数、百分数p 三种样式
                //toXDelta         结束点X轴坐标
                //toYDelta        结束点Y轴坐标
                // fromYType、toYType同ScaleAnimation，
 public TranslateAnimation(int fromXType, float fromXValue, int toXType,
                float toXValue,int fromYType, float fromYValue, int toYType, float toYValue) {
                }
    **/
                Animation animation= new TranslateAnimation(TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0.5f,
                        TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0.5f);
                animation.setDuration(2000);
                imageView.startAnimation(animation);
            }
        });
        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                Animation animation=AnimationUtils.loadAnimation(MainActivity2.this,R.anim.anim_rotate);
                /**
                *
                 public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType,
                 float pivotXValue, int pivotYType, float pivotYValue) {
                 }
                 fromDegrees="0"//旋转的起始角度
                 toDegrees="360"//旋转的结束角度
                 repeatCount="1"//旋转次数
                 android:repeatMode="reverse"//设置重复模式，默认restart，但只有当repeatCount大于0或者infinite或-1时 才有效。还可以设置成reverse，表示偶数次显示动画时会做方向相反的运动
                * */
                Animation animation= new RotateAnimation(0, -720, RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                        RotateAnimation.RELATIVE_TO_SELF, 0.5f);
                animation.setDuration(2000);
                imageView.startAnimation(animation);
            }
        });
        button4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                Animation animation=AnimationUtils.loadAnimation(MainActivity2.this,R.anim.anim_set);
                Animation rotateAnimation = new RotateAnimation(0, -720, RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                        RotateAnimation.RELATIVE_TO_SELF, 0.5f);
                rotateAnimation.setDuration(2000);
                Animation translateAnimation = new TranslateAnimation(TranslateAnimation.RELATIVE_TO_PARENT, 0, TranslateAnimation.RELATIVE_TO_PARENT, 0.5f,
                        TranslateAnimation.RELATIVE_TO_PARENT, 0, TranslateAnimation.RELATIVE_TO_PARENT, 0.5f);
                translateAnimation.setDuration(2000);
                Animation scaleAnimation = new ScaleAnimation(0, 1.4f, 0, 1.4f, ScaleAnimation.RELATIVE_TO_SELF,
                        0.5f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
                scaleAnimation.setDuration(2000);
                Animation alphaAnimation = new AlphaAnimation(0, 1);
                alphaAnimation.setDuration(2000);
                AnimationSet animationSet = new AnimationSet(true);
                animationSet.addAnimation(rotateAnimation);
                animationSet.addAnimation(translateAnimation);
                animationSet.addAnimation(scaleAnimation);
                animationSet.addAnimation(alphaAnimation);
                animationSet.setDuration(4000);
                animationSet.setFillAfter(true);
                imageView.startAnimation(animationSet);
            }
        });
    }
}

?