仿余额宝数字滚动增长的效果实现

发表于   |   分类于   |  

这个已经是被大家做烂了的效果了，之所以我自己做这个效果而不是直接从网上拷贝一个来用，主要是因为网上的工具不太符合我的要求，大部分网友写的工具都不可以带单位的，只是数字方面的增长效果，而我的APP中需要带上单位，比如公里、升之类的，与其改人家的源码不如自己写一个了。
先看效果图：
logo

Android中的动画

这里用到了属性动画，Android中的动画主要分为三大类，分别是视图动画和属性动画。
视图动画分为Tween Animation(补间动画)和Frame Animation(逐帧动画)
属性动画分为ValueAnimator 和 ObjectAnimator;

这里一定要注意一下各种动画引入时Android的版本号，否则动画不会启用，视图动画是API Level 1就引入的，所以支持所有Android的版本，而属性动画是API Level 11引入的，即Android 3.0才开始有属性动画相关的API,故而在使用属性动画时一定要判断API的版本，避免一些不必要的Bug.

实现思路

整个思路很简单，在使用这个组件的过程中有几个点是要考虑进去的，第一，可以是整数类型也可以是浮点型的数字，所以这里要做标识区分开，第二，可以加入单位（核心需求），第三，可以开启是否四舍五入，比如需要整数类型的时候，而传入的数字是浮点型，这时会自动把传入的浮点型转化为整数类型，这里就要考虑四舍五入的问题了。

代码实现

下面来看是如何实现的
实现类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

import android.animation.ValueAnimator;
import android.util.Log;
import android.view.animation.AccelerateInterpolator;
import android.widget.TextView;

/**
 * 类描述： 创建人：贾真
 * 创建时间：2017/1/23 15:44 
 */
public class AutoIncrementUtil {

   public static final String FLOATTYPE="FloatType";
    public static final String INTTYPE="IntType";

    public static void startAnimation(String type,final TextView tvView,float floatValue
    	,boolean isRoundUp,final String danwei,int duration){
        ValueAnimator animator=null;
        if(type.equals(FLOATTYPE)){
              animator=ValueAnimator.ofFloat(0,floatValue);
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    float curValue = (float)valueAnimator.getAnimatedValue();
                    Log.e("curValue ",curValue+"");
                    tvView.setText(NumUtil.FormatFloat(curValue)+danwei);
                }
            });
        }else if(type.equals(INTTYPE)){
            String targetValueString =NumUtil.FormatRoundUp(isRoundUp,floatValue);
            animator=ValueAnimator.ofInt(0,Integer.parseInt(targetValueString));
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    int curValue = (int)valueAnimator.getAnimatedValue();
                    tvView.setText(curValue+danwei);
                }
            });
        }
        animator.setDuration(duration);
        animator.setInterpolator(new AccelerateInterpolator());
        animator.start();
    }

}

数字转化工具类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import java.text.DecimalFormat;


public class NumUtil {

    private NumUtil(){


    }

    public static String FormatFloat(float value){
        DecimalFormat df = new DecimalFormat("0.00");
        return df.format(value);
    }
    public static String FormatRoundUp(boolean isRoundUp,float value){
        DecimalFormat df;
        if(isRoundUp){
            df = new DecimalFormat("######0"); //四色五入转换成整数

            return df.format(value);
        }else{
            Float f= new Float(value);
            int i=f.intValue();
            return String.valueOf(i);
        }
    }
}

如何使用：

1
AutoIncrementUtil.startAnimation(AutoIncrementUtil.INTTYPE,NumView,153261.93f,false,"公里",1500);

应该说是非常简单了，主要用到了属性动画的ValueAnimator的两个方法，ofInt和ofFloat，剩下的都是按部就班的调用相关的方法即可，大家稍微阅读一下源码就应该懂了。

热评文章