简介
- Scalable Vector Graphics
- 用于网络的基于矢量的图形
- 放大,或改变尺寸的情况下质量不会有损失
- XML定义
Path
- M=moveto(M,X,Y)
- L = lineto(L X,Y)
- H = horizontal lineto(H X) 画直线
- V = vertical lineto(V Y) 画垂线
- C = curveto(C X1,X2,Y2,ENDX,ENDY): 三次贝赛曲线
- S = smooth出入(SX2,Y2,ENDX,ENDY): 三次贝赛曲线
- Q = quadratic Belizier curve(Q X,Y,ENDX,ENDY): 二次贝赛曲线
- T = smooth quadratic Belzier curveto(T ENDX,ENDY): 映射前面路径后的终点
- A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2, X,Y): 弧线
- Z = closepath() 关闭路径
Android使用
静态动画
vector标识 drawable下vector.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="200dp"
android:width="200dp"
android:viewportHeight="100"
android:viewportWidth="100"> //200dp平分100份 则下面用50,则代表中心
<group>
<path
android:name="path1"
android:strokeColor="@android:color/holo_green_dark"
android:strokeWidth="5"
android:strokeLineCap="round"
android:pathData="
M 20,80
L 50,80 80,80"/>
<path
android:name="path2"
android:strokeColor="@android:color/holo_green_dark"
android:strokeWidth="5"
android:strokeLineCap="round"
android:pathData="
M 20,20
L 50,20 80,20"/>
</group>
</vector>
然后是对静态动画的path1,和path2 相应的android name 写对应的animation.
anim下 anim_path1.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android = "http://schemas.android.com/apk/res/android"
android:duration="500"
android:propertyName="pathData" //注意这里为pathData
android:valueFrom="
M 20,80
L 50,80 80,80"
android:valueTo="
M 20,80
L 50,50 80,80"
android:valueType="pathType" //注意类型
android:interpolator="@android:anim/bounce_interpolator"/>
anim下 anim_path2.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android = "http://schemas.android.com/apk/res/android"
android:duration="500"
android:propertyName="pathData"
android:valueFrom="
M 20,20
L 50,20 80,20"
android:valueTo="
M 20,20
L 50,50 80,20"
android:valueType="pathType"
android:interpolator="@android:anim/bounce_interpolator"/>
使用animated-vector标签结合
drawable下anim_vector.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vector"> //静态动画
<target
android:name="path1" //path1 对应的动画
android:animation="@anim/anim_path1"/>
<target
android:name="path2" //path2对应的动画
android:animation="@anim/anim_path2"/>
</animated-vector>
主activity布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.vectoranimation.MainActivity" >
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/anim_vector"
/>
</RelativeLayout>
主activity使用
public class MainActivity extends Activity {
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = (ImageView) findViewById(R.id.image);
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
animate();
}
});
}
protected void animate() {
// TODO Auto-generated method stub
Drawable d=imageView.getDrawable();
if(d instanceof Animatable){
((Animatable)d).start();
}
}
}