Android App开发动画特效中插值器和估值器的讲解以及利用估值器实现弹幕动画实战（附源码和演示视频可直接使用）

深藏阁楼爱情的钟 2023-09-30 16:54 2阅读 0赞

> **需要图片集和源码请点赞关注收藏后评论区留言~~~**

## 一、插值器和估值器 ##

插值器用来控制属性值的变化速率，也可以理解为动画播放的速度，默认是先加速再减速。若要给动画播放指定某种速率形式，调用setInterpolator方法设置对应的插值器实现类即可，无论是补间动画，集合动画，属性动画还是属性动画组合，都可以设置插值器。

估值器专用于属性动画，主要描述该属性的数值变化要采用什么单位，比如整数类型的渐变数值要取整，颜色的渐变数值为ARGB格式的颜色对象，矩形的渐变数值为Rect对象等等。要给属性动画设置估值器，调用属性动画对象的setEvaluator方法即可。

一般情况下 无须单独设置属性动画的估值器，使用系统默认的估值器即可。

演示效果如下 可以在下拉框中选择不同的演示效果

演示视频已上传至个人主页 有需要可自行前往观看

插值器和估值器演示

![e25264f22a8943139c607910b72f815a.png][]

![b1136921ba964db884986b8972bdbe65.png][]

![d7be6247d7ad479a955a677765da5d50.png][]

代码如下

### Java类 ###

package com.example.animation;
    
    import android.animation.Animator;
    import android.animation.Animator.AnimatorListener;
    import android.animation.ArgbEvaluator;
    import android.animation.FloatEvaluator;
    import android.animation.ObjectAnimator;
    import android.animation.RectEvaluator;
    import android.graphics.Color;
    import android.graphics.Rect;
    import android.os.Bundle;
    import androidx.appcompat.app.AppCompatActivity;
    import android.view.View;
    import android.view.animation.AccelerateInterpolator;
    import android.view.animation.BounceInterpolator;
    import android.view.animation.DecelerateInterpolator;
    import android.view.animation.LinearInterpolator;
    import android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.Spinner;
    import android.widget.AdapterView.OnItemSelectedListener;
    import android.widget.TextView;
    
    public class InterpolatorActivity extends AppCompatActivity implements AnimatorListener {
        private TextView tv_interpolator; // 声明一个图像视图对象
        private ObjectAnimator animAcce, animDece, animLinear, animBounce; // 声明四个属性动画对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_interpolator);
            tv_interpolator = findViewById(R.id.tv_interpolator);
            initObjectAnim(); // 初始化属性动画
            initInterpolatorSpinner(); // 初始化插值器类型的下拉框
        }
    
        // 初始化插值器类型的下拉框
        private void initInterpolatorSpinner() {
            ArrayAdapter<String> interpolatorAdapter = new ArrayAdapter<>(this,
                    R.layout.item_select, interpolatorArray);
            Spinner sp_interpolator = findViewById(R.id.sp_interpolator);
            sp_interpolator.setPrompt("请选择插值器类型");
            sp_interpolator.setAdapter(interpolatorAdapter);
            sp_interpolator.setOnItemSelectedListener(new InterpolatorSelectedListener());
            sp_interpolator.setSelection(0);
        }
    
        private String[] interpolatorArray = {
                "背景色+加速插值器+颜色估值器", "旋转+减速插值器+浮点型估值器",
                "裁剪+匀速插值器+矩形估值器", "文字大小+震荡插值器+浮点型估值器"};
    
        class InterpolatorSelectedListener implements OnItemSelectedListener {
            public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
                showInterpolator(arg2); // 根据插值器类型展示属性动画
            }
    
            public void onNothingSelected(AdapterView<?> arg0) {}
        }
    
        // 初始化属性动画
        private void initObjectAnim() {
            // 构造一个在背景色上变化的属性动画
            animAcce = ObjectAnimator.ofInt(tv_interpolator, "backgroundColor", Color.RED, Color.GRAY);
            // 给属性动画设置加速插值器
            animAcce.setInterpolator(new AccelerateInterpolator());
            // 给属性动画设置颜色估值器
            animAcce.setEvaluator(new ArgbEvaluator());
            // 构造一个围绕中心点旋转的属性动画
            animDece = ObjectAnimator.ofFloat(tv_interpolator, "rotation", 0f, 360f);
            // 给属性动画设置减速插值器
            animDece.setInterpolator(new DecelerateInterpolator());
            // 给属性动画设置浮点型估值器
            animDece.setEvaluator(new FloatEvaluator());
            // 构造一个在文字大小上变化的属性动画
            animBounce = ObjectAnimator.ofFloat(tv_interpolator, "textSize", 20f, 60f);
            // 给属性动画设置震荡插值器
            animBounce.setInterpolator(new BounceInterpolator());
            // 给属性动画设置浮点型估值器
            animBounce.setEvaluator(new FloatEvaluator());
        }
    
        // 根据插值器类型展示属性动画
        private void showInterpolator(int type) {
            ObjectAnimator anim = null;
            if (type == 0) { // 背景色+加速插值器+颜色估值器
                anim = animAcce;
            } else if (type == 1) { // 旋转+减速插值器+浮点型估值器
                anim = animDece;
            } else if (type == 2) { // 裁剪+匀速插值器+矩形估值器
                int width = tv_interpolator.getWidth();
                int height = tv_interpolator.getHeight();
                // 构造一个从四周向中间裁剪的属性动画，同时指定了矩形估值器RectEvaluator
                animLinear = ObjectAnimator.ofObject(tv_interpolator, "clipBounds",
                        new RectEvaluator(), new Rect(0, 0, width, height),
                        new Rect(width / 3, height / 3, width / 3 * 2, height / 3 * 2),
                        new Rect(0, 0, width, height));
                // 给属性动画设置匀速插值器
                animLinear.setInterpolator(new LinearInterpolator());
                anim = animLinear;
            } else if (type == 3) { // 文字大小+震荡插值器+浮点型估值器
                anim = animBounce;
                // 给属性动画添加动画事件监听器。目的是在动画结束时恢复文字大小
                anim.addListener(this);
            }
            anim.setDuration(2000); // 设置动画的播放时长
            anim.start(); // 开始播放属性动画
        }
    
        // 在属性动画开始播放时触发
        @Override
        public void onAnimationStart(Animator animation) {}
    
        // 在属性动画结束播放时触发
        @Override
        public void onAnimationEnd(Animator animation) {
            if (animation.equals(animBounce)) { // 震荡动画
                // 构造一个在文字大小上变化的属性动画
                ObjectAnimator anim = ObjectAnimator.ofFloat(tv_interpolator, "textSize", 60f, 20f);
                // 给属性动画设置震荡插值器
                anim.setInterpolator(new BounceInterpolator());
                // 给属性动画设置浮点型估值器
                anim.setEvaluator(new FloatEvaluator());
                anim.setDuration(2000); // 设置动画的播放时长
                anim.start(); // 开始播放属性动画
            }
        }
    
        // 在属性动画取消播放时触发
        @Override
        public void onAnimationCancel(Animator animation) {}
    
        // 在属性动画重复播放时触发
        @Override
        public void onAnimationRepeat(Animator animation) {}
    
    }

### XML文件 ###

## 二、利用估值器实现弹幕动画 ##

弹幕想必大家都不陌生，虽然弹幕效果可以使用平移动画实现，但是平移动画比较单调，而且只能控制位移不能控制速率，文字大小，文字颜色等要素，想同时操纵视图的多种属性要素的时候，需要采用属性动画加以实现 分为以下三步

> 1：定义一个间距估值器
> 
> 2：调用ValueAnimator类的ofObject方法
> 
> 3：调用属性动画对象的addUpdateListenter方法设置刷新监听器

效果如下 点击添加评论按钮就会添加弹幕数量

**演示视频已上传至个人主页 有需要可自行观看**

弹幕动画

![6b73f4d0e5bd4ee8a987c6591e51d392.png][]

![4bc91e0feb8544bead7c170b1b01a16d.png][]

![a8e5d56d65d64286a5fd42cab55a70db.png][]

代码如下

### Java类 ###

package com.example.animation;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    
    import com.example.animation.widget.BarrageView;
    
    import java.util.Random;
    
    public class BarrageActivity extends AppCompatActivity {
        private String[] mCommentArray = {"武夷山", "仙霞岭", "阿里山", "白云山", "九华山",
                "长白山", "峨眉山", "五台山", "太白山", "昆仑山",
                "六盘山", "乌蒙山", "井冈山", "武当山", "普陀山",
                "祁连山", "贺兰山", "太行山", "双鸭山", "五指山"};
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_barrage);
            BarrageView bv_comment = findViewById(R.id.bv_comment);
            findViewById(R.id.btn_comment).setOnClickListener(v -> {
                String comment = mCommentArray[new Random().nextInt(20)];
                bv_comment.addComment(comment); // 给弹幕视图添加评论
            });
        }
    }

### XML文件 ###

**创作不易 觉得有帮助请点赞关注收藏~~~**

[e25264f22a8943139c607910b72f815a.png]: https://img-blog.csdnimg.cn/e25264f22a8943139c607910b72f815a.png
[b1136921ba964db884986b8972bdbe65.png]: https://img-blog.csdnimg.cn/b1136921ba964db884986b8972bdbe65.png
[d7be6247d7ad479a955a677765da5d50.png]: https://img-blog.csdnimg.cn/d7be6247d7ad479a955a677765da5d50.png
[6b73f4d0e5bd4ee8a987c6591e51d392.png]: https://img-blog.csdnimg.cn/6b73f4d0e5bd4ee8a987c6591e51d392.png
[4bc91e0feb8544bead7c170b1b01a16d.png]: https://img-blog.csdnimg.cn/4bc91e0feb8544bead7c170b1b01a16d.png
[a8e5d56d65d64286a5fd42cab55a70db.png]: https://img-blog.csdnimg.cn/a8e5d56d65d64286a5fd42cab55a70db.png