Android补间与帧动画详解-优快云博客

思维导图：

动画两大类

View Animation视图动画

① 补间动画 Tween Animation

1、什么是补间动画

Tween（补间）动画可以在一个视图容器内执行一系列简单变换（位置、大小、旋转、透明度）。譬如，如果你有一个TextView对象，您可以移动、旋转、缩放、透明度设置其文本，当然，如果它有一个背景图像，背景图像会随着文本变化。

2、补间动画种类

java类名	xml关键字	描述信息
AlphaAnimation	`<alpha>` 放置在res/anim/目录下	渐变透明度动画效果
RotateAnimation	`<rotate>` 放置在res/anim/目录下	画面转移旋转动画效果
ScaleAnimation	`<scale>` 放置在res/anim/目录下	渐变尺寸伸缩动画效果
TranslateAnimation	`<translate>` 放置在res/anim/目录下	画面转换位置移动动画效果
AnimationSet	`<set>` 放置在res/anim/目录下	一个持有其它动画元素alpha、scale、translate、rotate或者其它set元素的容器

3、属性详解

3.1Animation属性

xml属性	java方法	解释
android:detachWallpaper	setDetachWallpaper(boolean)	是否在壁纸上运行
android:duration	setDuration(long)	动画持续时间，毫秒为单位
android:fillAfter	setFillAfter(boolean)	控件动画结束时是否保持动画最后的状态
android:fillBefore	setFillBefore(boolean)	控件动画结束时是否还原到开始动画前的状态
android:fillEnabled	setFillEnabled(boolean)	与android:fillBefore效果相同
android:interpolator	setInterpolator(Interpolator)	设定插值器（指定的动画效果，譬如回弹等）
android:repeatCount	setRepeatCount(int)	重复次数
android:repeatMode	setRepeatMode(int)	重复类型有两个值，reverse表示倒序回放，restart表示从头播放
android:startOffset	setStartOffset(long)	调用start函数之后等待开始运行的时间，单位为毫秒
android:zAdjustment	setZAdjustment(int)	表示被设置动画的内容运行时在Z轴上的位置（top/bottom/normal），默认为normal

3.2ALpha属性详解

xml属性	java方法	解释
android:fromAlpha	AlphaAnimation(float fromAlpha, …)	动画开始的透明度（0.0到1.0，0.0是全透明，1.0是不透明）
android:toAlpha	AlphaAnimation(…, float toAlpha)	动画结束的透明度，同上

3.3Rotate属性详解

xml属性	java方法	解释
android:fromDegrees	RotateAnimation(float fromDegrees, …)	旋转开始角度，正代表顺时针度数，负代表逆时针度数
android:toDegrees	RotateAnimation(…, float toDegrees, …)	旋转结束角度，正代表顺时针度数，负代表逆时针度数
android:pivotX	RotateAnimation(…, float pivotX, …)	缩放起点X坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）
android:pivotY	RotateAnimation(…, float pivotY)	缩放起点Y坐标，同上规律

3.4Scale属性详解

xml属性	java方法	解释
android:fromXScale	ScaleAnimation(float fromX, …)	初始X轴缩放比例，1.0表示无变化
android:toXScale	ScaleAnimation(…, float toX, …)	结束X轴缩放比例
android:fromYScale	ScaleAnimation(…, float fromY, …)	初始Y轴缩放比例
android:toYScale	ScaleAnimation(…, float toY, …)	结束Y轴缩放比例
android:pivotX	ScaleAnimation(…, float pivotX, …)	缩放起点X轴坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）
android:pivotY	ScaleAnimation(…, float pivotY)	缩放起点Y轴坐标，同上规律

3.5 Translate 属性详解

xml属性	java方法	解释
android:fromXDelta	TranslateAnimation(float fromXDelta, …)	起始点X轴坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）
android:fromYDelta	TranslateAnimation(…, float fromYDelta, …)	起始点Y轴从标，同上规律
android:toXDelta	TranslateAnimation(…, float toXDelta, …)	结束点X轴坐标，同上规律
android:toYDelta	TranslateAnimation(…, float toYDelta)	结束点Y轴坐标，同上规律

Animation类的方法	解释
reset()	重置Animation的初始化
cancel()	取消Animation动画
start()	开始Animation动画
setAnimationListener(AnimationListener listener)	给当前Animation设置动画监听
hasStarted()	判断当前Animation是否开始
hasEnded()	判断当前Animation是否结束

View类的常用动画操作方法	解释
startAnimation(Animation animation)	对当前View开始设置的Animation动画
clearAnimation()	取消当View在执行的Animation动画

案列:

anim文件夹下

iv_alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0.3"
    android:duration="3000"
    android:fillAfter="true"
    >
</alpha>

iv_rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="720"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="3000"
    android:fillAfter="true"
    >

</rotate>

iv_scale.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="100%"
    android:toXScale="20%"
    android:fromYScale="100%"
    android:toYScale="20%"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="100"
    >
</scale>

iv_scale2.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="20%"
    android:toXScale="100%"
    android:fromYScale="20%"
    android:toYScale="100%"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="100"
    >
</scale>

iv_translate.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="50%"
    android:fromYDelta="0"
    android:toYDelta="50%"
    android:duration="3000"
    android:fillAfter="true"
    >
</translate>

iv_all.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="true"
    >
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.3"
        >
    </alpha>
    <rotate
        android:fromDegrees="0"
        android:toDegrees="720"
        android:pivotX="50%"
        android:pivotY="50%"
        >
    </rotate>
    <scale
        android:fromXScale="100%"
        android:toXScale="50%"
        android:fromYScale="100%"
        android:toYScale="150%"
        android:pivotX="50%"
        android:pivotY="50%"
        >
    </scale>
    <translate
        android:fromXDelta="0"
        android:toXDelta="50%"
        android:fromYDelta="0"
        android:toYDelta="50%"
        >
    </translate>
</set>

XML 布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    tools:context="com.zking.administrator.g160628_android17_animation.MainActivity">

    <ImageView
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/heart"
        android:id="@+id/iv_main_image"
        />
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="alpha"
            android:onClick="operation"
            android:id="@+id/btn_main_alpha"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="rotate"
            android:onClick="operation"
            android:id="@+id/btn_main_rotate"
            />
<Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="scale"
            android:onClick="operation"
            android:id="@+id/btn_main_scale"
            />
<Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="translate"
            android:onClick="operation"
            android:id="@+id/btn_main_translate"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="all"
            android:onClick="operation"
            android:id="@+id/btn_main_all"
            />
    </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

Java核心代码

package com.zking.administrator.g160628_android17_animation;

import android.animation.ObjectAnimator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private ImageView iv_main_image;
    private Animation animation;
    private Animation animation2;
    private Animation animation1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv_main_image = (ImageView) findViewById(R.id.iv_main_image);

        iv_main_image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "点击了图片", Toast.LENGTH_SHORT).show();
            }
        });
        
        
    }
    public void operation(View view){
        switch (view.getId()) {
            case R.id.btn_main_alpha:
                //加载动画
                animation = AnimationUtils.loadAnimation(this, R.anim.iv_alpha);
                break;
            case R.id.btn_main_rotate:
                //加载动画
                 animation=AnimationUtils.loadAnimation(this,R.anim.iv_rotate);
                break;
            case R.id.btn_main_scale:
                //加载动画
                //缩动画
                animation1 = AnimationUtils.loadAnimation(this, R.anim.iv_scale);
                //放动画
                animation2 = AnimationUtils.loadAnimation(this, R.anim.iv_scale2);
                //给动画设置监听
                animation1.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                          iv_main_image.startAnimation(animation2);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });
                animation2.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        iv_main_image.startAnimation(animation1);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });
                //给图片开启动画
                iv_main_image.startAnimation(animation1);
                return;
            case R.id.btn_main_translate:
                //加载动画
                //animation=AnimationUtils.loadAnimation(this,R.anim.iv_translate);

                //使用属性动画实现图片的移动
                ObjectAnimator.ofFloat(iv_main_image,"translationX",0,200).setDuration(2000).start();
                ObjectAnimator.ofFloat(iv_main_image,"translationY",0,200).setDuration(2000).start();

                break;
            case R.id.btn_main_all:
                animation=AnimationUtils.loadAnimation(this,R.anim.iv_all);
                break;
        }
       // iv_main_image.startAnimation(animation);

    }
}

②帧动画 Frame Animation

Property Animation (3.0以后才有的) 属性动画

1、什么是帧动画

Drawable动画其实就是Frame动画（帧动画），它允许你实现像播放幻灯片一样的效果，这种动画的实质其实是Drawable，所以这种动画的XML定义方式文件一般放在res/drawable/目录下。

2、帧动画的详解

<animation-list> 必须是根节点，包含一个或者多个<item>元素，属性有：android:oneshot true代表只执行一次，false循环执行。

<item> 类似一帧的动画资源。<item>

animation-list的子项，包含属性如下：

android:drawable 一个frame的Drawable资源。

android:duration 一个frame显示多长时间。

帧动画实例

XML代码：iv_frame.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true"
    >
       <item android:drawable="@drawable/anim_0010001" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010002" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010003" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010004" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010005" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010006" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010007" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010008" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010009" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010010" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010011" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010012" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010013" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010014" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010015" android:duration="2000"></item>
       <item android:drawable="@drawable/anim_0010016" android:duration="200"></item>
       <item android:drawable="@drawable/anim_0010017" android:duration="200"></item>
</animation-list>

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.zking.administrator.g160628_android17_animation.FrameActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iv_frame_image"
        android:background="@drawable/iv_frame"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开始"
        android:onClick="start"
        />


</LinearLayout>

核心代码：

package com.zking.administrator.g160628_android17_animation;

import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class FrameActivity extends AppCompatActivity {

    private ImageView iv_frame_image;
    private AnimationDrawable animationDrawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_frame);
        iv_frame_image = (ImageView) findViewById(R.id.iv_frame_image);
        animationDrawable = (AnimationDrawable) iv_frame_image.getBackground();
    }
    public void start(View view){
        animationDrawable.start();
    }
}

Android—动画