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

簡介

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

一般來說有美術(shù)人員負(fù)責(zé)設(shè)計和切圖。嘗試實現(xiàn)時，我們可以使用使用drawable，來模擬實現(xiàn)這個轉(zhuǎn)圈的效果。

示例

dimens.xml

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

6dp2dp20dp4dp

drawable

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

shape_thumb_round_1.xml # 靜態(tài)thumblayers_seek_bar_progress_1.xmllayers_thumb_ring_sweep_1.xmlrotate_thumb_1.xml

shape_thumb_round_1.xml

用solid和stroke做出的圓環(huán)效果

layers_thumb_ring_sweep_1.xml

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

rotate_thumb_1.xml

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

旋轉(zhuǎn)參數(shù)android:toDegrees可以根據(jù)需求定義。

layers_seek_bar_progress_1.xml

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

layout

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

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

Activity中調(diào)用

由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)

使用靜態(tài)的thumb

mBinding.playSb.setThumb(mSolidThumb);

使用轉(zhuǎn)圈圈的效果，先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();

效果如下圖

可以在靜態(tài)和動態(tài)之間相互切換。

離開頁面時記得關(guān)閉動畫

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

小結(jié)

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

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

參考：

• 使用layer-list的環(huán)形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/