Android图形动画学习之补间动画

                                          Android动画学习之补间动画

        首先介绍一下相关基础知识。补间动画的使用方式分为两种：在XML 代码 或Java 代码里设置，接下来我说的是用XML实现补间动画。
        1.使用图像透明度Alpha实现动画
        XML定义时，android：后的主要设定。
             fromAlpha：初始透明度，0.0全透，1.0不透明；
             toAlpha：动画结束时透明度；

        2.使用图像缩放Scale实现动画
        XML定义时，android：后的主要设定。
             fromXScale、 fromYScale：初始水平、垂直方向的缩放系数；
             toXscale、toYScale：动画结束时水平、垂直方向的缩放系数；
             pivotX、pivotY：指定轴心点X、Y的坐标：可以是百分比；

        3.使用图像旋转Rotate实现动画
        XML定义时，android：后的主要设定。
             fromDegrees、toDegrees：指定开始、结束时的旋转角度；
             pivotX、pivotY：指定旋转轴心点的X、Y坐标；

        4.使用图像旋转Rotate实现动画
        XML定义时，android：后的主要设定。
             fromXDelta、toXDelta：指定开始、结束时水平方向的位置；
             fromYDelta、toYDelta：指定开始、结束时垂直方向的位置；

        ☆☆☆ 4种动画效果的公有属性：（介绍后边三种动画时不再重复）
             duration：动画持续时间，单位为毫秒；
             startOffset：动画延迟开始时间，单位为毫秒；
             fillBefore：动画播放完后，视图是否会停留在动画开始的状态，默认为true；
             fillAfter：动画结束时透明度动画播放完后，视图是否会停留在
             动画结束的状态，优先于fillBefore值，默认为false；
             fillEnabled：是否应用fillBefore值，对fillAfter值无影响，默认为true；
             repeatMode：重复方式：reverse（反向）或restart（重新开始）；
             repeatCount：重复次数，数值或infinite（无限）；
             interpolator：控制动画的变化速度：匀速，加速，减速，抛物线速等，含多种可选属性；

        ☆☆☆实现补间动画的步骤。
        1.在res文件夹中创建anim文件夹。
        2.在anim文件夹下建立XML文件，编写代码来设置补间动画。
        3.在界面中放置一个ImageView并放入图片。
        4.在java代码中使用Animation定义动画对象，并从xml加载资源。
        5.使用imageView的starAnimation( Animation anim)来启动动画。

        ☆☆☆使用Android Studio实现补间动画。

        1.打开Android Studio，新建工程后，在res文件夹中创建anim文件夹，在anim文件夹下建立XML文件，编写代码来设置动画。
                
        anim_alpha.xml。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:repeatMode="reverse"
        android:repeatCount="2"
        android:duration="2000"/>
</set>

        anim_scale.xml。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:fromXScale="0"
        android:toXScale="2"
        android:fromYScale="0"
        android:toYScale="2"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatMode="reverse"
        android:repeatCount="2"
        android:duration="2000"/>
</set>

        anim_rotate.xml。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="0"
        android:repeatMode="reverse"
        android:repeatCount="2"
        android:duration="2000"/>
</set>

        anim_translate.xml。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="500"
        android:fromYDelta="0"
        android:toYDelta="500"
        android:repeatMode="reverse"
        android:repeatCount="2"
        android:duration="2000"/>
</set>

        scale和rotate的混合anim_rs.xml。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:fromXScale="0" android:fromYScale="0"
        android:toXScale="1.5" android:toYScale="1.5"
        android:pivotX="50%" android:pivotY="50%"
        android:repeatMode="reverse"
        android:repeatCount="2"
        android:duration="2000"
        />
    <rotate
        android:fromDegrees="0" android:toDegrees="1800"
        android:pivotX="50%" android:pivotY="50%"
        android:repeatMode="restart"
        android:repeatCount="2"
        android:duration="2000"
        />
</set>

        2.在activity_main.xml中，建立5个Button，1个ImageView，在res文件夹中drawable文件夹，放入一张任意图片。
                

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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="lession.example.com.learnanimation.MainActivity">
    
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            
            <Button
                android:text="Alpha实现动画"
                android:layout_width="152dp"
                android:layout_height="wrap_content"
                android:id="@+id/button"
                android:textAllCaps="false"
                android:textColor="@android:color/holo_red_dark"
                android:textSize="16sp"
                android:layout_weight="1" />
                
            <Button
                android:text="Scale实现动画"
                android:layout_width="148dp"
                android:layout_height="wrap_content"
                android:id="@+id/button2"
                android:textAllCaps="false"
                android:textColor="@android:color/holo_red_dark"
                android:textSize="16sp"
                android:layout_weight="1" />
        </LinearLayout>
        
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            
            <Button
                android:text="Rotate实现动画"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/button3"
                android:textAllCaps="false"
                android:textColor="@android:color/holo_red_dark"
                android:textSize="16sp"
                android:layout_weight="1" />
                
            <Button
                android:text="Traslate实现动画"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/button4"
                android:textAllCaps="false"
                android:textColor="@android:color/holo_red_dark"
                android:textSize="16sp"
                android:layout_weight="1" />
        </LinearLayout>
        
        <Button
            android:text="混合动画"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/button5"
            android:textColor="@android:color/holo_red_dark"
            android:textSize="16sp"/>
            
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/penguins"
            android:id="@+id/imageView" />
    </LinearLayout>
</RelativeLayout>

        3.在MainActivity.java中，编写相关代码。

package lession.example.com.learnanimation;
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.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button bt1 = (Button) findViewById(R.id.button);
        Button bt2 = (Button) findViewById(R.id.button2);
        Button bt3 = (Button) findViewById(R.id.button3);
        Button bt4 = (Button) findViewById(R.id.button4);
        Button bt5 = (Button) findViewById(R.id.button5);
        final Animation mAt1 = AnimationUtils.loadAnimation(this,R.anim.anim_alpha);
        final Animation mAt2 = AnimationUtils.loadAnimation(this,R.anim.anim_scale);
        final Animation mAt3 = AnimationUtils.loadAnimation(this,R.anim.anim_rotate);
        final Animation mAt4 = AnimationUtils.loadAnimation(this,R.anim.anim_translate);
        final Animation mAt5 = AnimationUtils.loadAnimation(this,R.anim.anim_rs);
        final ImageView iv = (ImageView) findViewById(R.id.imageView);
        bt1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                iv.startAnimation(mAt1);
            }
        });
        bt2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                iv.startAnimation(mAt2);
            }
        });
        bt3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                iv.startAnimation(mAt3);
            }
        });
        bt4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                iv.startAnimation(mAt4);
            }
        });
        bt5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                iv.startAnimation(mAt5);
            }
        });
    }
}

        运行结果：

                        

        这就是补间动画的使用，如果转载以及CV操作，请务必注明出处，谢谢！