美文网首页
VectorDrawable学习三:对FillColor进行动画

VectorDrawable学习三:对FillColor进行动画

作者: WeberLisper | 来源:发表于2017-10-17 10:16 被阅读80次

    事实上,除了通常的动画,如平移、旋转等外,还可以对Vector中的任意可进行赋值的属性实现动画效果。以下就path标签下的android:fillColor属性实现动画效果。

    1、画一个填充色为黑色的矩形

    利用vector画一个填充色为黑色的矩形如下:

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="100dp"
            android:height="100dp"
            android:viewportHeight="100.0"
            android:viewportWidth="100.0">
        <path
            android:name="square"
            android:fillColor="#FF000000"
            android:pathData="M0,0,L100,0,L100,100,L0,100"/>
    </vector>
    

    2、在res/animator下针对fillColor属性写一属性动画的文件:

    <objectAnimator
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="5000"
        android:propertyName="fillColor"
        android:valueFrom="@android:color/holo_red_dark"
        android:valueTo="@android:color/darker_gray"
        android:valueType="intType">
    
    </objectAnimator>
    

    3、再利用动画粘合剂将以上vectorDrawable和动画粘合起来:

    <animated-vector
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@drawable/ic_square">
    
        <target
            android:name="square"
            android:animation="@animator/anim_square"/>
    
    </animated-vector>
    

    4、运用上面的动态vectorDrawable

    运用和上一节的方法一样,此处不缀。实现的效果如下,当我们点击图片时,图片开始变色:

    效果图.gif

    5、总结

    由此可见,我们不止可以针对vector做平移、旋转等常规动画操作,我们还可以针对它的其他属性实现更多的效果。

    相关文章

      网友评论

          本文标题:VectorDrawable学习三:对FillColor进行动画

          本文链接:https://www.haomeiwen.com/subject/ntwruxtx.html