Android 动画之属性动画ValueAnimator和ObjectAnimator

原创 2016年09月01日 09:01:31

简介

属性动画是API 11新加入的特性,和View动画不同,它对作用对象进行了扩展,属性动画可以对任意对象做动画,也不像View动画只支持四种简单的变化。

属性动画的默认时间是300ms,默认频率是10ms/帧

ObjectAniamtor

先看看一个简单例子的实现效果,使用ObjectAnimator,它使用起来比较简单


布局就是一个ImageView,看看实现代码

 //透明度变化动画
    public void alpha(View view) {
//        1、通过调用ofFloat()方法创建ObjectAnimator对象,并设置目标对象、需要改变的目标属性名、初始值和结束值;
        ObjectAnimator mAnimatorAlpha = ObjectAnimator.ofFloat(mImageView, "alpha", 1.0f, 0.0f);
        //2、设置动画的持续时间、是否重复及重复次数属性;
        mAnimatorAlpha.setRepeatMode(Animation.REVERSE);
        mAnimatorAlpha.setRepeatCount(1);
        mAnimatorAlpha.setDuration(1000);
        //3、启动动画
        mAnimatorAlpha.start();
    }
    
    //翻转动画,翻转360度
    public void flip(View view) {
        ObjectAnimator visibleToInVisable = ObjectAnimator.ofFloat(mImageView, "rotationX", 0.0f, 360.0f);
        //设置插值器
        visibleToInVisable.setInterpolator(new LinearInterpolator());
        visibleToInVisable.setDuration(1000);
        visibleToInVisable.start();
    }
    //缩放动画
    public void scale(View view) {
        Animator animator = AnimatorInflater.loadAnimator(this, R.animator.scale_anim);
        animator.setTarget(mImageView);
        animator.start();
    }
    
    //平移动画
    public void translate(View view) {
        ObjectAnimator mAnimatorTranslateX = ObjectAnimator.ofFloat(mImageView, "translationX", 0.0f, screenWidth / 2);
        mAnimatorTranslateX.setRepeatMode(Animation.REVERSE);
        mAnimatorTranslateX.setRepeatCount(1);
        mAnimatorTranslateX.setDuration(1000);

        ObjectAnimator mAnimatorTranslateY = ObjectAnimator.ofFloat(mImageView, "translationY", 0.0f, screenHeight / 2);
        mAnimatorTranslateY.setRepeatMode(Animation.REVERSE);
        mAnimatorTranslateY.setRepeatCount(1);
        mAnimatorTranslateY.setDuration(1000);

        mAnimatorTranslateX.start();
        mAnimatorTranslateY.start();
    }
    //旋转动画
    public void rotate(View view) {
        ObjectAnimator mAnimatorRotate = ObjectAnimator.ofFloat(mImageView, "rotation", 0.0f, 360.0f);
        mAnimatorRotate.setRepeatMode(Animation.REVERSE);
        mAnimatorRotate.setRepeatCount(1);
        mAnimatorRotate.setDuration(2000);

        mAnimatorRotate.start();
    }


就是根据ObjectAnimator的ofFloat(Object target, String propertyName, float... values)构造得到一个ObjectAnimator,可以看到第一个参数是Object类型的,意味着我们可以传入自定义的类型,而不局限于补间动画只能用view来做,扩展性也就更好。第二个参数是动画名称,可以传递系统定义好的,比如上面的几个,也可以自己随便写,然后在属性变化的监听里改变。第三个参数就是属性值,如果只有一个的话会默认为结束值。

上面缩放动画是用xml实现的,需要在res下面建一个animator文件夹,然后创建相应的xml动画,如下

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together">
    <objectAnimator
        android:duration="1000"
        android:propertyName="scaleX"
        android:repeatCount="0"
        android:repeatMode="reverse"
        android:startOffset="500"
        android:valueFrom="0.1f"
        android:valueTo="1.0f"
        android:valueType="floatType" />
</set>


组合动画

现在要多个动画效果一起实现怎么办,有下面几种方式

1.PropertyValuesHolder

 PropertyValuesHolder alpha = PropertyValuesHolder.ofFloat("alpha", 0.0f, 1.0f);
        PropertyValuesHolder scaleX = PropertyValuesHolder.ofFloat("scaleX", 1.0f, 0.0f);

        ObjectAnimator animator1 = ObjectAnimator.ofPropertyValuesHolder(mImageView, alpha, scaleX);
        animator1.setDuration(1000);
        animator1.start();
2.监听属性变化

 ObjectAnimator animator = ObjectAnimator.ofFloat(mImageView, "lzy", 0.0f, 1.0f);
        animator.setDuration(1000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                mImageView.setAlpha(value);
                mImageView.setScaleX(1 - value * 0.5f);
            }
        });
        animator.start();
设置属性变化值在0-1之间,然后在onAnimationUpdate中监听得到,通过这个值调用view自身的方法改变。

3.AnimatorSet

AnimatorSet mAnimatorSet = new AnimatorSet();

        ObjectAnimator mAnimatorSetRotateX = ObjectAnimator.ofFloat(mImageView, "rotationX", 0.0f, 360.0f);
        mAnimatorSetRotateX.setDuration(3000);

        ObjectAnimator mAnimatorSetRotateY = ObjectAnimator.ofFloat(mImageView, "rotationY", 0.0f, 360.0f);
        mAnimatorSetRotateY.setDuration(3000);

        ObjectAnimator mAnimatorScaleX = ObjectAnimator.ofFloat(mImageView, "scaleX", 1.0f, 0.2f);
        mAnimatorScaleX.setRepeatCount(1);
        mAnimatorScaleX.setRepeatMode(Animation.REVERSE);
        mAnimatorScaleX.setDuration(1500);

        ObjectAnimator mAnimatorScaleY = ObjectAnimator.ofFloat(mImageView, "scaleY", 1.0f, 0.2f);
        mAnimatorScaleY.setRepeatCount(1);
        mAnimatorScaleY.setRepeatMode(Animation.REVERSE);
        mAnimatorScaleY.setDuration(1500);

        ObjectAnimator mAnimatorScaleY2 = ObjectAnimator.ofFloat(mImageView, "scaleY", 1.0f, 0.2f);
        mAnimatorScaleY2.setRepeatCount(1);
        mAnimatorScaleY2.setRepeatMode(Animation.REVERSE);
        mAnimatorScaleY2.setDuration(1500);

        mAnimatorSet.play(mAnimatorSetRotateY)
                .with(mAnimatorScaleX)
                .with(mAnimatorScaleY)
                .before(mAnimatorSetRotateX).before(mAnimatorScaleY2);

        mAnimatorSet.start();
通过animationSet来实现,它提供了一个play()方法,传入Animator返回一个Builder,这个Builder中有以下四个方法

    with(Animator anim),表示同时执行

    before(Animator anim),表示将现有动画插入到传入动画之前执行,也就是后执行

    after(Animator anim),与before相反

    after(long delay),表示延迟多久执行

在测试的时候发现不能重复传入一个动画,所以又写了一个mAnimatorScaleY2 。

AnimationSet中还有playTogether(Animator... items)表示同时执行,playSequentially(Animator... items)表示异步执行。


下面做一个让Button增加宽度的动画效果

属性动画的大致原理:属性动画要求动画作用的对象提供该属性的get和set方法,就像上面的"scaleX"属性,它具有getScaleX和setScale方法,属性动画会根据传递的初始值和结束值,去调用set的方法设置当前的值,如果没有传递初始值会调用get方法去获取初始值。

然后Button中并没有我们想要的get和set方法,所以针对这种问题官方文档给出了下面的解决方法

1.如果有权限的话,给对象加上get和set方法

2.用一个类来包装原始对象,间接为其提供get和set方法

3.采用ValueAnimator,监听动画变化过程,自己实现属性的变化

我们现在以第二种方式来实现以上效果,代码如下

 mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ViewWrapper wrapper = new ViewWrapper(mButton);
                ObjectAnimator.ofInt(wrapper, "width", 1000).setDuration(1000).start();
            }
        });

 //用此类来封装View,间接提供get、set方法
    private static class ViewWrapper {
        private View mView;

        public ViewWrapper(View view) {
            mView = view;
        }

        public void setWidth(int width) {
            mView.getLayoutParams().width = width;
            mView.requestLayout();
        }

        public int getWidth() {
            return mView.getLayoutParams().width;
        }
    }
在这个类中提供了width的get和set方法,getWidth()就是获取View当前的宽度,上面说过在没有指定初始值时会调用获得初始值,而setWidth()方法会不断被调用,直至动画结束去改变View的宽度。

ValueAnimator

ValueAnimator是ObjectAnimator的父类,也就可以理解为ObjectAnimator是一个封装好的ValueAnimator,使其使用起来更加的简单。但是作为父类的ValueAnimator也就使用起来更加的灵活多变。ValueAinamtor本身不会作用于任何对象,直接使用不会有动画效果,可以理解为它对一个值做动画,我们通过这个不断变化的值在监听函数中去修改相应的属性。

看看ValueAnimator的几种构造函数:

ofInt(int... values) 

ofArgb(int... values)

ofFloat(float... values)

ofPropertyValuesHolder(PropertyValuesHolder... values)

ofObject(TypeEvaluator evaluator, Object... values)

前三种参数都是初始值到结束值的变化范围,很简单

ofPropertyValuesHolder代表多种Animator的集合,下面会介绍具体的使用

ofObject很明显它的参数类型是Object类型,大多是我们自定义的类型,第一个参数TypeEvaluator 是估值器,因为像上面的int之类的系统都有定义相应的估值器所以不需要我们传入,然后我们自定义的Object并没有,所以需要自己的来写。

来看看系统的IntEvaluator

public class IntEvaluator implements TypeEvaluator<Integer> {

   
    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
        int startInt = startValue;
        return (int)(startInt + fraction * (endValue - startInt));
    }
}
估值器都需要继承自TypeEvaluator,实现里面的evaluate方法,参数分别是完成的百分比,开始值和结束值,文档解释也告诉我们返回的值只需要用结束值减去开始值乘以fraction 然后加上开始值就ok,从而实现值的过渡,所以自定义TypeEvaluator也很简单了。

下面看例子,还是先看效果在撸代码


 private void marginValueAnimator() {
        ValueAnimator valueAnimator = ValueAnimator.ofInt(0, width - mImageView.getWidth());
        //监听变化过程
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //获取当前值
                int animatedValueMargin = (int) animation.getAnimatedValue();
                ViewGroup.MarginLayoutParams
                        layoutParams = (ViewGroup.MarginLayoutParams) mImageView.getLayoutParams();
                layoutParams.leftMargin = animatedValueMargin;
                mImageView.setLayoutParams(layoutParams);

            }
        });
        valueAnimator.setDuration(1000);
        valueAnimator.setRepeatCount(3);
        valueAnimator.setRepeatMode(ValueAnimator.REVERSE);

        valueAnimator.setTarget(mImageView);
        valueAnimator.start();
    }
这是个简单的设置view距离左边的动画,构造了ValueAnimator后监听它的更新,在onAnimationUpdate中改变属性值,通过animation.getAnimatedValue()获得当前的值,然后用于更新属性状态,实现动画。

public void scaleValueAnimator() {
        //1.设置目标属性名及属性变化的初始值和结束值
        PropertyValuesHolder mPropertyValuesHolderScaleX = PropertyValuesHolder.ofFloat("scaleX", 1.0f, 0.0f);
        PropertyValuesHolder mPropertyValuesHolderScaleY = PropertyValuesHolder.ofFloat("scaleY", 1.0f, 0.0f);
        ValueAnimator mAnimator = ValueAnimator.ofPropertyValuesHolder(mPropertyValuesHolderScaleX, mPropertyValuesHolderScaleY);
        //2.为目标对象的属性变化设置监听器
        mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 3.根据属性名获取属性变化的值分别为ImageView目标对象设置X和Y轴的缩放值
                float animatorValueScaleX = (float) animation.getAnimatedValue("scaleX");
                float animatorValueScaleY = (float) animation.getAnimatedValue("scaleY");
                mImageView.setScaleX(animatorValueScaleX);
                mImageView.setScaleY(animatorValueScaleY);

            }
        });
        //4.为ValueAnimator设置自定义的Interpolator
        mAnimator.setInterpolator(new CustomInterpolator());
        //5.设置动画的持续时间、是否重复及重复次数等属性
        mAnimator.setDuration(2000);
        mAnimator.setRepeatCount(3);
        mAnimator.setRepeatMode(ValueAnimator.REVERSE);
        //6.为ValueAnimator设置目标对象并开始执行动画
        mAnimator.setTarget(mImageView);
        mAnimator.start();
    }
这里通过PropertyValuesHolder来控制实现两种属性的变化,其实这里x和y两个方向的缩放值都是1.0f到0.0f,可以用一个ValueAnimator.ofFloat()来完成,这里主要是为了演示
ofPropertyValuesHolder的使用。

首先是要通过PropertyValuesHolder.ofFloat来创建了两个PropertyValuesHolder对象,其中第一个参数是属性名,可以任意取,可以看到在onAnimationUpdate中通过这个属性名来获取不同PropertyValuesHolder的变化值。然后再通过ValueAnimator.ofPropertyValuesHolder来构造ValueAnimator对象就可以,也很容易看懂。

上面那个类似抛物线的圆是采用ValueAnimator.ofObject来实现的。

1.首先要定义一个Point类,里面用于存放x、y坐标

public class Point {
    private float x;
    private float y;

    public Point(float x, float y) {
        this.x = x;
        this.y = y;
    }

    public float getX() {
        return x;
    }

    public void setX(int x) {
        this.x = x;
    }

    public float getY() {
        return y;
    }

    public void setY(int y) {
        this.y = y;
    }
}
之前说过要使用ValueAnimator.ofObject需要自定义TypeEvaluator,下面看看定义的PointEvaluator,可以看到和IntEvaluator一样,主要还是计算变化值

public class PointEvaluator implements TypeEvaluator {

    //TypeEvaluator简单来说是实现了初始值和结束值的平滑过渡

    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {
        Point start = (Point) startValue;
        Point end = (Point) endValue;
        //开始值减去结束值乘以fraction再加上开始值就是当前的值
        float x = start.getX() + fraction * (end.getX() - start.getX());
        float y = start.getY() + fraction * (end.getY() - start.getY());
        Point point = new Point(x, y);
        return point;
    }
下面自定义一个CircleView类
public class CircleView extends View {

    private static final float Radius = 40.0f;
    private Point mPoint;
    private Paint mPaint;


    public CircleView(Context context) {
        super(context);
    }

    public CircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
//        mPoint = new Point(50, 50);
    }

    public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mPoint == null) {
            mPoint = new Point(50, 50);
            canvas.drawCircle(mPoint.getX(), mPoint.getY(), Radius, mPaint);
            startAnimation();
        } else {
            canvas.drawCircle(mPoint.getX(), mPoint.getY(), Radius, mPaint);
        }
    }

    private void startAnimation() {
        //创建开始和结束点坐标
        Point start = new Point(50, 50);
        Point end = new Point(getWidth(), getHeight());
        ValueAnimator animator = ValueAnimator.ofObject(new PointEvaluator(), start, end);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //把每一帧的值传给mPoint,绘制界面
                mPoint = (Point) animation.getAnimatedValue();
                invalidate();
            }
        });
        animator.setDuration(5000);
        animator.start();
    }
}
这个类也比较简单,主要就是在onDraw里面画一个圆,然后根据Point的变化不断调用onDraw方法来改变圆的位置,实现动画,这也就是ValueAnimator.ofObject的用法。

源码下载地址


版权声明:本文为博主原创文章,转载请注明出处。

相关文章推荐

Android动画学习(三)之使用ValueAnimator和ObjectAnimator实现动画实例

转载请注明出处:         上一篇博文我们初步地了解了Property Animation的工作方式及流程,并通过实验加深了对对象属性计算过程的理解,同时,我在文章的最后罗列一些实现P...

Android属性动画完全解析(中),ValueAnimator和ObjectAnimator的高级用法

大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了。但是,正如上篇文章当中所说到的,属性动画对补间动画进行了...

Android属性动画完全解析(中),ValueAnimator和ObjectAnimator的高级用法

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/43536355 大家好,在上一篇文章当中,我们学习了Android属性动画的基...
  • jdsjlzx
  • jdsjlzx
  • 2015年05月07日 11:36
  • 64272

android 属性动画之 ObjectAnimator

android 实现改变背景的颜色动画

自定义控件三部曲之动画篇(七)——ObjectAnimator基本使用

前言: 假如生活欺骗了你, 不要悲伤,不要心急! 忧郁的日子里须要镇静: 相信吧,快乐的日子终将会来临! 心儿永远向往着未来; 现在却常是忧郁。 一切都是瞬息,一切都将会过去; 而那过去了的,就会成为...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Android属性动画ObjectAnimator源码简单分析

Android属性动画ObjectAnimator源码的简单分析

使用ObjectAnimator设置动画

ObjectAnimator是ValueAnimator的子类,他本身就已经包含了时间引擎和值计算,所以它拥有为对象的某个属性设置动画的功能。这使得为任何对象设置动画更加的容易。你不再需要实现 Val...
  • new_abc
  • new_abc
  • 2014年10月15日 09:33
  • 43575

Android 动画之属性动画ObjectAnimator

相关文章 Android 动画之视图动画 Android 动画之插值器 Android 动画之属性动画ValueAnimator上一篇文章讲了ValueAnimator,本文接下来要讲解就是Ob...

Android属性动画之ObjectAnimator和AnimatorSet

从上一篇文章Android属性动画之ValueAnimator我们知道ValueAnimator是监听动画过程,自己实现属性的改变,但是ObjectAnimator就有所不同,它真正可以作用在一个对象...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 动画之属性动画ValueAnimator和ObjectAnimator
举报原因:
原因补充:

(最多只允许输入30个字)