属性动画ValueAnimator在自定义View中的使用

xiaoxiao2021-02-28  23

功能强大的属性动画(property animation)

最近在学习有关自定义View的内容,在Github上看到好多开源的View控件,如果涉及动画,基本上都使用的是属性动画,真心觉得属性动画比以前的补间动画强大太多了,也学习到了使用属性动画自定义View的方便和强大。所以想记录一下在自定义View时,使用属性动画的几个方面。

属性动画的强大之处在于可以对任意对象的任意属性增加动画效果,并且可以自定义值的类型和变化过程(TypeEvaluator)和过渡速度(Interpolator)。

这篇文章先来看看ValueAnimator的使用方法。这篇文章也发步在我的博客

一.ValueAnimator

ValueAnimator是属性动画的核心类,最常用的ObjectAnimator(下篇文章会讲到)就是它的子类。此类只是以特定的方式(可以自定义)对值进行不断的修改,已达到某种想要的过渡效果。它提供设置播放次数、动画间隔、重复模式、开始动画以及设置动画监听器的方法。

看一个最简单的例子吧。

ValueAnimator animator = ValueAnimator.ofFloat(0f, 1.0f); animator.setDuration(3000); animator.setInterpolator(new LinearInterpolator()); animator.start();

以上代码先使用ofFloat方法传递0,1参数初始化了一个ValueAnimator对象,接着设置动画播放的时间,设置变化速率为系统提供的线性变化,最后启动动画。

效果是,在3000毫秒内动画float值从0线性增加到1。可以添加监听器获取具体改变的值。

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float value = (Float)animation.getAnimatedValue(); Log.d(TAG, value); } }); animator.start();

结果打印从0到1线性变化的值,并且耗时3000毫秒。如果我们不设置Interpolator,会调用默认的Interpolator,先加速增加后减速增加。

二.怎样使用ValueAnimator自定义View动画?

当然,上面的代码只是对数字的变化的操作,并没有涉及到动画效果。接下来我们通过在动画开始(start方法)前设置监听器来让自定义View做出相应的动画。

如果想要做出如下图所示的效果,使用ValueAnimator就特别简单。

这是效果图:

横向移动

简单分析得知,由于效果是一个小球从左边移动一段距离后,变化的值只有小球圆心的X轴坐标。所以可以利用ValueAnimator产生从开始位置到结束位置的一系列中间值,在监听器中把每次改变的值设置给代表小球圆心X轴坐标的变量,再通知view重新绘制。我们看看这样会不会产出想要的动画效果。

onDraw方法:根据XPoint(x轴坐标)绘制圆形。

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawCircle(XPoint, heightSpecSize / 2, 30, mPaint); }

对外提供开始动画的start方法:创建ValueAnimator对象,设置必要的属性,添加监听器把每次改变的值赋值给xPoint,并且通知view重绘,最后开始动画。

public void start() { final ValueAnimator animator = ValueAnimator.ofFloat(60, 600); animator.setDuration(2000); animator.setRepeatCount(ValueAnimator.INFINITE); animator.setRepeatMode(ValueAnimator.RESTART); animator.setInterpolator(new LinearInterpolator()); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { // 获取到动画每次该变得float值,赋值给xpoint XPoint = (Float)animation.getAnimatedValue(); // 通知view重绘 invalidate(); } }); animator.start(); }

以上代码首先创建一个从60变化到600的ValueAnimator对象,接着设置动画时间为2000毫秒、重播方式为从头开始播放、重播次数为无限和速度变化情况为线性变化,最后增加监听器,获取每次变化的值赋值给xPoint,接着很重要的一点,调用invalidate()方法通知View重绘,即float值每次改变都需要View重绘。这样就很方便的根据float值的改变,给view增加了动画的效果。

三.TypeEvaluator

前面的例子,创建ValueAnimator的时候,都是使用的ValueAnimator.ofFloat(float, float)方法,这个方法传递的参数为可变参数,可以传递多个float值。其实创建ValueAnimator也可以使用ofInt等方法,这里有一个非常重要的方法:ValueAnimator.ofObject(TypeEvaluator, Object...),此方法和其他方法不同之处在于第一个参数TypeEvaluator,此处需要使用系统已经实现好的或自定义子类,用于设定自定义类型。

在使用ofInt或ofFloat方法时,内部其实是使用了FloatEvaluator、FloatArrayEvaluator`、IntEvaluator、IntArrayEvaluator这些系统已经实现好了的TypeEvaluator。我们使用这些方法创建ValueAnimator时就不必自定义类来继承TypeEvaluator。

下面我们试试自定义一个TypeEvaluator,实现我们想要的类型。

假如现在需要这个圆形斜着移动,使用ValueAnimator该怎样实现?当然有很多实现方法,比如Path路径的使用,这里为了演示自定义TypeEvaluator,使用自定义TypeEvaluator的方式来实现。

这是效果图:

斜着移动

分析得知,和上面的横向移动不同,斜着移动改变的是圆心的坐标,包括x轴和y轴坐标,我们可以自定义或使用系统提供的Point来表示一个二维坐标下的点,实现TypeEvaluator接口,根据动画完成的比例,返回一个具体代表点坐标的Point对象。

自定义类PointEvaluator实现TypeEvaluator接口。

class PointEvaluator implements TypeEvaluator{ @Override public Object evaluate(float fraction, Object startValue, Object endValue) { Point startPoint = (Point) startValue; Point endPoint = (Point) endValue; int x = (int) (startPoint.x + fraction * (endPoint.x - startPoint.x)); int y = (int) (startPoint.y + fraction * (endPoint.y - startPoint.y)); return new Point(x, y); } }

这里需要实现evaluate方法,根据动画完成的百分比返回对应的值。其中fraction参数和下文的TimeInterpolator接口方法返回的值有关,可以理解为动画执行的完成程度,比如动画总时间为3000毫秒,现在执行了1000毫秒,那么此刻传递进来的fraction参数值可以为三分之一。

在onDraw方法中依然还是简单的绘制一个圆形,此圆的圆心坐标是成员变量mPoint的x,y值。

protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawCircle(mPoint.x, mPoint.y, 30, mPaint); }

最后提供start方法开始动画。

public void start() { final ValueAnimator animator = ValueAnimator.ofObject(new PointEvaluator(), new Point(30, 30), new Point(600, 600)); animator.setDuration(2000); animator.setRepeatCount(ValueAnimator.INFINITE); animator.setRepeatMode(ValueAnimator.REVERSE); animator.setInterpolator(new LinearInterpolator()); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mPoint = (Point)animation.getAnimatedValue(); invalidate(); } }); animator.start(); }

和上边的代码类似,只是ValueAnimotor操作的值从float改变成了Point(可以自定义类型)。我们使用ValueAnimator.ofObject方法创建了一个ValueAnimator对象,并且传递给了两个Point对象,表示需要改变的Point值得范围,接着设置动画的执时间为2000毫秒、重播方式为从头开始播放、重播次数为无限和速度变化情况为线性变化,最后增加监听器,获取每次变化的值赋值给mPoint ,接着通知view重绘。

这个例子,我们可以知道ValueAnimotor操作的值的类型是任意的,可以由我们来自定义,只要自定义类实现TypeEvaluator,并且实现此接口的唯一一个方法evaluate即可。

四.TimeInterpolator

TimeInterpolator表示动画的速率,上边代码中我们就设置了动画速率,只不过使用的是API中已经实现好了的LinearInterpolator。

查询API知道TimeInterpolator接口有很多已知的实现类,比如AccelerateDecelerateInterpolator表示先加速后减速,AccelerateInterpolator表示一直加速,DecelerateInterpolator表示一直加速等。BounceInterpolator可以模拟物理规律,实现反弹的效果

如果不设置setInterpolator,那么默认使用AccelerateDecelerateInterpolator。

在自定义TimeInterpolator之前,我们先看看API中提供的实现的例子:LinearInterpolator,AccelerateInterpolator。

TimeInterpolator接口,只有一个方法:getInterpolation(float input) ,此方法接收一个float类型的input值,此值的变化范围为0~1,并且根据动画运行的时间,均匀增加,和TypeEvaluator接口方法中的参数fraction很像,fraction也是根据动画运行的时间,均匀增加。

注意:getInterpolation函数的返回值传递给了fraction,最好让此函数返回从0~1的值,并且递增,这样意义比较明确:代表动画完成的程度。自定义TypeEvaluator中也会比较好处理。

LinearInterpolator源码:

public float getInterpolation(float input) { return input; }

从源码中,可以看到getInterpolation的逻辑简单到不能再简单,直接返回input,因为input本身表示的就是均匀增加的。

AccelerateInterpolator源码:

public float getInterpolation(float input) { if (mFactor == 1.0f) { return input * input; } else { return (float)Math.pow(input, mDoubleFactor); } }

构造函数接收一个mFactor表示加速的倍数,接收1.0f以上的数,mDoubleFactor = 2 * mFactor。在getInterpolation方法中,判断mFactor如果等于1.0f,直接返回input * input(默认,二次函数增长),否则返回input的mDoubleFactor次方(mDoubleFactor次函数增长)。

看来要想实现一个自定义的TimeInterpolator,得要有一些必要的数学修养了。没办法,数学没有那么好,只能实现一个简单的TimeInterpolator,演示自定义TimeInterpolator的步骤。

下面我们实现一个以10给底数的负指数函数减速的例子:

class LgDecelerateInterpolator implements TimeInterpolator { private float background; public LgDecelerateInterpolator() { background = 10; } @Override public float getInterpolation(float input) { return (1 - (float) Math.pow(background, -input)); } }

然后在设置animator.setInterpolator(new LgDecelerateInterpolator());,就可以使用了。

成员变量background表示底数,在构造方法中初始化为10,因为是减速,所以用到了负指数,得到的值从1变化到0,所以再用1减去这个结果值,就得到了最终的结果。

五.AnimatorSet

AnimatorSet表示动画的集合,可以把几个动画一起播放,或按次序播放。提供paly、with、after等方法。

接下来,把以上用到的全部结合起来,播放一个动画的效果:圆形从View的左上角移动到右下角,伴随着颜色的变化,移动速度和颜色变化的速率都由上面自定义的LgDecelerateInterpolator实现。

这是效果图:

斜着指数减速移动伴随颜色指数渐变

这是完整的代码:

public class MyView extends View { private Paint mPaint; private Point mPoint; private int mColor; public MyView(Context context, AttributeSet attrs) { super(context, attrs); initPaint(); } public MyView(Context context) { super(context); initPaint(); } private void initPaint() { mPaint = new Paint(); mPaint.setColor(0xFFF00000); mPaint.setAntiAlias(true); // 抗锯齿 } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawCircle(mPoint.x, mPoint.y, 60, mPaint); } public void start() { final ValueAnimator animator = ValueAnimator.ofObject(new PointEvaluator(), new Point(60, 60), new Point(990, 1050)); animator.setRepeatCount(ValueAnimator.INFINITE); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mPoint = (Point) animation.getAnimatedValue(); invalidate(); } }); final ValueAnimator animator1 = ValueAnimator.ofArgb(0xFFF00000,0xFFFFFF00); animator1.setRepeatCount(ValueAnimator.INFINITE); animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mColor = (int) animation.getAnimatedValue(); mPaint.setColor(mColor); } }); AnimatorSet animationSet = new AnimatorSet(); animationSet.setDuration(3000); animationSet.setInterpolator(new LgDecelerateInterpolator()); animationSet.play(animator).with(animator1); animationSet.start(); } class PointEvaluator implements TypeEvaluator { @Override public Object evaluate(float fraction, Object startValue, Object endValue) { Point startPoint = (Point) startValue; Point endPoint = (Point) endValue; int x = (int) (startPoint.x + fraction * (endPoint.x - startPoint.x)); int y = (int) (startPoint.y + fraction * (endPoint.y - startPoint.y)); return new Point(x, y); } } class LgDecelerateInterpolator implements TimeInterpolator { private float background; public LgDecelerateInterpolator() { background = 10; } @Override public float getInterpolation(float input) { return (1 - (float) Math.pow(background, -input)); } } }

start方法中创建了两个ValueAnimator,第一个使用.ofObject方法,通过传递自定义的PointEvaluator,第二个使用API已经实现的ofArgb使颜色值变化的动画属性,都添加监听器以实现对成员变量的修改,重绘View,最后创建AnimatorSet对两个动画进行叠加,在播放移动动画的同时播放颜色渐变的动画。

作者:食梦兽 链接:https://www.jianshu.com/p/0f83fbe756aa 來源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
转载请注明原文地址: https://www.6miu.com/read-2800021.html

最新回复(0)