android动画的使用(上-基本用法)

最新推荐文章于 2021-07-08 11:06:46 发布

向梦想攀爬的蜗牛

最新推荐文章于 2021-07-08 11:06:46 发布

阅读量446

点赞数 1

分类专栏： android 自定义view 文章标签： android 动画 animation animator

本文链接：https://blog.csdn.net/u012732170/article/details/56479979

版权

android 自定义view 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

动画介绍

要开发一个优秀的app，除了功能强大以外，还得有优秀的UI设计，那么，掌握自定义View以及动画是非常有必要的，今天就来讲讲动画的使用。
Android的动画可以分为三种：View动画、帧动画和属性动画。

View动画

View动画又叫做补间动画，它有四种默认动画效果：

平移(Translate)
缩放(Scale)
旋转(Rotate)
透明度(Alpha)

同时，它支持自定义动画，这个我们后面会将。

使用View动画也非常简单，主要有2种使用方式：
1. 在xml中定义动画，在代码中调用；
2. 完全用代码来写。

我们先来看下第一种使用方式

xml中定义View动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:duration="5000"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:shareInterpolator="true">

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

    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="0"
        android:pivotY="0"
        android:toXScale="2"
        android:toYScale="2">
    </scale>

    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100"
        android:toYDelta="100">
    </translate>

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

set标签用于一系列动画组合，在后面的属性动画里我们也会用到。其中

android:duration代表动画时长；
android:fillAfter表示动画结束后View是否停留在结束位置，true表示停留在结束位置；
android:interpolator是指插值器，我们后面再讲；
android:shareInterpolator表示所有动画是否共享一个插值器，true表示共享，false表示不共享，这时需要自己给每个动画设置插值器。

关于set标签有2个属性是需要注意的：

android:repeatMode有restart和reverse，分别表示连续重复和逆向重复。
android:repeatCount表示重复的次数。

这两个属性一定要注意，在xml的set中使用是无效的，在单独的View动画中使用是有效的。

在代码中要调用这个动画也非常简单：

Animation animation = AnimationUtils.loadAnimation(
                AnimationActivity.this, R.anim.test_animation);
v.startAnimation(animation);//v此时代表一个button

下面看看效果：
这里写图片描述

就两行代码即可使用，如果是单独一个一个写animation而不是用set标签的，调用起来也非常方便，代码如下：

AnimationSet animationSet = new AnimationSet(true);

Animation anim1 = AnimationUtils.loadAnimation(AnimationActivity.this,
                R.anim.test_animation_alpha);
animationSet.addAnimation(anim1);

Animation anim2 = AnimationUtils.loadAnimation(AnimationActivity.this,
                R.anim.test_animation_translate);
animationSet.addAnimation(anim2);

animationSet.setDuration(2000);
animationSet.setFillAfter(true);
v.startAnimation(animationSet);

下面看看完全用代码如何写。

完全用代码创建View动画

直接上代码了：

AnimationSet animationSet = new AnimationSet(true);
AlphaAnimation anim1 = new AlphaAnimation(0.5f, 1f);
animationSet.addAnimation(anim1);

TranslateAnimation anim2 = new TranslateAnimation(0f, 300f, 0f, 300f);
animationSet.addAnimation(anim2);

ScaleAnimation anim3 = new ScaleAnimation(1f, 2f, 1f, 2f,
                Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
animationSet.addAnimation(anim3);

animationSet.setDuration(2000);
animationSet.setFillAfter(true);
v.startAnimation(animationSet);

效果我就不展示了，其中要注意的是ScaleAnimation和RotateAnimation有一个旋转轴点的概念pivotX和pivotY，默认的旋转点都是控件的(0，0)处，上面代码我使用的就是左上角即(0，0)的点，具体效果大家可以自己去试试。

View动画监听器

AnimationListener，主要监听View动画的开始、重复以及结束这三个过程，使用也非常简单，如下代码所示：

animationSet.setAnimationListener(new AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {
                Toast.makeText(AnimationActivity.this, "动画开始了", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                Toast.makeText(AnimationActivity.this, "动画结束了", Toast.LENGTH_SHORT).show();
            }
        });

自定义动画

创建自定义动画非常简单，只需要实现applyTransformation和initialize方法即可。在applyTransformation中完成自己想要实现的效果，在initialize中做一些初始化操作。

下面我们来看下这两个方法。

* @param width Width of the object being animated
* @param height Height of the object being animated
* @param parentWidth Width of the animated object's parent
* @param parentHeight Height of the animated object's parent
*/
public void initialize(int width, int height, int parentWidth, int parentHeight){
    }

介绍都有，四个参数，子控件长宽和父控件长宽。

* @param interpolatedTime The value of the normalized time (0.0 to 1.0)
*        after it has been run through the interpolation function.
* @param t The Transformation object to fill in with the current
*        transforms.
*/
protected void applyTransformation(float interpolatedTime, Transformation t) {
    }

第一个参数interpolatedTime为0.0~1.0的递增值，随着动画执行时间逐渐增大；而t可以用来获取初始变换矩阵Matrix，我们就是根据这个矩阵值的改变来进行动画的，并且往往会使用到Camera这个类来执行一些3D效果，下面我们看下代码实现。

/**
 * Created by bellnett on 2017/2/24.
 */

public class CustomAnimation extends Animation {

    private Camera mCamera;
    private float mCenterHeight;
    private float mCenterWdith;

    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);

        mCamera = new Camera();
        setFillAfter(true);
        mCenterHeight = height / 2;
        mCenterWdith = width / 2;
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);

        Matrix matrix = t.getMatrix();

        mCamera.save();
        mCamera.translate(0,0,interpolatedTime * 300);
        mCamera.rotateY(interpolatedTime * 360);
        mCamera.getMatrix(matrix);
        mCamera.restore();

        /* 以高度的中心点作为旋转中心 */
        matrix.preTranslate(0,-mCenterHeight);
        matrix.postTranslate(0,mCenterHeight);
    }
}

主要做了2个操作，一个是向Z轴平移了300，另一个是绕Y轴旋转360度，至于这个camera的类，它的坐标系是3D坐标，这里就不介绍了，感兴趣的可以自己去研究。要注意的还有最后两行代码，还记得之前我们说过，scale和rotate动画的旋转点初始化都是(0，0)，这里通过preTranslate和postTranslate将按钮先向上平移一半的高度，等动画结束时再平移回来，这样的效果就相当于围绕(0，height/2)这个点做动画。

使用也非常简单

CustomAnimation customAnimation = new CustomAnimation();
customAnimation.setDuration(2000);
customAnimation.setInterpolator(new LinearInterpolator());
view.startAnimation(customAnimation);

效果如下：
这里写图片描述

帧动画

帧动画的实现也非常简单，归为一下三部：

在drawable中实现animation-list
给控件设置背景资源setBackgroundResource
实现AnimationDrawable对象
开启动画

xml代码实现：

<?xml version="1.0" encoding="utf-8"?>
<animation-list
    android:oneshot="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/a1" android:duration="1000"></item>
    <item android:drawable="@drawable/a2" android:duration="1000"></item>
    <item android:drawable="@drawable/a3" android:duration="1000"></item>
</animation-list>

其中oneshot这个属性表示动画的自动执行，false表示循环播放；true表示只执行一次，并且停留在最后一帧上。

调用代码实现：

view.setBackgroundResource(R.drawable.animation_drawable_test);
AnimationDrawable animationDrawable = (AnimationDrawable) view.getBackground();
animationDrawable.start();

效果如下：
这里写图片描述

属性动画

属性动画是在android 3.0即API 11之后才出现的，因此要兼容低版本的android系统，必须使用nineoldandroids这个动画库来兼容，这个兼容库我就不说了，感兴趣的自己去下载试试。属性动画常用的有以下三个类：ValueAnimator、ObjectAnimator以及AniamtorSet，下面我们分别讲解。

ValueAnimator

ValueAnimator从字面上看就能知道，它是一个值动画，也就是说，它不会包含具体的动画效果，只是值的变化，具体的动画需要我们根据这个值来做。那么如何使用这个ValueAnimator呢，我们分别从xml和用代码建立来讲解。

xml实现ValueAnimator

（1）首先是总布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="TestValueAnimator"
        android:text="testValueAnimator" 
        android:textAllCaps="false">
    </Button>

    <ImageView
        android:id="@+id/animatorIv"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/a1" />

</LinearLayout>

很简单，一个按钮，一个图，用按钮来完成图的属性动画。

（2）然后是动画的xml：

<?xml version="1.0" encoding="utf-8"?>
<animator xmlns:android="http://schemas.android.com/apk/res/android"
    android:valueFrom="50"
    android:valueTo="300"
    android:valueType="intType" >

</animator>

非常简单，值从50~300变化。

（3）下面我们看看在代码中如何调用：

public void TestValueAnimator(final View v) {
        ValueAnimator valueAnimator = (ValueAnimator) AnimatorInflater
                .loadAnimator(AnimatorActivity.this, R.animator.test_animator);
        valueAnimator.setDuration(2000);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.setTarget(iv1);
        valueAnimator.setRepeatMode(ValueAnimator.REVERSE);
        valueAnimator.setRepeatCount(2);
        valueAnimator.start();
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (Integer) animation.getAnimatedValue();
                iv1.getLayoutParams().width = value;
                iv1.getLayoutParams().height = value;
                iv1.requestLayout();
            }
        });
    }

（4）看下效果图：
这里写图片描述

前面说过了，ValueAnimator只是值变化的动画，没有具体的动画效果，因此，必须实现AnimatorUpdateListener这个监听类，来监听值得变化，然后根据值的变化来实现具体的动画，在这个例子中是实现图的长宽变化。

代码实现ValueAnimator

代码实现更加方便，请看如下代码：

ValueAnimator valueAnimator = ValueAnimator.ofInt(50,300);

一句代码就能实现之前（2）中定义的动画，而且直接可以使用，不需要再调用AnimatorInflater类的loadAnimator()方法来载入动画。下面的调用和（3）中的一样，就不重复写了。

ObjectAnimator

ObjectAnimator就是可以直接实现属性动画的类了，相比ValueAnimator要使用地更加频繁，更加好用，下面我们看看ObjectAnimator的使用，也是分xml和代码实现。

xml实现ObjectAnimator

（1）总布局代码不变，直接上动画的xml实现：

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="translationX"
    android:valueFrom="0"
    android:valueTo="300"
    android:valueType="floatType" >

</objectAnimator>

有两点要注意：
1. 其中的valueType使用的是浮点数类型，主要是ImageView的setTranslationX方法的参数是浮点数类型的，因此我们要灵活运用。
2. 相比ValueAnimator，ObjectAnimator只比它多了一个android:propertyName参数，至于这个参数怎么填，我们可以根据我们需要设置动画的控件，输入setXXX来查看，后面XXX就是这个属性所填写的值。

（2）代码调用:

ObjectAnimator objectAnimator = (ObjectAnimator) AnimatorInflater
                .loadAnimator(AnimatorActivity.this, R.animator.test_animator);
        objectAnimator.setDuration(2000);
        objectAnimator.setRepeatMode(ValueAnimator.REVERSE);
        objectAnimator.setRepeatCount(2);
        objectAnimator.setTarget(iv1);
        objectAnimator.start();

和ValueAnimator差不多，只是不需要监听AnimatorUpdateListener，就能实现ImageView从0~300的X轴变化。

（3）效果图：
这里写图片描述

代码实现ObjectAnimator

代码实现也非常的简单：

ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(iv1,
                "translationX", 0f, 300f);
        objectAnimator.setDuration(2000);
        objectAnimator.setRepeatMode(ValueAnimator.REVERSE);
        objectAnimator.setRepeatCount(2);
        objectAnimator.start();

和ValueAnimator有所不同的是，在使用ofXXX方法时可以直接设定target，而无需调用setTarget()方法了，具体效果和上面的相同。

AnimatorSet

xml实现AnimatorSet

（1）总布局不变，我们看下xml中AnimatorSet的实现，和AnimationSet类似，要注意的是有一个android:ordering属性，它有两个值together和sequentially，前者代表动画一起执行；后者表示动画按顺序执行：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:ordering="together">

    <objectAnimator
        android:propertyName="translationX"
        android:valueFrom="0"
        android:valueTo="300"
        android:valueType="floatType">

    </objectAnimator>

    <objectAnimator
        android:propertyName="translationY"
        android:valueFrom="0"
        android:valueTo="300"
        android:valueType="floatType">

    </objectAnimator>
</set>

（2）然后是代码的调用，和ValueAnimator以及ObjectAnimator是一样的，只是没法设置repeatMode和repeatCount了：

AnimatorSet animatorSet = (AnimatorSet) AnimatorInflater.loadAnimator(AnimatorActivity.this, R.animator.test_animator);
animatorSet.setDuration(2000);
animatorSet.setTarget(iv1);
animatorSet.start();

（3）看下效果：
这里写图片描述

代码实现AnimatorSet

代码实现也很方便：

AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(2000);

ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(iv1,"translationX",0f,300f);
ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(iv1,"translationY",0f,300f);

animatorSet.playTogether(objectAnimator1,objectAnimator2);
animatorSet.start();

效果和上面是一样的，playTogether对应xml中的together；还有一个方法playSequentially对应xml中的sequentially。

PropertyValueHolder

PropertyValueHolder的使用是类似AnimatorSet的，不过它只能同步执行动画，没法按顺序执行动画。所以当要同时执行多个动画的时候，PropertyValueHolder也是个不错的选择。下面看代码：

PropertyValuesHolder propertyValuesHolder1 = PropertyValuesHolder.ofFloat("translationX",0f, 300f);
PropertyValuesHolder propertyValuesHolder2 = PropertyValuesHolder.ofFloat("translationY",0f, 300f);
ObjectAnimator.ofPropertyValuesHolder(iv1, propertyValuesHolder1, propertyValuesHolder2)
                .setDuration(2000).start();

效果和同步执行的AnimatorSet是一样的，效果图我就不贴了。

animate方法

animate是ViewPropertyAnimator类的一个方法，它支持链式操作，使用上算是属性动画的一种简便方式，请看如下代码：

        iv1.setPivotX(0f);
        iv1.setPivotY(0f);
        iv1.invalidate();

        iv1.animate()
                .scaleX(2f)
                .scaleY(2f)
                .alpha(0.5f)
                .setDuration(2000)
                .withStartAction(new Runnable() {
                    @Override
                    public void run() {

                    }
                })
                .withEndAction(new Runnable() {
                    @Override
                    public void run() {
                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {
                                iv1.setAlpha(1.0f);
                                iv1.setScaleX(1f);
                                iv1.setScaleY(1f);
                            }
                        });
                    }
                })
                .start();

其中要注意的有以下几点：

属性动画默认旋转点是中心点，因此要改变旋转点直接使用setPivotX和setPivotY，然后显示调用以下invalidate。
withStartAction和withEndAction都是API16添加进来的，因此如果要使用这两个方法必须api要在16及以上。
ViewPropertyAnimator也支持AnimatorListener和AnimatorUpdateListener，这个监听器我们在下面会讲。

下面看下效果图：
这里写图片描述

属性动画的监听器

属性动画一共有2个监听器：

AnimatorListener
-AnimatorListenerAdapter
AnimatorUpdateListener

AnimatorListener一共有4个方法，start、end、cancel以及repeat，如果直接实现这个监听器就得重写这4个方法，不过，AnimatorListener提供了一个AnimatorListenerAdapter适配器，如果实现这个适配器的话，就可以有选择的重写以上4个方法。

AnimatorUpdateListener我们在上面讲解ValueAnimator时已经用过了，没看的请翻到上面。

下面看下代码：

        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(iv1,"translationX",0f,300f);
        objectAnimator.setDuration(2000);
        objectAnimator.setRepeatCount(ValueAnimator.INFINITE);
        objectAnimator.setRepeatMode(ValueAnimator.REVERSE);
        objectAnimator.start();
        objectAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {

            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

        objectAnimator.addListener(new AnimatorListenerAdapter() {

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
            }
        });

        objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {

            }
        });

总结

最后我们总结一下：

Animation对应View动画；Animator对应Property动画。
View动画使用之后，按钮的位置改变了，但是点击的位置还是原来的位置；属性动画使用之后，不仅位置改变，连点击的位置也会随着改变。因此，View动画适合做一些视觉效果；属性动画适合做一些交互式动画。
使用旋转和缩放时要注意旋转轴点，View动画默认是(0，0)；而属性动画默认是控件的中心点。
帧动画应尽量避免使用，图片一多就容易引起OOM。
不管是View动画还是属性动画，单个动画都可以设置循环模式和循环次数，当多个动画组合时没法直接设置循环模式和循环次数。

向梦想攀爬的蜗牛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android动画的使用(上-基本用法)

动画介绍要开发一个优秀的app，除了功能强大以外，还得有优秀的UI设计，那么，掌握自定义View以及动画是非常有必要的，今天就来讲讲动画的使用。 Android的动画可以分为三种：View动画、帧动画和属性动画。View动画View动画又叫做补间动画，它有四种默认动画效果：平移(Translate)缩放(Scale)旋转(Rotate)透明度(Alpha)同时，它支
复制链接

扫一扫