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会执行动画效果。
这只是很简单的一个动画,根据不同的形状可以绘制很多复杂的动画,有时间可以探索探索。。。

猜你喜欢

转载自blog.csdn.net/ming_csdn_/article/details/81025932