Android SeekBar 自定義thumb旋轉(zhuǎn)動(dòng)畫(huà)效果

更新時(shí)間：2021年11月19日 09:05:59 作者：AnRFDev

某些音樂(lè)播放或者視頻播放的界面上，資源還在加載時(shí)，進(jìn)度條的原點(diǎn)（thumb）會(huì)顯示一個(gè)轉(zhuǎn)圈的效果。這篇文章主要介紹了Android SeekBar 自定義thumb thumb旋轉(zhuǎn)動(dòng)畫(huà)效果,需要的朋友可以參考下

簡(jiǎn)介

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

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

示例

dimens.xml

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

<dimen name="audio_course_item_seek_bar_progress_height">6dp</dimen>
<dimen name="audio_course_item_seek_bar_radius">2dp</dimen>
<dimen name="audio_seek_bar_thumb_size">20dp</dimen>
<dimen name="audio_seek_bar_thumb_ring_width">4dp</dimen>

drawable

我們一共要添加4個(gè)drawable文件。分別是2種thumb，1個(gè)動(dòng)畫(huà)，1個(gè)進(jìn)度條“底座”。

shape_thumb_round_1.xml # 靜態(tài)thumb
layers_seek_bar_progress_1.xml
layers_thumb_ring_sweep_1.xml
rotate_thumb_1.xml

shape_thumb_round_1.xml

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

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#ffffff" />
    <stroke
        android:width="@dimen/audio_seek_bar_thumb_ring_width"
        android:color="#7095fc" />
    <size
        android:width="@dimen/audio_seek_bar_thumb_size"
        android:height="@dimen/audio_seek_bar_thumb_size" />
</shape>

layers_thumb_ring_sweep_1.xml

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

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <size
                android:width="@dimen/audio_seek_bar_thumb_size"
                android:height="@dimen/audio_seek_bar_thumb_size" />
            <solid android:color="#ffffff" />
        </shape>
    </item>
    <item>
        <shape
            android:innerRadius="4dp"
            android:thicknessRatio="6"
            android:shape="ring"
            android:useLevel="false">
            <gradient
                android:endColor="#ffffff"
                android:startColor="#7095fc"
                android:type="sweep" />
            <size
                android:width="@dimen/audio_seek_bar_thumb_size"
                android:height="@dimen/audio_seek_bar_thumb_size" />
        </shape>
    </item>
</layer-list>

rotate_thumb_1.xml

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

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/layers_thumb_ring_sweep_1"
    android:duration="100"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="-360" />

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

layers_seek_bar_progress_1.xml

定義進(jìn)度條的樣式。這個(gè)是“底座”。顏色要和上面的匹配，看起來(lái)好看一點(diǎn)。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <size
                android:width="5dp"
                android:height="@dimen/audio_course_item_seek_bar_progress_height" />
            <solid android:color="#e1e5e8" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#b7bdc8" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:angle="0"
                    android:centerColor="#b8cafd"
                    android:endColor="#86a4fd"
                    android:startColor="#eef2ff" />
            </shape>
        </clip>
    </item>
</layer-list>

layout

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

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

<SeekBar
    android:id="@+id/play_sb"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:background="@null"
    android:maxHeight="@dimen/audio_course_item_seek_bar_progress_height"
    android:minHeight="@dimen/audio_course_item_seek_bar_progress_height"
    android:progress="40"
    android:progressDrawable="@drawable/layers_seek_bar_progress_1"
    android:thumb="@drawable/shape_thumb_round_1"
    app:layout_constraintTop_toTopOf="parent" />

Activity中調(diào)用

由Activity來(lái)持有Drawable變量和動(dòng)畫(huà)。例子中使用了dataBinding。

private RotateDrawable mRotateThumbDrawable; //  加載中的thumb，由Activity來(lái)持有這個(gè)drawable
private Drawable mSolidThumb;
private ObjectAnimator mThumbAnimator; // 控制動(dòng)畫(huà)
// ...
    @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對(duì)象由activity直接持有，操作起來(lái)比較方便。

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

使用靜態(tài)的thumb

mBinding.playSb.setThumb(mSolidThumb);

使用轉(zhuǎn)圈圈的效果，先setThumb，并且需要啟動(dòng)動(dòng)畫(huà)

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)和動(dòng)態(tài)之間相互切換。

離開(kāi)頁(yè)面時(shí)記得關(guān)閉動(dòng)畫(huà)

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

小結(jié)

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

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

參考：

使用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/

到此這篇關(guān)于Android SeekBar 自定義thumb旋轉(zhuǎn)動(dòng)畫(huà)效果的文章就介紹到這了,更多相關(guān)Android SeekBar 自定義thumb內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: