Android SVG动画详细例子

计蒙不吃鱼

发布于 2025-06-12 11:36:22

3700

代码可运行

文章被收录于专栏：Android开发Android开发

运行总次数：0

代码可运行

前言

在之前发了一篇关于SVG动画的文章，有小伙伴反应了一些问题，所以出一篇较为详细的动画例子文章，希望有所帮助。

一、看一下实现效果

二、之前例子链接，以及问题。

文章链接：Android利用SVG实现动画效果

具体准备工作，请看链接

小提：在写动画文件时， android:propertyName=“trimPathStart” 词别写错了，End也是，如果写成小写会爆异常。

三、效果的实现

1.SVG图来源：阿里图库

2.svg转换为VectorDrawable工具：http://inloop.github.io/svg2android/

也可用Android自带。

3.转化后的代码

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="73.51dp"
    android:height="73.51dp"
    android:viewportWidth="73.51"
    android:viewportHeight="73.51">

    <path
        android:fillColor="#fcd765"
        android:pathData="M35.67,33.93s-8.5-6.22-4.85-17.76S34.13,28.61,35.67,33.93Z" />
    <path
        android:fillColor="#fcd765"
        android:pathData="M35,33.93S19,31.48,19.9,17.83,29.68,32.9,35,33.93Z" />
    <path
        android:fillColor="#fcd765"
        android:pathData="M31.48,34S16.28,43.59,11,26.54,26.36,36.91,31.48,34Z" />
    <path
        android:fillColor="#fcd765"
        android:pathData="M38.73,33.1s8.5-6.22,4.84-17.77S40.27,27.78,38.73,33.1Z" />
    <path
        android:fillColor="#fcd765"
        android:pathData="M37,34s4-12.79 0.61 -18.48C33.46,8.75,36.57,26.94,37,34Z" />
    <path
        android:fillColor="#fcd765"
        android:pathData="M39.43,33.1s16-2.45,15.07-16.1S44.71,32.07,39.43,33.1Z" />
    <path
        android:fillColor="#fcd765"
        android:pathData="M42.92,33.19s15.2,9.56,20.43-7.48S48,36.08,42.92,33.19Z" />
    <path
        android:strokeColor="#000"
        android:strokeWidth="1"
        android:strokeMiterLimit="10"
        android:pathData="M38.1,36.69S35.78,53.26,45.36,62.3" />
</vector>

给每个path加上与动画绑定的属性： 如：android:name="leaf1"

完整代码如下（hua.xml）：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="73.51dp"
    android:height="73.51dp"
    android:viewportWidth="73.51"
    android:viewportHeight="73.51">

    <path
        android:name="leaf1"
        android:fillColor="#fcd765"
        android:pathData="M35.67,33.93s-8.5-6.22-4.85-17.76S34.13,28.61,35.67,33.93Z" />
    <path
        android:name="leaf2"
        android:fillColor="#fcd765"
        android:pathData="M35,33.93S19,31.48,19.9,17.83,29.68,32.9,35,33.93Z" />
    <path
        android:name="leaf3"
        android:fillColor="#fcd765"
        android:pathData="M31.48,34S16.28,43.59,11,26.54,26.36,36.91,31.48,34Z" />
    <path
        android:name="leaf4"
        android:fillColor="#fcd765"
        android:pathData="M38.73,33.1s8.5-6.22,4.84-17.77S40.27,27.78,38.73,33.1Z" />
    <path
        android:name="leaf5"
        android:fillColor="#fcd765"
        android:pathData="M37,34s4-12.79 0.61 -18.48C33.46,8.75,36.57,26.94,37,34Z" />
    <path
        android:name="leaf6"
        android:fillColor="#fcd765"
        android:pathData="M39.43,33.1s16-2.45,15.07-16.1S44.71,32.07,39.43,33.1Z" />
    <path
        android:name="leaf7"
        android:fillColor="#fcd765"
        android:pathData="M42.92,33.19s15.2,9.56,20.43-7.48S48,36.08,42.92,33.19Z" />
    <path
        android:name="root"
        android:strokeColor="#000"
        android:strokeWidth="1"
        android:strokeMiterLimit="10"
        android:pathData="M38.1,36.69S35.78,53.26,45.36,62.3" />
</vector>

4.动画文件（svg_pathanim）

本案例用的一个动画文件，也可用多个。

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

5.在drawable文件夹下新建文件将svg与动画进行关联(hua_anim.xml)

<?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/hua">

    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf1"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf2"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf3"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf4"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf5"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf6"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf7"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="root"></target>
</animated-vector>

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

    <ImageView
        android:id="@+id/iv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        app:srcCompat="@drawable/hua_anim" />

7.在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();
        }
    }
}