Android利用SVG实现动画效果

举报
计蒙不吃鱼 发表于 2025/06/06 23:30:04 2025/06/06
【摘要】 本文介绍了如何在Android中利用SVG实现动画效果。首先通过定义`pathData`参数(如M、L、Z等)绘制一个简单的三角形SVG图形,然后借助`objectAnimator`实现动态的线条绘制动画。文章详细讲解了从配置`build.gradle`支持VectorDrawable,到创建动画文件、关联SVG与动画,最后在Activity中启动动画的完整流程。此外,还提供了SVG绘制原理及工具

系列文章目录

Android利用SVG实现动画效果

老规矩,文中/文末会放置源码

前言

在之前一篇文章中利用drawLine实现了线条动画的效果,然后在大佬的介绍下查看了TrimPathStart/End,感觉有必要写一篇文章。

以下是本篇文章正文内容

一、先看看Android中一个简单的SVG图

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportWidth="200"
    android:viewportHeight="200">

  <path
      android:name="start"
      android:pathData="M100 4 l-100 192 l192 0 z"
      android:strokeWidth="3"
      android:strokeColor="#a2d7dc"/>

</vector>

看看大致的动画效果(动画执行效果,顺序与绘制相反)

二、pathdata中参数的定义(三角形是怎么绘制出来的)

参数定义:大写的命令为绝对坐标命令;小写的命令为相对坐标命令

  • M=moveto 命令 M or m ,移动到新的位置
  • Z=closepath 命令 Z or z,封闭路径
  • L=lineto 命令 L or l,从当前的位置画一条线到指定位置
  • H=horizontal lineto 命令 H or h,水平画一条直线到指定位置
  • V=vertical lineto 命令 V or v,垂直画一条直线到指定位置
  • Q=quadratic Bézier curve 命令 Q or q ,贝塞尔曲线(Android学习自定义view必备基础)
  • T=smooth quadratic Bézier curveto 命令 T  光滑二次贝塞尔曲线
  • A=elliptical arc  命令 A 椭圆弧seg

1.Demo绘制三角形的解读:

代码如下:

 android:pathData="M100 4 l-100 192 l192 0 z"
 //为了方便讲解改成如下
  android:pathData="M100 4 l-100 192 l192 0 l-92,-194"

M100 4:起点为100,4(x为100,y为4)。
l-100 192: l命令是从当前的位置画一条线到指定位置,-100是减少 ,从最开始的值开始计算100-100,4+192,第二个点为0,196(x为0,y为196)。
l192 0 :同上,从上一个点计算0+192,196+0,第三个点为 192,196(x为192,y为196)。
l-92,-194:回到原点。

实际绘制效果:

三、动画效果的实现

1.在bulid.gradle(Module:app)中增加对vectorDrawables的支持。

    defaultConfig {
        ...........
        //增加对vectorDrawables的支持
        vectorDrawables.useSupportLibrary = true

    }

2.以上步骤画出的SVG图:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportWidth="200"
android:viewportHeight="200">

<path
    android:name="start"
    android:pathData="M100 4 l-100 192 l192 0 l-92,-194"
    android:strokeWidth="3"
    android:strokeColor="#a2d7dc"/>

</vector>

3.在res文件夹下新建animator文件夹放置动画文件

动画文件代码(这个比较简单就不一一介绍了)。

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:propertyName="trimPathStart"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:valueFrom="1"
    android:valueTo="0"
    android:valueType="floatType">
</objectAnimator>

4.在drawable文件夹下新建文件将svg与动画进行关联

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/你的svg名称">
    <target
        android:animation="@animator/你的动画名称"
        android:name="start"></target>
</animated-vector>

5.在ImageView中引用第4步的文件

    <ImageView
        android:id="@+id/iv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        app:srcCompat="@drawable/taiji_anim" />
记得在根布局里加上:**xmlns:app="http://schemas.android.com/apk/res-auto"**

6.在Activity中启动动画

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private ImageView anim_path;

    private Drawable drawable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        anim_path = (ImageView) findViewById(R.id.iv);
        anim_path.setOnClickListener(this);

}

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.iv:
                startAnim(anim_path);
                break;
        }
    }

    /**
     * 启动动画
     *
     * @param iv
     */
    private void startAnim(ImageView iv) {
        drawable = iv.getDrawable();
        if (drawable instanceof Animatable) {
            ((Animatable) drawable).start();
        }
    }
}

7.实现效果

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。