使用SVG实现的一个Android播放/暂停按钮

很久没写文章了,写这篇文章的目的是骗几个赞,结尾有说明。先上效果图:

非常简单的一个按钮,实现了从播放到暂停并且从暂停到播放的状态。

这个主要是依赖Android内置的vector、objectAnimator和animated-vector组合实现的动画效果。

1. Vector部分

vector主要功能室以svg语法的形式绘制静态图像。它的主要优势在于绘制简单图形时可以矢量图的形式展示,不会因为放大或缩小而失真。

首先创建icon-play.xml,并填写如下内容:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="48"
    android:viewportHeight="48">
    <!--背景圆-->
    <path
        android:name="bg_circle"
        android:fillColor="#e91e63"
        android:pathData="M0,24
                          A24,24 0 1,1 48,24
                          A24,24 0 1,1, 0,24z" />
    <!--线-->
    <path
        android:name="line"
        android:fillColor="#ffffff"
        android:pathData="M15,33
                          L15,15
                          Q15,12 18,12
                          L18,12
                          Q21,12 21,15
                          L21,33
                          Q21,36 18,36
                          L18,36
                          Q15,36 15,33
                          
                          M27,33
                          L27,15
                          Q27,12 30,12
                          L30,12
                          Q33,12 33,15
                          L33,33
                          Q33,36 30,36
                          L30,36
                          Q27,36 27,33
                    " />
</vector>
复制代码

显示效果如下:

vector的画布坐标与view中的画布坐标一致,左上角是原点,向右是x正方向,向下是y正方向。vector节点下的width和height与常用xml布局中的属性是一致的,而viewportWidth和vie

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值