Android實現啟動頁倒計時效果

今天介紹一個很簡單的倒計時動畫，仿酷狗音樂的啟動頁倒計時效果，也是大多數APP在用的一個動畫，來看看效果圖：

整體的思路就是用一個平滑的幀動畫來畫圓弧就行了。

這篇文章學到什么？

了解屬性動畫ValueAnimator的用法

了解動畫屬性插值Interpolator，讓動畫過度得更自然

如何畫圓弧

新建一個類繼承TextView，因為中間還有跳過的文本，所以選擇用TextView來畫個動起來的背景圖。

/** * 倒計時文本 */@SuppressLint('AppCompatCustomView')public class CountDownTextView extends TextView { // 倒計時動畫時間 private int duration = 5000; // 動畫掃過的角度 private int mSweepAngle = 360; // 屬性動畫 private ValueAnimator animator; // 矩形用來保存位置大小信息 private final RectF mRect = new RectF(); // 圓弧的畫筆 private Paint mBackgroundPaint; public CountDownTextView(Context context) {this(context, null); } public CountDownTextView(Context context, AttributeSet attrs) {this(context, attrs, 0); } public CountDownTextView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(); } private void init() {// 設置畫筆平滑mBackgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);// 設置畫筆顏色mBackgroundPaint.setColor(Color.WHITE);// 設置畫筆邊框寬度mBackgroundPaint.setStrokeWidth(5);// 設置畫筆樣式為邊框類型mBackgroundPaint.setStyle(Paint.Style.STROKE); }}開始動畫

原理：利用圓的360度角來做屬性動畫，讓它平滑的分配做每幀動畫的角度值，然后調用invalidate()來重繪自己本身，從而進入到本身的onDraw()方法來畫圖。

/** * 開始倒計時 */ public void start() {// 在動畫中if (mSweepAngle != 360) return;// 初始化屬性動畫animator = ValueAnimator.ofInt(mSweepAngle).setDuration(duration);// 設置插值animator.setInterpolator(new LinearInterpolator());// 設置動畫監聽animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) {// 獲取屬性動畫返回的動畫值mSweepAngle = (int) animation.getAnimatedValue();// 重繪自己invalidate(); }});// 開始動畫animator.start(); }畫圓弧

畫圓弧比較簡單， 從效果圖來看，有的同學可能剛開始以為要畫兩個圓，一個背景的內圓和一個白色邊框的大圓，其實這里可以利用畫筆設置畫筆樣式paint.setStyle()和寬度大小paint.setStrokeWidth()的特性來實現。代碼很簡單，開始的角度選擇-90，從頭頂開始畫。這樣實現的是一個順時針的倒計時效果。如果你想實現酷狗的逆時針效果，就控制mSweepAngle的值用mSweepAngle = 360 - mSweepAngle開始就可以了。

@Override protected void onDraw(Canvas canvas) {int padding = dp2px(4);mRect.top = padding;mRect.left = padding;mRect.right = getWidth() - padding;mRect.bottom = getHeight() - padding;// 畫倒計時線內圓canvas.drawArc(mRect, //弧線所使用的矩形區域大小-90, //開始角度mSweepAngle, //掃過的角度false, //是否使用中心mBackgroundPaint); // 設置畫筆super.onDraw(canvas); }

什么是插值動畫？

為了讓動畫過度的更加自然或者添加一些動畫效果，比如勻速運動、加速運動、減速運動、彈跳運動等等，這些的動畫的效果就是靠插值來實現的。在Android中系統內置了一些插值，更加直觀的展示下面介紹的動畫效果。

插值 說明 LinearInterpolator 以常量速率改變 BounceInterpolator 動畫結束的時候彈起 CycleInterpolator 動畫循環播放特定的次數，速率改變沿著正弦曲線 DecelerateInterpolator 在動畫開始的地方快然后慢 OvershootInterpolator 向前甩一定值后再回到原來位置 AccelerateInterpolator 在動畫開始的地方速率改變比較慢，然后開始加速 AnticipateInterpolator 開始的時候向后然后向前甩 AccelerateDecelerateInterpolator 在動畫開始與介紹的地方速率改變比較慢，在中間的時候加速 AnticipateOvershootInterpolator 開始的時候向后然后向前甩一定值后返回最后的值

這里要定義文本的寬高，因為沒有畫底部的黑色圓背景，還要設置一下背景圖。

<com.example.viewdemo.CountDownTextViewandroid: android:layout_width='40dp'android:layout_height='40dp'android:layout_gravity='center'android:background='@drawable/bg_count_down'android:text='跳過'android:textColor='#ffffff'android:textSize='12sp'android:visibility='visible' />背景圖

<?xml version='1.0' encoding='utf-8'?><selector xmlns:android='http://schemas.android.com/apk/res/android'> <item android:state_pressed='true'><shape android:shape='oval'> <solid android:color='#302d2d2d' /></shape> </item> <item><shape android:shape='oval'> <solid android:color='#7F2d2d2d' /></shape> </item></selector>完整代碼

/** * 倒計時文本 */@SuppressLint('AppCompatCustomView')public class CountDownTextView extends TextView { // 倒計時動畫時間 private int duration = 5000; // 動畫掃過的角度 private int mSweepAngle = 360; // 屬性動畫 private ValueAnimator animator; // 矩形用來保存位置大小信息 private final RectF mRect = new RectF(); // 圓弧的畫筆 private Paint mBackgroundPaint; public CountDownTextView(Context context) {this(context, null); } public CountDownTextView(Context context, AttributeSet attrs) {this(context, attrs, 0); } public CountDownTextView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(); } @Override protected void onDraw(Canvas canvas) {int padding = 5;mRect.top = padding;mRect.left = padding;mRect.right = getWidth() - padding;mRect.bottom = getHeight() - padding;// 畫倒計時線內圓canvas.drawArc(mRect, //弧線所使用的矩形區域大小-90, //開始角度mSweepAngle, //掃過的角度false, //是否使用中心mBackgroundPaint); // 設置畫筆start();super.onDraw(canvas); } private void init() {// 設置畫筆平滑mBackgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);// 設置畫筆顏色mBackgroundPaint.setColor(Color.WHITE);// 設置畫筆邊框寬度mBackgroundPaint.setStrokeWidth(5);// 設置畫筆樣式為邊框類型mBackgroundPaint.setStyle(Paint.Style.STROKE); } /** * 開始倒計時 */ public void start() {// 在動畫中if (mSweepAngle != 360) return;// 初始化屬性動畫animator = ValueAnimator.ofInt(mSweepAngle).setDuration(duration);// 設置插值animator.setInterpolator(new LinearInterpolator());// 設置動畫監聽animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) {// 獲取屬性動畫返回的動畫值mSweepAngle = (int) animation.getAnimatedValue();// 重繪自己invalidate(); }});// 開始動畫animator.start(); }}

以上就是Android實現啟動頁倒計時效果的詳細內容，更多關于Android 啟動頁倒計時的資料請關注好吧啦網其它相關文章！