android 圆角播放暂停按钮及动画效果

最新推荐文章于 2023-06-09 14:51:30 发布

Runt02

最新推荐文章于 2023-06-09 14:51:30 发布

阅读量913

点赞数 1

分类专栏： android 文章标签： android 动画

本文链接：https://blog.csdn.net/Runt02/article/details/127351898

版权

android 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

圆角播放暂停按钮及动画效果

按钮效果图

在这里插入图片描述

绘制代码

通过vector绘制图形（vector不了解的同学，请百度搜索相关内容进行补课或者点击链接查看详细讲解）

<!-- 暂停图形 -->
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="23dp"
    android:height="23dp"
    android:viewportWidth="23"
    android:viewportHeight="23">
    <path
        android: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="http://schemas.android.com/apk/res/android"
    android:width="23dp"
    android:height="23dp"
    android:viewportWidth="23"
    android:viewportHeight="23">
    <path
        android: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="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">

    <objectAnimator
        android:duration="200"
        android:propertyName="pathData"
        android:valueFrom="@string/path_play"
        android:valueTo="@string/path_pause"
        android:valueType="pathType"
        android:repeatMode="restart"
        android:repeatCount="0"/>
    <objectAnimator
        android: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="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">

    <objectAnimator
        android:duration="100"
        android:propertyName="pathData"
        android:valueFrom="@string/path_pause2"
        android:valueTo="@string/path_pause"
        android:valueType="pathType"
        android:repeatMode="restart"
        android:repeatCount="0"/>
    <objectAnimator
        android: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="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/media_pause">

    <target
        android:name="play"
        android:animation="@anim/media_pause" />
</animated-vector>

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/media_play">

    <target
        android: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;

        });