个人练习代码库/SVG矢量动画

例1

    fillColor属性填充

    

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="200dp"
    android:width="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">


    <group
        android:name="test"
        android:rotation="0">
        <path
            android:fillColor="#FF8C00"
            android:pathData="m 20 40
                              a 20,20 0 1 0 60,0"
            />


    group>


vector>

例2：

    tips：Interpolator（插补器）

            AccelerateDecelerateInterpolator    AccelerateInterpolator    AnticipateInterpolator    AnticipateOvershot

                开始与结束速率慢，中间加速              开始速率慢后加速                     甩动                            返回最后值

            BounceInterpolator                            cycleInterpolator                   DecelerateInterpolator    LinearInterpolator

                结束时弹起                    循环播放特定次数，速率改变沿正弦曲线            开始快然后慢                        常速

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/vector3"
    tools:targetApi="lollipop">

    <target
        android:animation="@animator/cross1"
        android:name="path1"/>

    <target
        android:animation="@animator/cross2"
        android:name="path2"/>
animated-vector>

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportWidth="100"
    android:viewportHeight="100">

    <group>
        <path
            android:strokeColor="#FF4500"
            android:strokeWidth="2"
            android:strokeLineCap="round"
            android:name="path1"
            android:pathData="M 20,80
                                    L 50,80 80,80"
            />

        <path
            android:strokeWidth="2"
            android:name="path2"
            android:strokeLineCap="round"
            android:strokeColor="#FF4500"
            android:pathData="M 20,20 L 50,20 80,20"
            />

    group>

vector>

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="400"
    android:propertyName="pathData"
    android:valueFrom="M 20,20 L 50,20 80,20"
    android:valueTo="M 20,20 L 50,50 80,80"
    android:valueType="pathType"
    android:interpolator="@android:anim/linear_interpolator">

objectAnimator>

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="400"
    android:propertyName="pathData"
    android:valueFrom="M 20,80
                              L 50,80 80,80"
    android:valueTo="M 20,80 L 50,50 80,20"
    android:valueType="pathType"
    android:interpolator="@android:anim/linear_interpolator">

objectAnimator>

例3（日月地小模型）

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    android:valueType="floatType"
    android:interpolator="@android:anim/linear_interpolator">

objectAnimator>

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="40000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    android:valueType="floatType"
    android:interpolator="@android:anim/linear_interpolator">

objectAnimator>

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <group
        android:name="sun"
        android:pivotX="60"
        android:pivotY="50"
        android:rotation="0">

        <path
            android:name="path_sun"
            android:fillColor="#FFD700"
            android:pathData="
                M 50,50
                a 10,10 0 1,0 20,0
                a 10,10 0 1,0 -20,0" />

        <group
            android:name="earth"
            android:pivotX="85"
            android:pivotY="50"
            android:rotation="0">

            <path
                android:name="path_earth"
                android:fillColor="#836FFF"
                android:pathData="
                    M 80,50
                    a 5,5 0 1,0 10,0
                    a 5,5 0 1,0 -10,0" />

            <group>
                <path
                    android:fillColor="#838B83"
                    android:pathData="
                        M 95,50
                        m -5 0
                        a 3,3 0 1,0 6 0
                        a 3,3 0 1,0 -6,0" />
            group>
        group>
    group>
vector>

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/sun"
    tools:targetApi="lollipop">
    <target
        android:name="sun"
        android:animation="@animator/sun" />
    <target
        android:name="earth"
        android:animation="@animator/earth" />
animated-vector>

4.SVG编辑器

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="210"
    android:viewportHeight="297"
    android:width="744.09447dp"
    android:height="1052.362179dp">
    <path
        android:pathData="M23.434524 125.17217l0 36.43288 9.859569 -0.69258 0 -34.50747z"
        android:fillColor="#353564"
        android:strokeLineJoin="round" />
    <path
        android:pathData="M23.434524 161.60505l44.60119 24.94185 19.790851 -5.30401 -54.532472 -20.33042z"
        android:fillColor="#afafde"
        android:strokeLineJoin="round" />
    <path
        android:pathData="M33.294093 126.405l54.532472 -36.189467 0 91.027357 -54.532472 -20.33042z"
        android:fillColor="#e9e9ff"
        android:strokeLineJoin="round" />
    <path
        android:pathData="M23.434524 125.17217L68.035714 80.774044 87.826565 90.215533 33.294093 126.405Z"
        android:fillColor="#4d4d9f"
        android:strokeLineJoin="round" />
    <path
        android:pathData="M68.035714 80.774044l0 105.772856 19.790851 -5.30401 0 -91.027357z"
        android:fillColor="#d7d7ff"
        android:strokeLineJoin="round" />
    <path
        android:pathData="M23.434524 125.17217l44.60119 -44.398126 0 105.772856 -44.60119 -24.94185z"
        android:fillColor="#8686bf"
        android:strokeLineJoin="round" />
vector>