摘要：資源加載完成后，又切換回靜態效果。分別是種，個動畫，個進度條底座。使用，疊加多層效果。定義旋轉效果。定義進度條的樣式。離開頁面時記得關閉動畫小結小結要實現轉圈的效果。主要還是直接操作對象，把動畫加進去。做出更豐富的效果。

簡介

某些音樂播放或者視頻播放的界面上，資源還在加載時，進度條的原點（thumb）會顯示一個轉圈的效果。
資源加載完成后，又切換回靜態效果。這個效果增強了用戶體驗。

一般來說有美術人員負責設計和切圖。嘗試實現時，我們可以使用使用drawable，來模擬實現這個轉圈的效果。

示例

dimens.xml

為方便管理，可以添加一些尺寸設置

6dp2dp20dp4dp

drawable

我們一共要添加4個drawable文件。分別是2種thumb，1個動畫，1個進度條“底座”。

shape_thumb_round_1.xml # 靜態thumblayers_seek_bar_progress_1.xmllayers_thumb_ring_sweep_1.xmlrotate_thumb_1.xml

shape_thumb_round_1.xml

用solid和stroke做出的圓環效果

layers_thumb_ring_sweep_1.xml

這是準備拿來轉圈的thumb。使用layer-list，疊加多層效果。
底部是一個半白色的圓（android:shape="oval"）。
再疊加上一層圓環（android:shape="ring"），使用了漸變色，增加動感。

rotate_thumb_1.xml

定義旋轉效果。注意它的drawable使用了上面定義的layers_thumb_ring_sweep_1.xml。

旋轉參數android:toDegrees可以根據需求定義。

layers_seek_bar_progress_1.xml

定義進度條的樣式。這個是“底座”。顏色要和上面的匹配，看起來好看一點。

layout

上面的資源文件準備完畢后。在我們的布局中添加一個SeekBar

• android:maxHeight和android:minHeight需要設置
• android:progressDrawable 用前面定義好的“底座”
• android:thumb 先使用靜態的樣式

Activity中調用

由Activity來持有Drawable變量和動畫。例子中使用了dataBinding。

private RotateDrawable mRotateThumbDrawable; //  加載中的thumb，由Activity來持有這個drawableprivate Drawable mSolidThumb;private ObjectAnimator mThumbAnimator; // 控制動畫// ...    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        mBinding = DataBindingUtil.setContentView(this, R.layout.act_seekbar_1);// ...        mRotateThumbDrawable = (RotateDrawable) AppCompatResources.getDrawable(getApplicationContext(), R.drawable.rotate_thumb_1);        mSolidThumb = AppCompatResources.getDrawable(getApplicationContext(), R.drawable.shape_thumb_round_1);    }

Drawable對象由activity直接持有，操作起來比較方便。

改變seekbar的thumb，使用方法setThumb(Drawable thumb)

使用靜態的thumb

mBinding.playSb.setThumb(mSolidThumb);

使用轉圈圈的效果，先setThumb，并且需要啟動動畫

mBinding.playSb.setThumb(mRotateThumbDrawable);mThumbAnimator = ObjectAnimator.ofInt(mRotateThumbDrawable, "level", 0, 10000);mThumbAnimator.setDuration(1000);mThumbAnimator.setRepeatCount(ValueAnimator.INFINITE);mThumbAnimator.setInterpolator(new LinearInterpolator());mThumbAnimator.start();

效果如下圖

可以在靜態和動態之間相互切換。

離開頁面時記得關閉動畫

@Overrideprotected void onDestroy() {    if (null != mThumbAnimator) {        mThumbAnimator.cancel();    }    super.onDestroy();}

小結

要實現轉圈的效果。主要還是直接操作drawable對象，把動畫加進去。
setThumb(Drawable thumb)方法接受的是Drawable對象，那么我們的思路就是從控制Drawable這點下手。

全部使用drawable可以達到文中的效果。有條件的也可以使用圖片資源。做出更豐富的效果。

參考：

• 使用layer-list的環形drawable https://stackoverflow.com/questions/30676208/how-to-create-ring-shape-drawable-in-android/30677289
• https://stackoverflow.com/questions/15083811/programmatically-rotate-drawable-or-view
• https://stackoverflow.com/questions/5872257/how-do-i-use-rotatedrawable/17123794

更多Android文章可參考 https://an.rustfisher.com/