Bootstrap

在安卓中使用Animation类实现基础动画效果

Animation类是安卓所提供的实现基础动画效果的类,一共有四种不同的效果:半透明渐变、旋转、缩放和移动。可以说所有的复杂动画都可以由这几种基本效果组合而成。而实现这四种效果也非常简单。

先来看例子,以下是界面。这个界面上有一张图片,这张图片就是用来展示动画效果用的。图片下方有几个按钮,点击可以展示不同的动画效果:


构成界面的代码如下,一个ImageView和四个Button组件,没有任何复杂的地方:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.freezzingxu.animationstest.activities.MainActivity">

    <ImageView
        android:id="@+id/IMAGE_VIEW_ANIMATION"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/animation"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/BUTTON_ALPHA"
        app:layout_constraintVertical_bias="0.0"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />

    <Button
        android:id="@+id/BUTTON_ALPHA"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:text="@string/button_alpha"
        app:layout_constraintBottom_toTopOf="@+id/BUTTON_ROTATE"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:onClick="playAnimation"/>

    <Button
        android:id="@+id/BUTTON_ROTATE"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:text="@string/button_rotate"
        app:layout_constraintBottom_toTopOf="@+id/BUTTON_SCALE"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:onClick="playAnimation"/>

    <Button
        android:id="@+id/BUTTON_SCALE"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:text="@string/button_scale"
        app:layout_constraintBottom_toTopOf="@+id/BUTTON_TRANSLATE"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:onClick="playAnimation"/>

    <Button
        android:id="@+id/BUTTON_TRANSLATE"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:text="@string/button_translate"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:onClick="playAnimation"/>

</android.support.constraint.ConstraintLayout>

然后再来看Java 源代码

1.实现了透明半效果渐变效果的方法:

/**
 * 执行半透明效果
 * @param view
 */
public void executeAlpha(View view){

    /*
     *  创建一个半透明效果的动画对象,效果从完全透明到完全不透明
     */
    AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);

    /*
     *  设置动画的持续时间
     */
    alphaAnimation.setDuration(3000);

    /*
     *  为界面对象启动动画效果
     */
    view.startAnimation(alphaAnimation);
}

2.实现了旋转效果的方法:

/**
 * 执行旋转效果
 * @param view
 */
public void executeRotate(View view){
    /*
     *  创建一个旋转动画对象
     *  入参列表含义如下:
     *  1.fromDegrees:从哪个角度开始旋转
     *  2.toDegrees:旋转到哪个角度结束
     *  3.pivotXType:旋转所围绕的圆心的x轴坐标的类型,有ABSOLUT绝对坐标、RELATIVE_TO_SELF相对于自身坐标、RELATIVE_TO_PARENT相对于父控件的坐标
     *  4.pivotXValue:旋转所围绕的圆心的x轴坐标,0.5f表明是以自身这个控件的一半长度为x轴
     *  5.pivotYType:y轴坐标的类型
     *  6.pivotYValue:y轴坐标
     */
    RotateAnimation rotateAnimation = new RotateAnimation(0,360, Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
    /*
     *  设置动画的持续时间
     */
    rotateAnimation.setDuration(3000);
    /*
     *  为界面对象启动动画效果
     */
    view.startAnimation(rotateAnimation);
}

3.实现了缩放效果的方法:

/**
 * 执行缩放效果
 * @param view
 */
public void executeScale(View view){
    /*
     *  创建一个缩放效果的动画
     *  入参列表含义如下:
     *  fromX:x轴的初始值
     *  toX:x轴缩放后的值
     *  fromY:y轴的初始值
     *  toY:y轴缩放后的值
     *  pivotXType:x轴坐标的类型,有ABSOLUT绝对坐标、RELATIVE_TO_SELF相对于自身坐标、RELATIVE_TO_PARENT相对于父控件的坐标
     *  pivotXValue:x轴的值,0.5f表明是以自身这个控件的一半长度为x轴
     *  pivotYType:y轴坐标的类型
     *  pivotYValue:轴的值,0.5f表明是以自身这个控件的一半长度为y轴
     */
    ScaleAnimation scaleAnimation = new ScaleAnimation(0,0.1f,0,0.1f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);

    /*
     *  设置动画的持续时间
     */
    scaleAnimation.setDuration(3000);

    /*
     *  为界面对象启动动画效果
     */
    view.startAnimation(scaleAnimation);
}
4.实现了移动效果的方法:

/**
 * 播放移动效果的动画
 * @param view
 */
public void executeTranslate(View view){
    /*
     *  创建一个移动动画效果
     *  入参的含义如下:
     *  fromXType:移动前的x轴坐标的类型
     *  fromXValue:移动前的x轴的坐标
     *  toXType:移动后的x轴的坐标的类型
     *  toXValue:移动后的x轴的坐标
     *  fromYType:移动前的y轴的坐标的类型
     *  fromYValue:移动前的y轴的坐标
     *  toYType:移动后的y轴的坐标的类型
     *  toYValue:移动后的y轴的坐标
     */
    TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0.5f);

    /*
     *  设置动画的持续时间
     */
    translateAnimation.setDuration(3000);

    /*
     *  为界面对象启动动画效果
     */
    view.startAnimation(translateAnimation);
}

可以看到四种基本动画效果实现起来套路是一样的。

值得注意的是,除了上述代码片段中出现的用于设置动画持续时间的setDuration()方法外,Animation类还有以下一些常用方法:

1、setDuration(long durationMills)
设置动画持续时间(单位:毫秒)


2、setFillAfter(Boolean fillAfter)
如果fillAfter的值为true,则动画执行后,控件将停留在执行结束的状态

3、setFillBefore(Boolean fillBefore)
如果fillBefore的值为true,则动画执行后,控件将回到动画执行之前的状态

4、setStartOffSet(long startOffSet)
设置动画执行之前的等待时间

5、setRepeatCount(int repeatCount)
设置动画重复执行的次数


实现了四种基本的动画效果,再来就是写一个方法,根据不同的按钮来调用不同的效果就可以了:

public void playAnimation(View view){
    ImageView animationImage = (ImageView)this.findViewById(R.id.IMAGE_VIEW_ANIMATION);
    switch(view.getId()){
        case R.id.BUTTON_ALPHA:
            /*
             *  播放透明效果动画
             */
            this.executeAlpha(animationImage);
            break;

        case R.id.BUTTON_ROTATE:
            /*
             *  播放旋转效果动画
             */
            this.executeRotate(animationImage);
            break;

        case R.id.BUTTON_SCALE:
            /*
             *  播放缩放效果动画
             */
            this.executeScale(animationImage);
            break;

        case R.id.BUTTON_TRANSLATE:
            /*
             *  播放移动效果动画
             */
            this.executeTranslate(animationImage);
            break;

        default:
            /*
             *  默认播放透明效果动画
             */
            this.executeAlpha(animationImage);
            break;
    }
}



;