矢量图动画



一、定义静态矢量图 VectorDrawable

可以使用SVG类型的资源,也就是矢量图。设置到imageView中会显示出一个心形。控制显示心形的就是上面path这个标签,一个path代表一个元素,绘制的内容是pathData下的一长串字符,里面是SVG绘制的一系列命令,提供moveTo、lineTo、close等操作,可以和Graphics。 在xml文件中的标签是vector 。这里推荐一个SVG生成vectorDrawable的链接: http://inloop.github.io/svg2android/  地址。下载SVG格式链接: http://www.58pic.com/tupian/renwusvg.html
vector_drawable_man.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="215.25001dp"
    android:height="239.24392dp"
    android:viewportHeight="239.24392"
    android:viewportWidth="215.25001">

    <path
        android:fillColor="#fb8b00"
        android:pathData="M144.254,125.492 L118.504,140.242 L99.004,121.742 L102.004,104.992
L120.254,127.742 L141.754,116.742 Z" />
    <path
        android:fillColor="#000000"
        android:pathData="M186.754,64.4929 L148.254,87.2429 L176.254,145.742 L215.254,122.492 Z" />
    <path
        android:fillColor="#000000"
        android:pathData="M194.004,97.2419 L180.754,107.492 L188.504,114.742 L199.504,104.992 Z" />
    <path
        android:fillColor="#000000"
        android:pathData="M185.504,139.992 L191.254,104.492 L150.004,91.4929 L176.254,145.742 Z" />
    <path
        android:fillColor="#000000"
        android:pathData="M169.254,123.992 L167.004,118.992 L153.254,123.742 L145.504,103.492
L155.754,98.2419 L152.504,93.2419 L139.504,100.492 L151.504,130.742 Z" />
    <path
        android:fillColor="#fdd99b"
        android:pathData="M138.5,117.74 S149,100.489,151.75,108.49 S159.5,108.99,156.75,114.24
C156.75,114.24,168.25,118.24,144.25,125.49 L138.5,117.74 Z" />
    <path
        android:name="left"
        android:fillColor="#333"
        android:pathData="M6,239.242 L36,209.242 L22.333,193.912 L47.333,174.912 L31.667,171.242
L0,193.242 L18.333,210.242 Z" />
    <path
        android:name="right"
        android:fillColor="#000000"
        android:pathData="M142.664,196.242 L123.664,168.912 L97.334,187.912 L78.334,170.582
L64.667,173.242 L95.334,204.912 L118.004,188.582 Z" />
    <path
        android:fillColor="#f44800"
        android:pathData="M39.333,93.5819 L27.667,175.582 L93.004,177.242 L106.334,98.5819 Z" />
    <path
        android:fillColor="#fb8b00"
        android:pathData="M48.333,116.242 L42.333,93.9119 L65,94.9119 Z" />
    <path
        android:fillColor="#fb8a00"
        android:pathData="M20.667,150.242 L71.664,137.912 L64.667,117.582 L75.334,111.242 L85.004,144.582
L25.333,162.912 Z" />
    <path
        android:fillColor="#fdd99b"
        android:pathData="M38.667,95.9119 L105.664,101.582 L115.334,37.2439 L50.333,24.9099
L22.667,54.5769 L40.333,63.5769 Z" />
    <path
        android:fillColor="#fdd99b"
        android:pathData="M24.25,148.99 L8.25,154.24 S-0.25,160.24,12.25,158.49 S2.5,167.74,11.75,164.24
C11.75,164.24,9.25,176.49,27.25,160.74 L24.25,148.99 Z" />
    <path
        android:fillColor="#000000"
        android:pathData="M77.75,67.743 L88.25,71.493 L103.5,40.994 L114.5,43.494 L128,30.744
S106,20.494,90.75,19.994 S78,16.994,69.75,6.244
C69.75,6.244,57.25,-8.757,44,7.744 L39.75,12.494 L52.25,15.994 L44.5,29.994
L89.75,38.244 L77.75,67.743 Z" />
    <path
        android:fillColor="#fff"
        android:pathData="M37.75,91.4929 L38.75,71.4929 L64.5,66.2429 L63.5,85.2429 Z" />
    <path
        android:fillColor="#000000"
        android:pathData="M64.495,76.7139 L40.745,82.7139 L40.745,82.7139 L40.255,80.7739 L64.005,74.7739
Z" />
    <path
        android:fillColor="#000000"
        android:pathData="M47.998,73.3039 L47.248,85.5539 L47.248,85.5539 L45.252,85.4319 L46.002,73.1819
Z" />
    <path
        android:fillColor="#000000"
        android:pathData="M59.25,39.7439 C63.116,39.7439,66.25,42.654,66.25,46.2439
C66.25,49.8337,63.116,52.7439,59.25,52.7439
C55.384,52.7439,52.25,49.8337,52.25,46.2439
C52.25,42.654,55.384,39.7439,59.25,39.7439 Z" />
</vector>


二、给矢量图元素添加动画 AnimatedVectorDrawable

在xml文件中的标签是animated-vector

drawable/vector_animated_man.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_drawable_man">
    <target
        android:name="left"
        android:animation="@anim/vector_animation_man" />
    <target
        android:name="right"
        android:animation="@anim/vector_animation_mane" />
</animated-vector>


三、定义动画文件 AnimatedVectorDrawable

在xml文件中的标签是 set

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:duration="500"
        android:propertyName="pathData"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:valueTo="M142.664,196.242 L123.664,168.912 L97.334,187.912 L78.334,170.582
L64.667,173.242 L95.334,204.912 L118.004,188.582 Z"
        android:valueFrom="M6,239.242 L36,209.242 L22.333,193.912 L47.333,174.912 L31.667,171.242
L0,193.242 L18.333,210.242 Z"
        android:valueType="pathType" />

</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:duration="500"
        android:propertyName="pathData"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:valueFrom="M142.664,196.242 L123.664,168.912 L97.334,187.912 L78.334,170.582
L64.667,173.242 L95.334,204.912 L118.004,188.582 Z"
        android:valueTo="M6,239.242 L36,209.242 L22.333,193.912 L47.333,174.912 L31.667,171.242
L0,193.242 L18.333,210.242 Z"
        android:valueType="pathType" />

</set>


Java 动画设置
mImageView = (ImageView) findViewById(R.id.image_view);
        mImageView.setImageDrawable(getResources().getDrawable(
                R.drawable.vector_animated_man, null));
        Drawable drawable = mImageView.getDrawable();
        if (drawable instanceof AnimatedVectorDrawable) {
            ((AnimatedVectorDrawable) drawable).start();
        }




你可能感兴趣的:(矢量图动画)