android svg

先看几张效果图

android svg_第1张图片 android svg_第2张图片

若需要使用svg需要更新sdk至API 21。

布局文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:gravity="center" >        <ImageView         android:id="@+id/iv"        android:layout_width="200dp"        android:layout_height="200dp"        android:background="#ccc"        android:src="@drawable/anim_vector1"/>         <ImageView android:layout_marginTop="5dp"        android:id="@+id/iv2"        android:layout_width="260dp"        android:layout_height="260dp"        android:background="#ccc"        android:src="@drawable/anim_vector2"/></LinearLayout>

Activity

package com.example.scroll;import android.app.Activity;import android.graphics.drawable.Animatable;import android.os.Bundle;import android.widget.ImageView;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);setContentView(R.layout.main_alyout);ImageView iv = (ImageView) findViewById(R.id.iv);Animatable drawable = (Animatable) (iv.getDrawable());drawable.start();ImageView iv2 = (ImageView) findViewById(R.id.iv2);((Animatable) iv2.getDrawable()).start();}}

anim_vector1.xml

<?xml version="1.0" encoding="utf-8"?><!--使用 svg_drawable1文件，所以 target中name要和svg_drawable1中group名字相同--><animated-vector     xmlns:android="http://schemas.android.com/apk/res/android"    android:drawable="@drawable/svg_drawable1"     >     <!-- animation指定动画 -->     <target          android:name="test"         android:animation="@animator/anim_path"         />        </animated-vector>

svg_drawable1.xml

<?xml version="1.0" encoding="utf-8"?><!-- android:height  android:width表示svg图形的大小，    android:viewportHeight="100"和 android:viewportWidth="100"的值的比要和  android:height 与 android:width的比相同。    该例中设为100，则 （50，50）就表示中间位置  --><vector xmlns:android="http://schemas.android.com/apk/res/android"         android:height="200dp"    android:width="200dp"    android:viewportHeight="100"    android:viewportWidth="100">    <!-- 名字命名为 test，该名字要和 anim_vector1.xml中target 的 android:name=""一致         android:pivotX="50"        android:pivotY="50"设置极点位置，该例设为50，即中间位置，旋转时可以看到图形绕中间旋转    -->    <group        android:name="test"        android:rotation="0"        android:pivotX="50"        android:pivotY="50"        >        <!-- android:pathData为绘制svg图形的指令，字母和数字间可以没有空格 -->        <path              android:fillColor="@android:color/holo_blue_light"            android:pathData="            M25 50            a 25,25 0 1,0 50,0"            />                    </group></vector>

anim_path.xml

<?xml version="1.0" encoding="utf-8"?><objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"         android:duration="2000"    android:propertyName="rotation"        android:valueFrom="0"    android:valueTo="360"    android:repeatMode="reverse"    android:repeatCount="-1"    android:interpolator="@android:anim/accelerate_decelerate_interpolator"        >    </objectAnimator>

第二个svg

anim_vector2.xml

<?xml version="1.0" encoding="utf-8"?><animated-vector     xmlns:android="http://schemas.android.com/apk/res/android"    android:drawable="@drawable/svg_drawable2"     >     <target          android:name="path1"         android:animation="@animator/anim_path_a"         />    <target          android:name="path2"         android:animation="@animator/anim_path_b"         />             </animated-vector>

svg_drawable2.xml

<?xml version="1.0" encoding="utf-8"?><vector xmlns:android="http://schemas.android.com/apk/res/android"    android:height="200dp"    android:viewportHeight="100"    android:viewportWidth="100"    android:width="200dp" >    <group>        <path            android:name="path1"            android:pathData="        M20,80        L50,80 80,80        "            android:strokeColor="@android:color/holo_green_dark"            android:strokeLineCap="round"            android:strokeWidth="5" />        <path            android:name="path2"            android:pathData="        M20,20       L50,20 80,20        "            android:strokeColor="@android:color/holo_green_dark"            android:strokeLineCap="round"            android:strokeWidth="5" />    </group></vector>

anim_path_a.xml

<?xml version="1.0" encoding="utf-8"?><!-- 只需要指定开始结束图形就可以自动渐变。 如果指定propertyName为 pathData，则需要设置android:valueType="pathType"--><objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"         android:duration="1000"    android:propertyName="pathData"        android:valueFrom="    M20,80    L50,80 80,80    "    android:valueTo="    M20,80    L50,50 80,80    "    android:valueType="pathType"    android:repeatMode="reverse"    android:repeatCount="-1"    android:interpolator="@android:anim/accelerate_decelerate_interpolator"        >    </objectAnimator>

anim_path_b.xml

<?xml version="1.0" encoding="utf-8"?><objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"         android:duration="1000"    android:propertyName="pathData"        android:valueFrom="    M20,20    L50,20 80,20    "    android:valueTo="    M20,20    L50,50 80,20    "    android:valueType="pathType"    android:repeatMode="reverse"    android:repeatCount="-1"    android:interpolator="@android:anim/accelerate_decelerate_interpolator"        >    </objectAnimator>

工程结构

android svg_第3张图片

更多相关文章

随机推荐