android svg
16lz
2022-03-30
先看几张效果图
若需要使用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 图形开发实例
- Android开发指南-三维图形
- 笔记 TextView类:
- Android图形显示系统(一)
- Android图形显示系统(一)
- Android(安卓)利用广播实现黑名单【指定号码】的短信的拦截 附源
- Android(安卓)sdk manager无法启动之swt.jar文件没有指定
- Android开发指南-三维图形
- Android(安卓)笔记 01