26
2017
09

SVG,Vector(二)

SVG,Vector(二)


动画效果

第一步:布局文件引用一个图片

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.athp.svgdemo.MyDemo">

    <ImageView  android:id="@+id/iv" android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/iv"/>

</android.support.constraint.ConstraintLayout>

第二步:@drawable/iv这个资源文件

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/path_tick" >
    <target  android:name="tickCrossGroup" android:animation="@animator/anim_path_tick2cross" />
</animated-vector>

android:drawable=”…”:一个静态的vector图片资源
android:animation=”…”:你想要到动画效果
android:name=”…”:与vector图片中的android:name=“”保持一致

第三步:android:drawable=”@drawable/path_tick”这张图片

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="120dp" android:width="120dp" android:viewportWidth="24" android:viewportHeight="24">
    <group>
        <path  android:name="tickCrossGroup" android:pathData="M19.6,7 L10.4,16.2 M4.8,13.4 L9,17.6" android:strokeColor="#000" android:strokeWidth="2"/>
    </group>
</vector>

第四步: android:animation=”@animator/anim_path_tick2cross” 动画效果

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator  android:duration="3000" android:propertyName="pathData" android:valueFrom="M19.6,7 L10.4,16.2 M4.8,13.4 L9,17.6" android:valueTo="M17.6,6.4 L6.4,17.6 M6.4,6.4 L17.6,17.6" android:valueType="pathType"/>
</set>

首先我们要明白这是一个属性动画,
android:propertyName=”pathData”拿到图片的pathData这个属性
android:valueType=”pathType”顾名思义 类型是pathType
代码下载

上一篇:Android性能优化一点理解 下一篇:设计模式最佳实之工厂模式