前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >学习|Android属性动画TypeEvaluator和Interpolator使用

学习|Android属性动画TypeEvaluator和Interpolator使用

作者头像
Vaccae
发布2019-11-27 15:41:04
6640
发布2019-11-27 15:41:04
举报
文章被收录于专栏:微卡智享

学更好的别人,

做更好的自己。

——《微卡智享》

本文长度为2781,预计阅读7分钟

Android动画ValueAnimator

最近几章都是在学习Android的动画,也是慢慢的有了个了解了,前两篇也是主要做了一些简单的应用,其有说介绍到ValueAnimator的使用,今天这篇针对ValueAnimator里面做一个深度的学习,针对TypeEvaluator估值的使用和Interpolator插值器的使用。

TypeEvaluator

估值器

TypeEvaluator是一个接口,我们可以自定义该接口实例,就前两篇中,我们左移和下移的时候是通过两个动画来一起执行实现的,通过TypeEvaluator的估值器,我们可以把两个合并为一个动画即可实现了,所以说在相对复杂的动画效果场景中,TypeEvaluator就可以大显伸手了。

实现方式

自定义估值器需要实现 TypeEvaluator接口,然后复写evaluate()方法

代码语言:javascript
复制
public interface TypeEvaluator {
    public Object evaluate(float fraction, Object startValue, Object endValue) {
// 参数说明
// fraction:插值器getInterpolation()的返回值
// startValue:动画的初始值
// endValue:动画的结束值
        ....// 估值器的计算逻辑
        return xxx;
        // 赋给动画属性的具体数值
        // 使用反射机制改变属性变化

// 特别注意
// 那么插值器的input值 和 估值器fraction有什么关系呢?
// 答:input的值决定了fraction的值:input值经过计算后传入到插值器的getInterpolation(),然后通过实现getInterpolation()中的逻辑算法,根据input值来计算出一个返回值,而这个返回值就是fraction了
    }
}

代码实现

我们实现一个Integer类型的估值器,新建一个NumEvaluator的类,重写evaluate方法

代码语言:javascript
复制
package dem.vac.animation;

import android.animation.TypeEvaluator;

public class NumEvaluator implements TypeEvaluator<Integer> {

    @Override
    public Integer evaluate(float v, Integer si, Integer ei) {
        //计算当前应该所属的数值
        int curi=(int) (si + v * (ei - si));
        return curi;
    }
}

上图中重写的evaluate中的三个参数,其中v就是在动画运行过程中后两个参数中si和ei的比例,如上图我们如果si和ei设置为1和50,这个就是在计算动画执行时间中当前时间对应的值应该是多少了。

然后我们看一下Activity中怎么调用这个NumEvaluator估值器。

代码语言:javascript
复制
private void InitOfObject() {
        //调用我们创建的NumEvaluator,显示的数字区间为1到50
        ValueAnimator animator=ValueAnimator.ofObject(new NumEvaluator(), 1, 50);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                //获取到当前动画运行中应该显示的数字
                int i=(int) valueAnimator.getAnimatedValue();
                //设置10的余数再放大5位,用于显示tvshow的倍数
                int scale=i % 10 + 5;
                //设置tvshow的横向和纵向的放大倍数
                tvshow.setScaleX(scale);
                tvshow.setScaleY(scale);
                //设置当前动画应该显示的数字
                tvshow.setText(i + "");
                //更新动画
                tvshow.requestLayout();
            }
        });
        //设置动画播放时间
        animator.setDuration(6000);
        //设置插值器
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        //播放动画
        animator.start();
    }

上面代码中我们播放从数字1到50的一个显示动画,并且在显示的过程中不停的缩放大小,看一下执行的效果

上面可以看出来,估值器除了实现了同步放大,并且在动画执行的过程中数字也在不停的地变化 ,在动画的演示过程中我们可以看出来,开始的时候慢,然后中间很快,最后变到50的时候又变慢了,针对这个动画的播放效果,就是需要对插值器进行设置了,接下来我们就来说说Interpolator插值器的使用。

Interpolator

插值器

‍Interpolator表示动画的速率,上边代码中我们就设置了动画速率,如下

如果不设置setInterpolator的话,其实也是默认的AccelerateDecelerateInterpolator,下面就是插值器的类型:

类型

说明

AccelerateDecelerateInterpolator

在动画开始与结束的地方速率改变比较慢,在中间的时候加速

AccelerateInterpolator

动画越来越快

DecelerateInterpolator

动画越来越慢

BounceInterpolator

模拟物理规律,实现反弹的效果

LinearInterpolator

保持匀速动画

除了上面的默认这些,我们也可以像TypeEvaluator一样实现自定义的插值器,这样播放的效果可以自己设定,自定义的方法和TypeEvaluator差不多,这里我们就不单独做显示了,下面几个就是看看这几个不同的插值器实现的效果,AccelerateDecelerateInterpolator在上面已经看出来效果了,这里就不再显示了。

AccelerateInterpolator(动画越来越快)

DecelerateInterpolator(动画越来越慢)

BounceInterpolator(反弹效果)

LinearInterpolator(匀速动画)

上面可以看到不同的插值器可以显示不同的动画速率,如果我们想要更特别的插值器效果,就可以用自定义的插值器来实现了。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-11-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 微卡智享 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档