数字动画效果

数字动画效果图
这里写图片描述
想要实现这样的动画，首先我们可以重写TextView，代码如下：

package com.example.testdemo.widget;

import android.animation.ObjectAnimator;
import android.content.Context;
import android.support.v7.widget.AppCompatTextView;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.animation.AccelerateDecelerateInterpolator;

/**
 * Created by wang on 2018/2/26.
 */

public class CountNumberView extends AppCompatTextView {
    //动画时长
    private int duration = 1500;
    //显示数字
    private float number;
    //显示表达式
    private String regex;

    //显示表示式
    public static final String INTREGEX = "%1$01.0f";//不保留小数，整数
    public static final String FLOATREGEX = "%1$01.2f";//保留2位小数

    public CountNumberView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 显示带有动画效果的数字
     * @param number
     * @param regex
     */
    public void showNumberWithAnimation(float number, String regex) {
        if (TextUtils.isEmpty(regex)) {
            //默认为整数
            this.regex = INTREGEX;
        } else {
            this.regex = regex;
        }
        //修改number属性，会调用setNumber方法
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(this, "number", 0, number);
        objectAnimator.setDuration(duration);
        //加速器，从慢到快到再到慢
        objectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        objectAnimator.start();
    }

    /**
     * 获取当前数字
     * @return
     */
    public float getNumber() {
        return number;
    }

    /**
     * 根据正则表达式，显示对应数字样式
     * @param number
     */
    public void setNumber(float number) {
        this.number = number;
        setText(String.format(regex, number));
    }

}

自定义控件写好后，直接在布局中调用即可，在使用的地方调用setNumber()方法，传入数字。

实现这样的动画效果，关键用到了属性动画ObjectAnimator。ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(this, “number”, 0, number)，这行代码意思是随着时间的变化依次产生0到number之间的数值，然后去调用this的 setNumber(float number)方法。注意：setNumber()方法的作用，它使用的是反射的机制所以需要传一个对象给他还需要传一个方法的名称给他，这里的“number”就是方法名称，那他怎么会调用setNumber 这是他底层的给他加上的“set”+“Number”

猜你喜欢