android svg矢量图，二变X，dome

 

 

1、先看看效果



  首先activity里面写一个ImageView

imageView1 = (ImageView)findViewById(R.id.image1);
        imageView1.setImageDrawable(getDrawable(R.drawable.svg_animated_vector));
        imageView1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //启动动画效果
                final Drawable drawable = imageView1.getDrawable();
                if (drawable instanceof Animatable){
                    ((Animatable) drawable).start();
                }
            }
        });
        
<ImageView
        android:id="@+id/image1"
        android:layout_width="400dp"
        android:layout_height="400dp"/>

2、再看svg_animated_vector文件，写入drawable文件夹，此xml是连接svg图片和动画的
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/svg_vector">
    <target
        android:name="path1"
        android:animation="@animator/svg_objectanimator1" />
    <target
        android:name="path2"
        android:animation="@animator/svg_objectanimator2" />
    <target
        android:name="path3"
        android:animation="@animator/svg_objectanimator3" />
    <target
        android:name="path4"
        android:animation="@animator/svg_objectanimator4" />
</animated-vector>

3、svg_vector文件，仍然写在drawable文件夹
画了四条线，方便从中间折断的效果
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <group>
        <path
            android:name="path1"
            android:fillColor="#0000"
            android:pathData="M20,20L50,20"//M20,20表示画笔移到坐标20,20处。L50,20表示从20,20处连线到50,20处
            android:strokeColor="@color/colorred"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
        <path
            android:name="path2"
            android:fillColor="#0000"
            android:pathData="M50,20L80,20"
            android:strokeColor="@color/colorred"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
        <path
            android:name="path3"
            android:fillColor="#0000"
            android:pathData="M20,80L50,80"
            android:strokeColor="@color/colorred"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
        <path
            android:name="path4"
            android:fillColor="#0000"
            android:pathData="M50,80L80,80"
            android:strokeColor="@color/colorred"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
    </group>
</vector>

4、再看动画效果，四根线段都要移动。
svg_objectanimator1文件，写在animator文件夹里面，有些res没有这个文件夹，自己创建一个。专门用来放属性动画的。
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:propertyName="pathData"
    android:valueFrom="M20,20L50,20"//原始的坐标
    android:valueTo="M20,20L50,50"//移动后的坐标
    android:valueType="pathType">
</objectAnimator>

svg_objectanimator2文件
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:propertyName="pathData"
    android:valueFrom="M50,20L80,20"
    android:valueTo="M50,50L80,20"
    android:valueType="pathType">
</objectAnimator>

svg_objectanimator3文件
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:propertyName="pathData"
    android:valueFrom="M20,80L50,80"
    android:valueTo="M20,80L50,50"
    android:valueType="pathType">
</objectAnimator>

svg_objectanimator4文件
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:propertyName="pathData"
    android:valueFrom="M50,80L80,80"
    android:valueTo="M50,50L80,80"
    android:valueType="pathType">
</objectAnimator>

5、到此为止，完成了这个svg图。点击ImageView会执行动画效果。
这只是很简单的一个动画，根据不同的形状可以绘制很多复杂的动画，有时间可以探索探索。。。