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会执行动画效果。
这只是很简单的一个动画,根据不同的形状可以绘制很多复杂的动画,有时间可以探索探索。。。
android svg矢量图,二变X,dome
猜你喜欢
转载自blog.csdn.net/ming_csdn_/article/details/81025932
今日推荐
周排行