圆角播放暂停按钮 及 动画效果
按钮效果图
绘制代码
通过vector绘制图形（vector不了解的同学，请百度搜索相关内容进行补课 或者 点击链接查看详细讲解）<!-- 暂停图形 --><?xml version="1.0" encoding="utf-8"?><vector xmlns:android="/apk/res/android"android:width="23dp"android:height="23dp"android:viewportWidth="23"android:viewportHeight="23"><pathandroid:name="play"android:fillColor="@color/black"android:strokeAlpha="1"android:strokeColor="@color/black"android:strokeWidth="2"android:strokeLineCap="round"android:pathData="M7,5 L7,18 M16,5 L16,18 M7,18 L7,18 M16,5 L16,5 L16,5 z" /></vector><!-- 播放图形 --><?xml version="1.0" encoding="utf-8"?><vector xmlns:android="/apk/res/android"android:width="23dp"android:height="23dp"android:viewportWidth="23"android:viewportHeight="23"><pathandroid:name="play"android:fillColor="@color/black"android:strokeAlpha="1"android:strokeColor="@color/black"android:strokeWidth="2"android:strokeLineCap="round"android:pathData="M6,5 L17,12 M6,18 L17,12 M6,18 L6,5 M7,6 L7,17 L15,12 z" /></vector>
接下来就是让它动起来
代码实现
利用set 添加动画效果（知识点 set,objectanimator,pathData 需要同学自行搜索补课 ）<?xml version="1.0" encoding="utf-8"?><set xmlns:android="/apk/res/android"android:ordering="sequentially"><objectAnimatorandroid:duration="200"android:propertyName="pathData"android:valueFrom="@string/path_play"android:valueTo="@string/path_pause"android:valueType="pathType"android:repeatMode="restart"android:repeatCount="0"/><objectAnimatorandroid:duration="100"android:propertyName="pathData"android:valueFrom="@string/path_pause"android:valueTo="@string/path_pause2"android:valueType="pathType"android:repeatMode="restart"android:repeatCount="0"/></set><!-- 播放和暂停动画 --><?xml version="1.0" encoding="utf-8"?><set xmlns:android="/apk/res/android"android:ordering="sequentially"><objectAnimatorandroid:duration="100"android:propertyName="pathData"android:valueFrom="@string/path_pause2"android:valueTo="@string/path_pause"android:valueType="pathType"android:repeatMode="restart"android:repeatCount="0"/><objectAnimatorandroid:duration="300"android:propertyName="pathData"android:valueFrom="@string/path_pause"android:valueTo="@string/path_play"android:valueType="pathType"android:repeatMode="restart"android:repeatCount="0"/></set>
我是添加了两个动作，如果为了简便不需要流畅效果可去掉一个
把动画和图形关联起来
通过 animated-vector 关联图形和动画<?xml version="1.0" encoding="utf-8"?><animated-vector xmlns:android="/apk/res/android"android:drawable="@drawable/media_pause"><targetandroid:name="play"android:animation="@anim/media_pause" /></animated-vector><?xml version="1.0" encoding="utf-8"?><animated-vector xmlns:android="/apk/res/android"android:drawable="@drawable/media_play"><targetandroid:name="play"android:animation="@anim/media_play" /></animated-vector>
java 代码调用
findViewById(R.id.image).setOnClickListener(v -> {((ImageView)v).setImageResource(!isPause ?R.drawable.media_pause_animate:R.drawable.media_play_animate);AnimatedVectorDrawable drawable = (AnimatedVectorDrawable) ((ImageView)v).getDrawable();drawable.start();isPause = !isPause;});
最后推荐一个我自己写的MVVM开源项目《Open MVVM》
有问题请私信，留言，或者发送邮件到我扣扣邮箱 qingingrunt, 再或者加入扣扣群721765299
如果觉得《android 圆角播放暂停按钮 及 动画效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
