简介

某些音乐播放或者视频播放的界面上,资源还在加载时,进度条的原点(thumb)会显示一个转圈的效果。

资源加载完成后,又切换回静态效果。这个效果增强了用户体验。

一般来说有美术人员负责设计和切图。尝试实现时,我们可以使用使用drawable,来模拟实现这个转圈的效果。

示例

dimens.xml

为方便管理,可以添加一些尺寸设置

<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个drawable文件。分别是2种thumb,1个动画,1个进度条“底座”。

shape_thumb_round_1.xml # 静态thumb
layers_seek_bar_progress_1.xml
layers_thumb_ring_sweep_1.xml
rotate_thumb_1.xml

shape_thumb_round_1.xml

用solid和stroke做出的圆环效果

<?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

这是准备拿来转圈的thumb。使用layer-list,叠加多层效果。

底部是一个半白色的圆(android:shape="oval")。

再叠加上一层圆环(android:shape="ring"),使用了渐变色,增加动感。

<?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

定义旋转效果。注意它的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" />

旋转参数android:toDegrees可以根据需求定义。

layers_seek_bar_progress_1.xml

定义进度条的样式。这个是“底座”。颜色要和上面的匹配,看起来好看一点。

<?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

上面的资源文件准备完毕后。在我们的布局中添加一个SeekBar

  • android:maxHeightandroid:minHeight需要设置
  • android:progressDrawable 用前面定义好的“底座”
  • android:thumb 先使用静态的样式
<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中调用

由Activity来持有Drawable变量和动画。例子中使用了dataBinding。

private RotateDrawable mRotateThumbDrawable; //  加载中的thumb,由Activity来持有这个drawable
private 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();

效果如下图

可以在静态和动态之间相互切换。

离开页面时记得关闭动画

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

小结

要实现转圈的效果。主要还是直接操作drawable对象,把动画加进去。

setThumb(Drawable thumb)方法接受的是Drawable对象,那么我们的思路就是从控制Drawable这点下手。

全部使用drawable可以达到文中的效果。有条件的也可以使用图片资源。做出更丰富的效果。

参考:

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

Android SeekBar 自定义thumb,thumb旋转动画效果的更多相关文章

  1. android xml实现animation 4种动画效果

    animation有四种动画类型 分别为alpha(透明的渐变).rotate(旋转).scale(尺寸伸缩).translate(移动),二实现的分发有两种,一种是javaCode,另外一种是XML ...

  2. 拒绝IE8-,CSS3 transform rotate旋转动画效果(支持IE9+/chrome/firefox)

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

  3. Android笔记之为自定义对话框添加移动动画效果

    给底部的对话框添加移动动画效果 可通过Window.setWindowAnimations(int resId)设置 SharingDialog.java package com.bu_ish.sha ...

  4. Android SeekBar自定义使用图片和颜色显示

    案例使用的图片如下:                            1.在res/drawable目录下新增一个xml风格文件,seekbar_define_style.xml ? 1 2 3 ...

  5. Android PullToRrefresh 自定义下拉刷新动画 (listview、scrollview等)

    PullToRefreshScrollView 自定义下拉刷新动画,只需改一处. 以下部分转载自http://blog.csdn.net/superjunjin/article/details/450 ...

  6. AndroidUI 视图动画-旋转动画效果 (RotateAnimation)

    RotateAnimation,能实现Android的视图的旋转效果,废话不多说直接上代码. 新建一个Android 项目,在activity_main.xml中添加一个按钮,然后使用Relative ...

  7. [android] 优酷环形菜单-旋转动画

    获取房子,菜单图标ImageView对象,获取三个圆环RelativeLayout对象 给菜单图标(icon_menu)设置点击事件 定义一个成员变量isLevel3Show来存储第三级菜单是否显示 ...

  8. 一起学android之设置ListView数据显示的动画效果(24)

    效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFpX3FpbmdfeHVfa29uZw==/font/5a6L5L2T/fontsize/40 ...

  9. UI特效--Android利用ViewFlipper实现屏幕切换动画效果

    .屏幕切换指的是在同一个Activity内屏幕见的切换,最长见的情况就是在一个FrameLayout内有多个页面,比如一个系统设置页面:一个个性化设置页面.2.介绍ViewFilpper类ViewFl ...

  10. Mono For Android中简单实现按钮的动画效果

    Android中动画的分Tween Animation和Frame Animation,本节主要讲Tween Animation的实现. 一般是通过XML文件来定义动画的,具体如下: 1.在项目res ...

随机推荐

  1. Zookeeper的选举机制和同步机制超详细讲解,面试经常问到!

    前言 zookeeper相信大家都不陌生,很多分布式中间件都利用zk来提供分布式一致性协调的特性.dubbo官方推荐使用zk作为注册中心,zk也是hadoop和Hbase的重要组件.其他知名的开源中间 ...

  2. css的公共属性及原因

    在我们写多个网页的时候,会发现总会遇到很多相同的css样式,若是每次都要在网页代码中写,会浪费时间,同时也会消耗浏览器和计算机的性能.因此,我个人将我敲代码过程中的经常用到的css样式总结了一下.再用 ...

  3. 12c slience dbca ORA-27125

    问题:12c slience dbca ORA-27125 解决办法:网上大部分方法是把dba组放在内核的,没有效果,可以尝试google找到一位大神的方案,成功解决https://oracle-ad ...

  4. ubuntu20.04安装网易云音乐

    Ubuntu20.04安装网易云 进入网易云音乐下载地址 下载对应客户端 进入终端,安装 sudo dpkg -i 软件名.deb

  5. std::sort 的注意事项

    Luogu P1177 [模板]快速排序 \(\Large{AC}\) 代码: #include<bits/stdc++.h> using namespace std; int n,a[1 ...

  6. HDC 2021 | HMS Core 6.0:连接与通信论坛,为App打造全场景连接体验

    如何在弱网环境下让用户享受无中断沉浸体验? 如何在全场景互联中让多设备交互如丝般顺滑? 如何在无网区域让移动终端发出紧急求助信息? 连接无处不在,连接与体验息息相关!流畅的网络体验已成为应用开发的关键 ...

  7. 无法获取指向控制台的文件描述符 (couldn't get a file descriptor referring to the console)

    背景 最近收拾东西,从一堆杂物里翻出来尘封四年多的树莓派 3B 主机来,打扫打扫灰尘,接上电源,居然还能通过之前设置好的 VNC 连上.欣慰之余,开始 clone 我的 git 项目,为它们拓展一个新 ...

  8. 返回值优化 RVO

    <深度探索C++对象模型>-- 2.3 返回值的初始化 & 在编译器层面做优化

  9. python join的用法

    joinn其实就相当于用某个字符串来拼接列表或者元组中的元素 当然也可以将字符串以某一个str拼接起来 得出的结果自然也是字符串 ex1: results: 实例用处: 当我们从某个文件中读出内容时, ...

  10. 12. 亿级流量电商系统JVM模型参数二次优化

    亿级流量电商系统JVM模型参数预估方案,在原来的基础上采用ParNew+CMS垃圾收集器 一.亿级流量分析及jvm参数设置 1. 需求分析 大促在即,拥有亿级流量的电商平台开发了一个订单系统,我们应该 ...