午夜精品美女直播,日日操日日射,国内外成人免费激情视频,粉嫩av懂色av蜜臀av熟妇,古装清宫性艳史,在线观看日韩,亚洲成人AV在线,jizzjizz少妇亚洲水多

今天介紹一個很簡單的倒計時動畫，仿酷狗音樂的啟動頁倒計時效果，也是大多數(shù)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() {        // 設(shè)置畫筆平滑        mBackgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        // 設(shè)置畫筆顏色        mBackgroundPaint.setColor(Color.WHITE);        // 設(shè)置畫筆邊框?qū)挾?/span>        mBackgroundPaint.setStrokeWidth(5);        // 設(shè)置畫筆樣式為邊框類型        mBackgroundPaint.setStyle(Paint.Style.STROKE);    }}

開始動畫

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

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

畫圓弧

畫圓弧比較簡單，從效果圖來看，有的同學可能剛開始以為要畫兩個圓，一個背景的內(nèi)圓和一個白色邊框的大圓，其實這里可以利用畫筆設(shè)置畫筆樣式paint.setStyle()和寬度大小paint.setStrokeWidth()的特性來實現(xiàn)。代碼很簡單，開始的角度選擇-90，從頭頂開始畫。這樣實現(xiàn)的是一個順時針的倒計時效果。如果你想實現(xiàn)酷狗的逆時針效果，就控制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;
        // 畫倒計時線內(nèi)圓        canvas.drawArc(mRect, //弧線所使用的矩形區(qū)域大小                -90,  //開始角度                mSweepAngle, //掃過的角度                false, //是否使用中心                mBackgroundPaint); // 設(shè)置畫筆
        super.onDraw(canvas);    }

什么是插值動畫？

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

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

項目使用

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

 <com.example.viewdemo.CountDownTextView        android:id="@+id/tv_skip"        style="@style/Widget.AppCompat.Button.Borderless"        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;
        // 畫倒計時線內(nèi)圓        canvas.drawArc(mRect, //弧線所使用的矩形區(qū)域大小                -90,  //開始角度                mSweepAngle, //掃過的角度                false, //是否使用中心                mBackgroundPaint); // 設(shè)置畫筆
        start();
        super.onDraw(canvas);    }
    private void init() {        // 設(shè)置畫筆平滑        mBackgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        // 設(shè)置畫筆顏色        mBackgroundPaint.setColor(Color.WHITE);        // 設(shè)置畫筆邊框?qū)挾?/span>        mBackgroundPaint.setStrokeWidth(5);        // 設(shè)置畫筆樣式為邊框類型        mBackgroundPaint.setStyle(Paint.Style.STROKE);    }    /**     * 開始倒計時     */    public void start() {        // 在動畫中        if (mSweepAngle != 360) return;        //  初始化屬性動畫        animator = ValueAnimator.ofInt(mSweepAngle).setDuration(duration);        // 設(shè)置插值        animator.setInterpolator(new LinearInterpolator());        // 設(shè)置動畫監(jiān)聽        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                // 獲取屬性動畫返回的動畫值                mSweepAngle = (int) animation.getAnimatedValue();                // 重繪自己                invalidate();            }        });
        // 開始動畫        animator.start();    }}

到這里就結(jié)束啦.

Android仿酷狗音樂的啟動頁倒計時效果

開始準備

開始動畫

畫圓弧

項目使用

背景圖