android 动画实现之 Tween Animation（补间动画）

最新推荐文章于 2024-04-20 12:53:29 发布

IT_MR_Jie

最新推荐文章于 2024-04-20 12:53:29 发布

阅读量252

点赞数

分类专栏：记录文章标签： android 动画

本文链接：https://blog.csdn.net/chu_cheng/article/details/72084755

版权

记录专栏收录该内容

27 篇文章 0 订阅

订阅专栏

对于 Android 初学者来说动画效果的实现是必须掌握的一项技能，官方提供动画分为 Property Animation(属性动画)和 View Animation(视图动画) 两种。而 View Animation 又分为 Tween Animation 和 Frame animation （帧动画）两种。下面为大家介绍一下 Tween Animation （补间动画）的使用。补间动画是通过对对象视图的一系列动画变化操作来实现的的动画效果。但在使用过程中应该注意它操作的是对象的视图层，并没有将它的其他属性位置移动。举个例子，如果你所操作的对象有点击监听，如果将对象移动到其他位置时该对象的点击监听仍在原来的位置。开始真正的使用介绍了：

补间动画目前有5种动画效果：AlphaAnimation（透明度（alpha）渐变效果） TranslateAnimation（位移动画） ScaleAnimation（缩放动画） RotateAnimation（旋转动画） AnimationSet（组合动画）

补间动画的实现可以有 XML 、java 代码实现两种。使用 XML 方式时，在 res 包下新建一个 anim 包。

AlphaAnimation （透明度动画）：继承自 Animation 类，通过改变对象的透明度来实现动画效果。

XML 在 anim 包新建 alpha_animation.xml：

<?xml version="1.0" encoding="utf-8"?>
<!--/**在两秒的时间中将控件的透明度从1到0
android:fromAlpha： 动画开始前控件的透明度，取值0.0-1.0，从透明到不透明。
android:toAlpha： 动画结束时控件的透明度，取值0.0-1.0，从透明到不透明。
android:duration : 动画的持续时间。-->
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromAlpha="1"
    android:toAlpha="0">
</alpha>

TranslateAnimation（位移动画）：继承自 Animation 类，通过移动对象来实现动画效果。

XML 在 anim 包新建 translate_animation.xml：

<?xml version="1.0" encoding="utf-8"?>
<!--在两秒的时间里将控件从左上角位移到右下角
android:fromXDelta： 动画开始前控件的横坐标位置。
android:fromYDelta： 动画开始前控件的纵坐标位置。
android:toXDelta : 动画结束时控件的横坐标位置。
android:toYDelta : 动画结束时控件的纵坐标的位置。
android:duration : 动画的持续时间。-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="100%p"
    android:toYDelta="100%p">

</translate>

ScaleAnimation (缩放动画) ：：继承自 Animation 类，通过伸缩对象来实现动画效果。

XML 在 anim 包新建 scale_animation.xml：

<?xml version="1.0" encoding="utf-8"?>
<!--在两秒的时间里以自身中心为原点缩小为原来的一半
    android:duration：动画持续时间
    android:pivotX:距离左侧的偏移量
    android:pivotY:距离顶部的偏移量
    android:fromXScale：缩放的起始横向尺寸
    android:toXScale：缩放的最终横向尺寸
    android:fromYScale：缩放的起始纵向尺寸
    android:toYScale：缩放的最终纵向尺寸-->
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="1"
    android:toXScale="0.5"
    android:fromYScale="1"
    android:toYScale="50%">
</scale>

Rotateanimation(旋转动画) ：：继承自 Animation 类，通过旋转对象来实现动画效果。

XML 在 anim 包新建 rotate_animation.xml：

<?xml version="1.0" encoding="utf-8"?>
<!--在两秒的时间里以自身中心为原点旋转360度
    android:duration:动画持续时间
    android:fromDegrees:初始旋转度数
    android:toDegrees:旋转的总度数
    android:pivotX:距离左侧的偏移量
    android:pivotY:距离顶部的偏移量-->
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%">

</rotate>

AnimationSet(组合动画) ：：继承自 Animation 类，通过多个子动画的组合对象来实现动画效果。

XML 在 anim 包新建 set_animation.xml：

<?xml version="1.0" encoding="utf-8"?>
<!--组合渐变  参数与单独使用时一致-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000">
    <!--透明度由1到0.5-->
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0.5">

    </alpha>
    <!--已自身中心 旋转7200°-->
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="7200">

    </rotate>
    <!--以自身中心缩放为原来的一半-->
    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="50%"
        android:toYScale="50%">

    </scale>
    <!--由屏幕左上角位移到屏幕右下角-->
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100%p"
        android:toYDelta="100%p">

    </translate>
</set>

使用 xml 来实现动画效果的实例：

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.AlphaAnimation;
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;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.my_photo)
    ImageView myPhoto;
    @BindView(R.id.alpha)//透明度渐变
            Button alpha;
    @BindView(R.id.rotate)//旋转渐变
            Button rotate;
    @BindView(R.id.scale)//缩放渐变
            Button scale;
    @BindView(R.id.translate)//位移渐变
            Button translate;
    @BindView(R.id.set_animation)//组合渐变
            Button setAnimation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
    }

    @OnClick({R.id.alpha, R.id.rotate, R.id.scale, R.id.translate, R.id.set_animation})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.alpha://透明度渐变
                //通过AnimationUtils加载xml中的动画效果来得到实例
                AlphaAnimation alphaAnimation = (AlphaAnimation) AnimationUtils.
                        loadAnimation(this, R.anim.alpha_animation);

                alphaAnimation.setFillAfter(true);//动画结束后视图是否保持在结束的状态 TRUE为是 FALSE为回到初始状态

                myPhoto.startAnimation(alphaAnimation);//开始动画

                //直接使用代码来实现动画效果
//                //new一个AlphaAnimation实例参数1为初始透明度0为最终透明度
//                AlphaAnimation animations=new AlphaAnimation(1,0);
//
//                animations.setFillAfter(true);
//
//                animations.setDuration(2000);//设置动画持续时间
//
//                myPhoto.startAnimation(animations);
                break;
            case R.id.rotate://旋转渐变
                //通过AnimationUtils加载xml中的动画效果来得到实例
                RotateAnimation rotateAnimation = (RotateAnimation) AnimationUtils
                        .loadAnimation(this, R.anim.rotate_animation);

                myPhoto.startAnimation(rotateAnimation);//开始动画

                //代码的方式与透明度类似
                break;
            case R.id.scale://缩放渐变
                //通过AnimationUtils加载xml中的动画效果来得到实例
                ScaleAnimation scaleAnimation = (ScaleAnimation) AnimationUtils
                        .loadAnimation(this, R.anim.scale_animation);

                myPhoto.startAnimation(scaleAnimation);//开始动画

                break;
            case R.id.translate://位移渐变
                //通过AnimationUtils加载xml中的动画效果来得到实例
                TranslateAnimation translateAnimation = (TranslateAnimation) AnimationUtils
                        .loadAnimation(this, R.anim.translate_animation);

                myPhoto.startAnimation(translateAnimation);//开始动画

                break;
            case R.id.set_animation://组合渐变
                //通过AnimationUtils加载xml中的动画效果来得到实例
                AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this, R.anim.set_animation);

                myPhoto.startAnimation(animationSet);//开始动画

                //使用代码的方式实现组合动画的效果
//                AnimationSet animationSet=new AnimationSet(true);//TRUE表示子动画共用一个插值器
//
//                animationSet.addAnimation(new AlphaAnimation(1,0.5f));
//
//                animationSet.addAnimation(new ScaleAnimation(1.0f,0.5f,1.0f,0.5f));
//
//                animationSet.addAnimation(new RotateAnimation(0f,7200.0f,
//                        Animation.RELATIVE_TO_SELF,0.5f,
//                        Animation.RELATIVE_TO_SELF,0.5f));
//
//                animationSet.addAnimation(new TranslateAnimation(
//                        Animation.RELATIVE_TO_PARENT,0,
//                        Animation.RELATIVE_TO_PARENT,1.0f,
//                        Animation.RELATIVE_TO_PARENT,0,
//                        Animation.RELATIVE_TO_PARENT,1.0f));
//
//                animationSet.setDuration(5000);
//
//                myPhoto.startAnimation(animationSet);
                break;
        }
    }
}

学会了这些，我们就能使用基础的补间动画了。