高仿(余额宝)数字动画效果

作者: 李晨玮 | 来源:发表于2016-07-20 13:02 被阅读1017次

    最近公司产品开发需要用到这个动画效果,随手造个轮子,有需要的朋友可以直接拿来用。
    先看来下实现效果图:


    高仿余额宝数字动画效果.gif

    下面是具体代码,可直接复制:

    package com.lcw.rabbit.widget;
    import android.animation.ObjectAnimator;
    import android.content.Context;
    import android.text.TextUtils;
    import android.util.AttributeSet;
    import android.view.animation.AccelerateDecelerateInterpolator;
    import android.widget.TextView;
    
    /**
     * 高仿余额宝数字动画
     * Create by: chenwei.li
     * Date: 2016-07-20
     * time: 11:52
     * Email: lichenwei.me@foxmail.com
     */
    public class CountNumberView extends TextView {
        //动画时长
        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));
        }
    }
    

    使用方法,在XML里声明后(可以完全当成TextView来使用),直接在Java文件里调用:

            mTvCountNum1.showNumberWithAnimation(3201.23f, CountNumberView.FLOATREGEX);
            mTvCountNum2.showNumberWithAnimation(65535f, CountNumberView.INTREGEX);
    

    这里为了灵活使用,预留了数字显示格式(默认提供整型号和浮点型),大家可以根据自己的需要去更改Regex。
    关于String.format的第一个格式参数,这里引用下api的描述:

    常规类型、字符类型和数值类型的格式说明符的语法如下:
    %[argument_index$][flags][width][.precision]conversion
    可选的 argument_index 是一个十进制整数,用于表明参数在参数列表中的位置。第一个参数由 "1$" 引用,第二个参数由 "2$" 引用,依此类推。

    可选 flags 是修改输出格式的字符集。有效标志集取决于转换类型。

    可选 width 是一个非负十进制整数,表明要向输出中写入的最少字符数。

    可选 precision 是一个非负十进制整数,通常用来限制字符数。特定行为取决于转换类型。

    相关文章

      网友评论

      • Neulana:博主你好,请问在哪里调用的setNumber方法?怎么没看见调用,难道是自动调用的?
        我是一只小壳蟆:涉及金额,最好自定义Double类型
        李晨玮:@加速度猫 为什么会调用setNumber,这个跟属性number和ObjectAnimator.ofFloat()的第二个参数有关系,具体你可以查看下相关api。

      本文标题:高仿(余额宝)数字动画效果

      本文链接:https://www.haomeiwen.com/subject/eoevjttx.html