Android动画的使用——补间动画

基础知识

谈起 Android动画，我们就得讲讲他的分类：从大的方向来说主要分为两类：View动画（视图动画）和 属性动画。其中 View动画又包括 补间动画 和 帧动画。其中，补间动画 使用广泛，下面我们一起来看看如何实现其动画效果。

补间动画：说白了就是涵盖了 平移、缩放、旋转 和 透明度四种变化的动画。实现方式有两种：xml文件 和 java代码

平移

效果展示

xml 方式

使用步骤：

      1、res 下 创建 anim 文件夹，并创建 xxx.xml 文件

注意：让你创建 anim 名字的文件夹，你就别不信邪搞别的名字。

<?xml version="1.0" encoding="utf-8"?>
<!--set 表示动画集合，可放各个动画组合，同时设置时间、最后的位置等属性-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000" android:fillAfter="true">
<!-- translate    平移动画-->
    <!--        50%p 表示 相对于父控件宽高-->
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXDelta="0%p" android:toXDelta="50%p" android:fromYDelta="0%p" android:toYDelta="50%p">
    </translate>
</set>

     2、代码调用

package com.wust.myanimation;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView tv_hello_world;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取控件
        tv_hello_world = findViewById(R.id.tv_hello_world);
        //利用 AnimationUtils 这个工具类获取 Animation
        Animation translate = AnimationUtils.loadAnimation(this, R.anim.translate);
        //因为这一步我们在 xml 中做了申明，所以这里不需要写，但是要记住，Duration 不设置你将会看不到动画
//        translate.setDuration(3000);
        //开始动画
        tv_hello_world.startAnimation(translate);
    }
}

 代码方式

使用步骤：

1. 编写java代码

package com.wust.myanimation;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView tv_hello_world;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取控件
        tv_hello_world = findViewById(R.id.tv_hello_world);
        //利用 AnimationUtils 这个工具类获取 Animation Animation.RELATIVE_TO_PARENT:表示后面的值相对于父控件
        Animation translate = new TranslateAnimation(Animation.RELATIVE_TO_PARENT,0,Animation.RELATIVE_TO_PARENT,0.5f,
                Animation.RELATIVE_TO_PARENT,0,Animation.RELATIVE_TO_PARENT,0.5f);
        //设置运动完了之后是否回来
        translate.setFillAfter(true);
        //这一步不能忘记了
        translate.setDuration(3000);
        //开始动画
        tv_hello_world.startAnimation(translate);
    }
}

缩放

效果展示

xml 方式

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" 
android:fillAfter="true" android:duration="3000">
    <scale 
     android:fromXScale="0%" 
     android:toXScale="100%" 
     android:fromYScale="0%" 
     android:toYScale="100%"/>
</set>

package com.wust.myanimation;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView tv_hello_world;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取控件
        tv_hello_world = findViewById(R.id.tv_hello_world);
        //利用 AnimationUtils 这个工具类获取 Animation Animation.RELATIVE_TO_PARENT:表示后面的值相对于父控件
        Animation scale = AnimationUtils.loadAnimation(this,R.anim.scale);
        //开始动画
        tv_hello_world.startAnimation(scale);
    }
}

java代码方式

package com.wust.myanimation;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView tv_hello_world;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取控件
        tv_hello_world = findViewById(R.id.tv_hello_world);
        //利用 AnimationUtils 这个工具类获取 Animation Animation.RELATIVE_TO_SELF:表示后面的值相对于自己 这里的值大小都是 [0,1]
        Animation scale = new ScaleAnimation(0,1,0,1,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        //设置运动完了之后是否回来
        scale.setFillAfter(true);
        //这一步不能忘记了
        scale.setDuration(3000);
        //开始动画
        tv_hello_world.startAnimation(scale);
    }
}

旋转 和 透明度大家根据上面两种方式的规律自行尝试，我们抓紧篇幅赶紧来讲讲如何将这四种动画集合在一起展示。

综合动画

效果展示

xml方式

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

    <scale 
     android:pivotX="0%" 
     android:pivotY="0%" 
     android:fromXScale="0%" 
     android:toXScale="100%" 
     android:fromYScale="0%" 
     android:toYScale="100%"/>

    <alpha 
     android:fromAlpha="0" 
     android:toAlpha="1"/>

    <rotate 
     android:pivotY="0%" 
     android:pivotX="0%" 
     android:fromDegrees="0" 
     android:toDegrees="18"/>
</set>

package com.wust.myanimation;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView tv_hello_world;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取控件
        tv_hello_world = findViewById(R.id.tv_hello_world);
        //利用 AnimationUtils 这个工具类获取 Animation Animation.RELATIVE_TO_SELF:表示后面的值相对于自己 这里的值大小都是 [0,1]
        Animation scale = AnimationUtils.loadAnimation(this,R.anim.multianim);
        //开始动画
        tv_hello_world.startAnimation(scale);
    }
}

java代码方式

package com.wust.myanimation;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.BounceInterpolator;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView tv_hello_world;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取控件
        tv_hello_world = findViewById(R.id.tv_hello_world);
        //利用 AnimationUtils 这个工具类获取 Animation Animation.RELATIVE_TO_SELF:表示后面的值相对于自己 这里的值大小都是 [0,1]
        Animation translate = new TranslateAnimation(Animation.RELATIVE_TO_PARENT,0,
                Animation.RELATIVE_TO_PARENT,0.5f,
                Animation.RELATIVE_TO_PARENT,0,
                Animation.RELATIVE_TO_PARENT,0.5f);
        Animation scale = new ScaleAnimation(0,1,0,1,
                Animation.RELATIVE_TO_SELF,0.5f,
                Animation.RELATIVE_TO_SELF,0.5f);
        Animation alpha = new AlphaAnimation(0, 1);
        Animation rotate = new RotateAnimation(0, 18,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        //创建 AnimationSet 装 Animation
        AnimationSet animationSet = new AnimationSet(false);
        animationSet.addAnimation(translate);
        animationSet.addAnimation(scale);
        animationSet.addAnimation(alpha);
        animationSet.addAnimation(rotate);
        animationSet.setFillAfter(true);
        animationSet.setDuration(3000);
        //开始动画
        tv_hello_world.startAnimation(animationSet);
    }
}

动画监听

animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                //动画开始时调用
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //动画结束时调用
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                //动画重复时调用
            }
});

总结

在 java 代码中，我们主要用到了如下几个类： Animation  |||  TranslateAnimation、ScaleAnimation、RotateAnimation、 AlphaAnimation  ||| AnimationSet 。

从颜色中可以看到，总的分为三类：Animation 是父亲级别，TranslateAnimation、ScaleAnimation、RotateAnimation、 AlphaAnimation 继承自 Animation，表示具体动画，

AnimationSet 继承自 Animation，表示动画集合。

View动画 ---- 朴间动画 的应用场景：

• 标准的动画效果：平移、旋转、缩放和透明度
• 特殊的应用场景：

1. Activity切换效果
2. Fragment切换效果
3. 视图组 （ViewGroup）中子元素的出场效果