【Android】自定義ProgressView-進度條動畫

時間 2019-12-18

標籤 Android 自定義 progressview 進度動畫欄目 Android 简体版

原文原文鏈接

前兩天公司需求，實現進度條動畫，原本想在網上找找有沒有相似的拿來用，想偷懶都不行。就簡單自定義View進度條動畫。實現很簡單。java

Github項目地址android

動畫預覽

使用在公司項目效果預覽

簡潔效果預覽

代碼實現

動畫效果很簡單，使用ObjectAnimator屬性動畫來實現，這個官方提供一些Api使用，具體能夠查看官方文檔。若是之後須要實現更復雜的動畫，能夠以此爲例進行自定義。這裏我會對基礎自定義View動畫實現簡單的說明，具體說明在代碼註釋。若是大家須要的效果跟個人相似，你能夠直接把ProgressView文件拷貝下來使用，須要的屬性不夠用的話能夠直接在裏面修改添加。git

看代碼纔是王道

自定義View-ProgressView代碼（只展現主要代碼）

public class ProgressView extends View {
    
    private void initView() {
        //初始化畫筆
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        animator = new ObjectAnimator();
        //設置動畫屬性
        animator.setPropertyName("progress");
        //設置執行動畫的View
        animator.setTarget(this);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //畫筆屬性
        paint.setAntiAlias(true);                  //設置畫筆爲無鋸齒
        paint.setColor(color);                    //設置畫筆顏色
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(1);
        //圓角形狀設置到畫布
        RectF rectF = new RectF(0, 0, progress, getHeight());
        canvas.drawRoundRect(rectF, radius, radius, paint);
    }

    public void startAnim() {
        if (animator.isRunning()) animator.end();
        //設置進度數組，  0 - max
        animator.setFloatValues(0, progress);
        //設置動畫時間
        animator.setDuration(duration);
        //動畫開啓
        animator.start();
    }

}
複製代碼

xml添加代碼

<cn.luliangdev.devprogressview.ProgressView
        android:id="@+id/progressview"
        android:layout_width="wrap_content"
        android:layout_height="30dp"/>
複製代碼

代碼使用代碼

//設置顏色
progressview.setColor(getResources().getColor(R.color.colorAccent));
//設置圓角   默認無圓角
progressview.setRadius(6);
//設置進度條長度    默認px
progressview.setProgress(500);
//設置動畫時間
progressview.setDuration(500);
//開啓動畫
progressview.startAnim();

//動畫監聽
progressview.getAnimator().addListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animation) {
        //動畫開始
    }

    @Override
    public void onAnimationEnd(Animator animation) {
       //動畫結束
    }

    @Override
    public void onAnimationCancel(Animator animation) {
        //動畫取消
    }

    @Override
    public void onAnimationRepeat(Animator animation) {
        //動畫重複
    }
});
複製代碼