Android动画案例（二）补间动画

许菠萝

已于 2024-02-20 22:06:34 修改

阅读量484

点赞数

分类专栏： Android动画汇总文章标签： java 动画 android

于 2017-05-05 09:54:13 首次发布

本文链接：https://blog.csdn.net/github_36731706/article/details/71191393

版权

Android动画汇总专栏收录该内容

5 篇文章 0 订阅

订阅专栏

##补间动画##
可以使用xml文件或者java代码进行定义，但是官方推荐xml，但两个同样重要
移动： TranslateAnimation
缩放：ScaleAnimation
旋转：RotateAnimation
透明度：AlphaAnimation
组合动画：AnimationSet 所有的动画文件放置在res/anim目录下，不同的动画有不同的标签
PS:补间动画有一个特性当动画播放完毕时会恢复到初始状态
###移动###
首先来看一下移动的效果
这里写图片描述
xml文件中定义动画（在res/anim创建xml文件）

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="300"
    android:toYDelta="0"
    android:duration="1000"
    android:interpolator="@android:anim/accelerate_interpolator"
    >
    <!--interpolator 差值器，定义做什么运动-->
</translate>

fromX/YDelta：开始的x/y坐标–px
duration：持续时间—动画的基本属性

为文本框设置动画

这里需要创建一个操作动画的类Animation和对象animation

//为补间动画设置xml文件,并设置到控件上面
    private void translationAnimationXml(){
        //将xml文件加载到动画中
        animation = AnimationUtils.loadAnimation(TweenActivity.this,
                R.anim.translate_tween);
        translation_xml_tv.startAnimation(animation);
    }

这样就可以实现上面的动画了，步骤还是非常的简单

java文件中定义动画

上面是用xml文件设置的动画接下来就用JAVA代码定义动画，正如xml的属性一样，设置两个动画效果一样的动画

 //通过构造方法指定xy坐标
        TranslateAnimation translateAnimation=new TranslateAnimation(0,300,0,0);
        //设置动画差值器(加速差值器)
        translateAnimation.setInterpolator(new AccelerateInterpolator());
        //设置动画的持续时间
        translateAnimation.setDuration(1000);
        translation_java_tv.startAnimation(translateAnimation);

最后在按钮的点击时间中去调用这两个方法就可以启动动画了，但是如果我们想监听动画状态，就可以设置一个动画监听器，来监听动画运行到哪一步了

translateAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                Log.d("TAG","onAnimationStart");
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                Log.d("TAG","onAnimationEnd");

            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                //监听动画重复的时候
                Log.d("TAG","onAnimationRepeat");

            }
        });

这里写图片描述
在这里我只是实现了平移，垂直移动，抛物线移动，对角线移动都是可以实现的
###缩放###
同样这里我也使用了两种方法实现：xml和java
首先看一下效果图

xml方法的实现
1.定义动画的xml文件
既然是心脏的放大和缩小，这里肯定是要定义两个xml文件分别是放大和缩小
这里写图片描述
to_large:

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.2"
    android:fromYScale="0.2"
    android:toXScale="1.0"
    android:toYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="500"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    >
    <!--从0.2的比例放大到1.0的比例,并以最中间为缩放中心点，做一个500毫秒的减速运动-->
</scale>

fromXScale:动画起始时 X坐标上的伸缩尺寸
fromYScale:动画起始时Y坐标上的伸缩尺寸
toXScale:动画结束时 X坐标上的伸缩尺寸
toYScale: 动画结束时Y坐标上的伸缩尺寸
pivotX:以X坐标的那个点设置缩放
pivotY:以Y坐标的那个点设置缩放

最后两个是持续时间和差值器，在这里就不过多解释了
还有没有用到的方法
int pivotXType 动画在X轴相对于物件位置类型
float pivotXValue 动画相对于物件的X坐标的开始位置
int pivotYType 动画在Y轴相对于物件位置类型
float pivotYValue 动画相对于物件的Y坐标的开始位置

同理to_small

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="0.2"
    android:toYScale="0.2"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="500"
    android:interpolator="@android:anim/accelerate_interpolator"
   />

在Activity中为控件设置动画
声明动画缩放的类，因为是两个动画（放大和缩小，所以要定义两个类）

 //放大,缩小动画的操作对象
    private Animation toLargeAnimation;
    private Animation toSmallAnimation;

        toLargeAnimation = AnimationUtils.loadAnimation(this, R.anim.to_large);
        toSmallAnimation = AnimationUtils.loadAnimation(this, R.anim.to_small);
        toSmallAnimation.setAnimationListener(this);
        toLargeAnimation.setAnimationListener(this);
        scale_xml_iv.startAnimation(toSmallAnimation);

toSmallAnimation.setAnimationListener(this);
toLargeAnimation.setAnimationListener(this);

就是对动画的监听，上面也提到了，为什么要对动画进行监听呢？
比如我们当前给控件设置的是缩小的动画，但是为了显示出心脏跳动的效果，必须要心脏放大缩小来回的转换，所以当缩小的动画完成后给控件再接着添加上放大的动画，同理放大的动画完成后要回到缩小的动画

 @Override
    public void onAnimationStart(Animation animation) {

    }

    //当动画结束的时候实现对动画进行监听，进行动画的转换
    @Override
    public void onAnimationEnd(Animation animation) {
        Log.d("TAG", "onAnimationEnd");
        //判断当前是哪个动画
        if (animation.hashCode() == toLargeAnimation.hashCode()) {
            scale_xml_iv.startAnimation(toSmallAnimation);
        } else if (animation.hashCode() == toSmallAnimation.hashCode()) {
            scale_xml_iv.startAnimation(toLargeAnimation);
        }
    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }

这样就完成了缩小放大不断更迭的效果，可以看到我的控制台是不断地在打印log日志的
这里写图片描述
那么如果没有更迭的效果动画又是什么样的呢（只设置scale_xml_iv.startAnimation(toSmallAnimation); 不增加监听事件）

图片是先缩小，然后又回到了初始状态

下面是JAVA代码，直接放上

//实例化两个动画操作对象
//private ScaleAnimation toLargeAnimation_java;
//private ScaleAnimation toSmallAnimation_java;
//Animation.RELATIVE_TO_SELF 相对于自己坐标的的50%为中心点进行缩放，要是没有个方法会直接从x轴的0.5f缩放
        toLargeAnimation_java = new ScaleAnimation(0.2f, 1.0f, 0.2f, 1.0f, Animation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        toLargeAnimation_java.setDuration(500);
        toLargeAnimation_java.setInterpolator(new DecelerateInterpolator());
        toSmallAnimation_java = new ScaleAnimation(1.0f, 0.2f, 1.0f, 0.2f, Animation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        toSmallAnimation_java.setDuration(500);
        toSmallAnimation_java.setInterpolator(new AccelerateInterpolator());
        toSmallAnimation_java.setAnimationListener(this);
        toLargeAnimation_java.setAnimationListener(this);
        scale_java_iv.startAnimation(toSmallAnimation_java);

在动画监听事件中的动画更迭

 if (animation.hashCode() == toLargeAnimation_java.hashCode()) {
            scale_java_iv.startAnimation(toSmallAnimation_java);
        } else if (animation.hashCode() == toSmallAnimation_java.hashCode()) {
            scale_java_iv.startAnimation(toLargeAnimation_java);
        }

ScaleAnimation 的构造方法

这里写图片描述

这样动画的移动和缩放就写完了，感觉写了好多东西…
###旋转###
小二~上图！

这里写图片描述
所有的套路都是一样的（我都写的枯燥了）

首先是xml定义动画

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="2000"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:interpolator="@android:anim/linear_interpolator"

    />

fromDegrees：起始旋转度数
toDegrees：旋转多少度
pivotX/Y：以哪个点旋转
repeatCount：重复的次数
repeatMode：重复后旋转的模式

为控件设置动画

        //实例化 Animation rotateAnimationXml
        rotateAnimationXml = AnimationUtils.loadAnimation(this, R.anim.rotate_tween);
        rotate_xml_iv.startAnimation(rotateAnimationXml);

因为在xml文件中定义了动画是无限循环的，所以没有必要在写动画结束的监听，让动画一直旋转下去

用java定义动画

RotateAnimation rotateAnimation = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(2000);
        rotateAnimation.setInterpolator(new LinearInterpolator());
        rotateAnimation.setRepeatCount(Animation.INFINITE);
        rotateAnimation.setRepeatMode(Animation.REVERSE);
        rotate_java_iv.startAnimation(rotateAnimation);
        rotateAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                Log.d("tag1", "onAnimationStart");

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                Log.d("tag1", "onAnimationEnd");

            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                Log.d("tag1", "onAnimationRepeat");

            }
        });

这里写图片描述

由此可见控制台是没有打印出 onAnimationEnd 的因为它一直在重复旋转

RotateAnimation 类的构造方法

这里写图片描述

###透明度###

这是两张中毒脸，分别是由显示到透明和透明到显示

这里写图片描述

xml 定义的动画是左边效果

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0.1"
    android:duration="2000"
    android:interpolator="@android:anim/accelerate_interpolator"
    >
</alpha>

关键的属性只有两个
fromAlpha：一开始显示的透明度（取值范围从1.0-0.0）
toAlpha:最后的透明度（取值范围从1.0-0.0）

//为控件设置动画
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_tween);
        alpha_xml_iv.startAnimation(animation);

java代码设置动画

AlphaAnimation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
        alphaAnimation.setDuration(2000);
        alphaAnimation.setInterpolator(new AccelerateInterpolator());
        alpha_java_iv.startAnimation(alphaAnimation);

透明度动画的设置算是比较简单的了，就不写过多的解释了

###组合动画###
AnimationSet继承自Animation,是上面四中组合容器的管理类，没有自己特有的属性，他的属性继承自Animation

两只非常可爱的小鹿

这里写图片描述

动画效果是水平平移，垂直平移同时进行，这样就形成了斜下方平移的效果，然后两秒后有个透明度的变化

xml文件定义动画

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="true"
    android:interpolator="@android:anim/linear_interpolator"
    >
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="200"
        android:toYDelta="0"
        android:duration="2000"
        />
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="200"
        android:duration="2000"/>
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:duration="2000"
        android:startOffset="2000"
        />
</set>

标签里面嵌套着标签呐~

shareInterpolator：是否所有的动画效果都通用一个差值器
interpolator：差值器是啥
还有一个以前没有用到的属性
startOffset：多长时间之后执行动画

//为控件设置动画
 Animation animation=AnimationUtils.loadAnimation(this,R.anim.set_tween);
        set_xml_iv.startAnimation(animation);

java代码定义动画

//水平平移200
        TranslateAnimation translateAnimationX = new TranslateAnimation(0, 200, 0, 0);
        translateAnimationX.setDuration(2000);
        //垂直平移200
        TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, 200);
        translateAnimationY.setDuration(2000);
        //透明度变化
        AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, .01f);
        alphaAnimation.setDuration(2000);
        alphaAnimation.setStartOffset(2000);
        //旋转变化  补间动画的缺陷：Animation.RELATIVE_TO_SELF旋转的时候会以图片最开始所在的坐标为中心点旋转，
        // 不是以最后到达的地方的中心点
        RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(2000);
        rotateAnimation.setStartOffset(2000);
        AnimationSet animationSet = new AnimationSet(true);
        animationSet.setInterpolator(new LinearInterpolator());
        //添加动画
        animationSet.addAnimation(translateAnimationX);
        animationSet.addAnimation(translateAnimationY);
        animationSet.addAnimation(alphaAnimation);
        animationSet.addAnimation(rotateAnimation);
        set_java_iv.startAnimation(animationSet);

从第二只小鹿可以看出，它多了一个旋转的效果，但是这个旋转并不是想象中的那样，它旋转的半径很大，也就是旋转的中心点没有选对

这是补间动画的一个弊端，需要属性动画的抱抱才能解决~~

下面就会写属性动画的使用，不要太期待呦~~

许菠萝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Android动画案例（二）补间动画

补间动画移动： TranslateAnimation缩放：ScaleAnimation 旋转：RotateAnimation 透明度：AlphaAnimation 组合动画：AnimationSet
复制链接

扫一扫