一個簡單的滾動數字的效果實現

Wellijohn發表於2018-01-04

1.效果圖

一個簡單的滾動數字的效果實現

2.定製的屬性

  • textColor 字型顏色
  • textSize 字型大小
  • duration 文字顯示出來的時間

3.使用說明

Step 1. Add it in your root build.gradle at the end of repositories:

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}
Step 2. Add the dependency

	dependencies {
	        compile 'com.github.WelliJohn:AnimTextView:1.0.0'
	}
複製程式碼
<wellijohn.org.animtv.AnimTextView
        android:id="@+id/atv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        app:textColor="@color/colorAccent" 
        app:textSize="20sp" 
        app:duration="5000"/>
複製程式碼

使用的時候，直接在animTv.setText(222.09);就可以了，在這裡需要注意的是，這裡的數值只支援整型和小數顯示，小數只支援到小數點後兩個位，如果有小數點後有3位以上，自動四捨五入

4.實現的思路很簡單，一個動畫就解決了，對顯示的數字從0到遍歷一次，然後重新整理ui。

 ValueAnimator va;
        if (mIsInteger) {
            va = ValueAnimator.ofInt(0, (Integer) mEndText);
        } else {
            va = ValueAnimator.ofFloat(0, Float.parseFloat(String.valueOf(mEndText)));
        }

        va.setDuration(mDuration);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mDrawText = mIsInteger ? (T) animation.getAnimatedValue() : (T) df.format(animation.getAnimatedValue());
                ViewCompat.postInvalidateOnAnimation(AnimTextView.this);
            }
        });
        va.start();
複製程式碼

另外需要注意的是重寫onMeasure方法，支援padding，width為wrap_content屬性的大小設定。這裡是一個非常簡單的，拿來練練手，等有時間做點上下滾動的特效。
github地址

相關文章