矢量图动画 AnimatedVectorDrawable

看文章后自己小结一下:

https://blog.csdn.net/gitzzp/article/details/56289647

矢量图动画的关键点:

  • vector 矢量图
  • animated-vector 矢量图动画
  • objectAnimator 动画

animated-vector的作用是连接vector(矢量图)和objectAnimator(动画)

在Android中一个SVG经过转换后一般是一个类似这样的XML;

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="219dp"
    android:height="304dp"
    android:viewportWidth="219"
    android:viewportHeight="304">
  <path
      android:pathData="M113.456,165.971C110.805,166.54 114.916,185.891 111.337,201.158C105.255,227.102 87.367,245.393 69.142,263.253C66.926,265.423 64.137,267.136 61.111,264.473C57.302,261.122 59.435,258.138 62.051,255.426C66.991,250.311 72.244,245.485 76.973,240.184C91.833,223.525 103.181,207.597 102.659,182.666C102.268,173.916 102.484,168.299 103.43,161.759C104.201,156.429 106.435,151.625 112.338,150.937C118.185,150.256 121.237,154.503 123.45,159.509C131.545,177.818 129.564,196.501 124.147,214.674C117.79,236 105.295,253.961 89.325,269.352C85.936,272.618 81.8,278.845 76.791,273.962C71.143,268.457 78.516,265.122 81.654,262.064C100.78,243.433 113.499,224.37 118.379,197.917C120.571,186.031 116.484,164.967 113.456,165.972L113.456,165.971ZM106.777,114.452C94.603,113.25 86.084,121.877 82.675,139.364C80.158,152.285 78.789,165.446 75.918,178.277C71.455,198.221 60.156,214.34 45.77,228.425C42.854,231.28 39.379,234.833 35.434,231.018C31.133,226.857 35.406,223.605 38.224,220.956C59.391,201.051 67.635,175.692 70.495,147.536C71.71,135.581 73.835,120.97 83.456,111.806C92.097,103.576 99.479,101.972 109.2,102.987C115.803,103.675 126.069,107.031 123.782,113.247C121.62,119.123 112.603,115.027 106.777,114.452Z"
      android:strokeWidth="1"
      android:fillColor="#000000"
      android:fillAlpha="0.3"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
  <path
      android:pathData="M174.09,146.792C174.013,149.326 174.196,152.139 171.262,153.206C167.813,154.459 165.566,153.088 164.364,149.504C162.746,144.676 161,139.881 159.055,135.18C152.388,119.059 141.648,106.449 126.195,98.461C100.745,85.305 79.199,94.233 69.78,121.466C69.114,123.392 68.465,125.327 67.874,127.277C66.824,130.745 65.799,134.994 61.218,133.907C56.067,132.685 56.721,128.757 57.684,124.164C63.889,94.568 84.122,79.201 113.681,83.096C144.794,87.197 168.752,119.618 174.09,146.79L174.09,146.792Z"
      android:strokeWidth="1"
      android:fillColor="#000000"
      android:fillAlpha="0.3"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
  <path
      android:pathData="M161.974,189.426C161.364,219.177 154.895,246.145 134.419,268.557C131.645,271.592 127.611,276.536 123.547,272.819C120.815,270.32 123.549,265.077 126.37,261.919C158.118,226.373 162.303,162.719 132.017,128.794C129.489,125.962 127.45,122.729 131.166,119.632C135.735,115.825 138.48,119.864 141.186,122.761C154.341,136.841 162.213,162.3 161.974,189.427L161.974,189.426Z"
      android:strokeWidth="1"
      android:fillColor="#000000"
      android:fillAlpha="0.3"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
  <path
      android:pathData="M145.826,185.551C145.557,189.214 146.402,195.269 140.4,195.679C132.066,196.246 134.567,188.901 134.535,184.485C134.437,170.911 131.314,158.317 123.599,147.092C120.455,142.521 116.983,137.342 110.358,138.509C104.213,139.591 101.345,144.644 99.322,150.077C98.792,151.5 98.429,152.984 97.921,154.416C95.798,160.389 97.072,172.149 89.982,170.591C82.799,169.011 86.619,157.872 88.171,150.903C90.612,139.941 95.34,130.346 107.669,128.226C120.756,125.976 128.379,134.079 134.602,144.144C141.197,154.812 146.03,171.889 145.826,185.551ZM82.151,71.452C81.846,74.725 79.628,76.043 77.383,77.206C55.507,88.538 48.804,108.581 45.352,131.024C43.206,144.976 40.937,159.277 30.598,170.302C28.561,172.475 26.078,175 22.803,172.571C20.528,170.884 20.019,167.745 21.616,165.7C35.52,147.895 32.929,125.106 40.206,105.319C46.226,88.948 56.101,75.927 72.018,68.121C76.231,66.055 81.031,64.369 82.151,71.452Z"
      android:strokeWidth="1"
      android:fillColor="#000000"
      android:fillAlpha="0.3"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
  <path
      android:pathData="M106.666,37.765C120.465,37.831 133.197,41.621 145.343,46.989C148.9,48.561 153.695,50.473 151.476,55.688C149.709,59.84 145.885,58.688 142.31,57.208C112.453,44.845 84.043,46.057 57.624,66.337C55.266,68.148 51.776,69.475 49.488,66.33C46.756,62.577 49.352,59.631 52.231,57.309C68.252,44.388 86.836,37.669 106.666,37.765ZM199.237,180.332C199.355,190.007 197.927,198.489 196.714,207.491C196.267,210.815 194.735,214.872 189.939,213.885C186.119,213.099 185.773,209.387 186.32,206.542C192.081,176.656 186.593,148.255 175.5,120.529C173.948,116.65 174.488,113.138 178.975,112.212C183.35,111.31 184.708,114.793 186.137,118.344C194.223,138.454 198.946,156.438 199.237,180.332Z"
      android:strokeWidth="1"
      android:fillColor="#000000"
      android:fillAlpha="0.3"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
  <path
      android:pathData="M102.083,59.683C131.078,60.425 154.8,71.793 172.18,93.972C174.856,97.387 179.254,101.498 173.667,105.48C168.814,108.939 166.69,103.474 164.275,100.729C147.735,81.935 127.153,71.869 102.084,70.749C97.648,70.551 89.729,71.889 89.729,66.493C89.729,59.9 98.255,59.585 102.083,59.683ZM207.086,119.47C208.328,124.957 207.936,130.251 203.914,130.508C201.309,130.676 199.147,129.005 198.467,126.191C192.559,101.695 180.522,81.228 159.703,66.412C157.64,64.944 156.128,62.639 158.378,59.984C160.294,57.724 163.179,57.323 165.255,58.676C170.297,61.957 175.464,65.295 179.678,69.574C194.721,84.853 202.2,97.89 207.086,119.472L207.086,119.47ZM101.466,278.995C96.562,279.164 93.651,275.143 97.708,270.672C113.69,253.058 125.686,233.338 131.701,210.147C132.369,207.571 134.181,205.595 137.268,206.232C139.987,206.792 141.585,208.663 142.096,211.407C144.059,221.941 114.931,273.55 104.512,278.057C103.351,278.558 102.661,278.953 101.468,278.995L101.466,278.995ZM180.655,192.089C180.698,208.492 177.122,223.341 171.357,238.138C170.024,241.558 168.283,245.572 164.075,244.383C158.724,242.871 159.895,238.408 161.442,234.337C168.963,214.53 172.267,194.307 168.146,173.147C167.471,169.683 165.814,164.043 171.579,163.05C178.485,161.862 180.063,178.119 180.655,192.089ZM93.978,187.039C92.114,202.346 86.541,213.554 77.601,224.247C70.81,232.368 63.786,240.292 56.801,248.248C54.23,251.175 50.763,252.838 47.58,250.03C44.196,247.041 46.164,243.701 48.692,240.844C55.711,232.911 63.131,225.284 69.565,216.898C76.33,208.08 81.728,198.406 83.068,186.912C83.515,183.07 86.047,180.433 90.519,181.571C93.466,182.321 94.148,185.645 93.978,187.039ZM126.704,18.357C147.703,21.872 167.859,30.406 184.473,46.3C187.619,49.31 192.309,53.066 187.537,57.603C183.633,61.317 180.174,57.235 177.316,54.473C162.244,39.901 143.762,32.444 123.586,28.545C119.439,27.744 114.898,27.165 116.423,21.403C117.626,16.854 121.727,17.727 126.704,18.357ZM11.609,135.421C15.793,115.586 19.009,95.375 31.523,78.524C34.235,74.872 36.96,68.072 43.141,72.697C49.037,77.108 42.844,80.482 40.461,83.816C29.168,99.615 26.698,118.462 22.163,136.595C21.154,140.632 20.377,145.232 14.777,144.069C9.887,143.052 10.88,139.012 11.608,135.42L11.609,135.421ZM100.33,17.237C104.018,16.81 108.077,17.472 108.689,21.571C109.499,26.989 105.253,27.954 100.79,28.142C83.097,28.885 67.542,35.783 52.784,45.001C50.009,46.734 46.821,50.564 43.665,46.516C40.45,42.396 43.221,39.13 46.885,36.515C62.89,25.092 80.697,18.683 100.328,17.237L100.33,17.237ZM60.205,154.14C55.491,173.474 49.735,190.507 36.01,201.933C32.627,204.659 28.852,209.529 24.278,205.06C18.722,199.634 25.531,197.267 28.401,194.745C41.761,183.005 46.761,167.102 51.018,150.751C51.93,147.25 52.916,142.889 57.603,144.171C61.899,145.348 61.246,149.865 60.205,154.14Z"
      android:strokeWidth="1"
      android:fillColor="#B2B2B2"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
</vector>

要给予矢量图动画,就得先给想要动画的path起个名字;

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="219dp"
    android:height="304dp"
    android:viewportWidth="219"
    android:viewportHeight="304">
  <path
      android:name="my_path_1"
      android:pathData="M113.456,165.971C110.805,166.54 114.916,185.891 111.337,201.158C105.255,227.102 87.367,245.393 69.142,263.253C66.926,265.423 64.137,267.136 61.111,264.473C57.302,261.122 59.435,258.138 62.051,255.426C66.991,250.311 72.244,245.485 76.973,240.184C91.833,223.525 103.181,207.597 102.659,182.666C102.268,173.916 102.484,168.299 103.43,161.759C104.201,156.429 106.435,151.625 112.338,150.937C118.185,150.256 121.237,154.503 123.45,159.509C131.545,177.818 129.564,196.501 124.147,214.674C117.79,236 105.295,253.961 89.325,269.352C85.936,272.618 81.8,278.845 76.791,273.962C71.143,268.457 78.516,265.122 81.654,262.064C100.78,243.433 113.499,224.37 118.379,197.917C120.571,186.031 116.484,164.967 113.456,165.972L113.456,165.971ZM106.777,114.452C94.603,113.25 86.084,121.877 82.675,139.364C80.158,152.285 78.789,165.446 75.918,178.277C71.455,198.221 60.156,214.34 45.77,228.425C42.854,231.28 39.379,234.833 35.434,231.018C31.133,226.857 35.406,223.605 38.224,220.956C59.391,201.051 67.635,175.692 70.495,147.536C71.71,135.581 73.835,120.97 83.456,111.806C92.097,103.576 99.479,101.972 109.2,102.987C115.803,103.675 126.069,107.031 123.782,113.247C121.62,119.123 112.603,115.027 106.777,114.452Z"
      android:strokeWidth="1"
      android:fillColor="#000000"
      android:fillAlpha="0.3"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
</vector>

然后写对应的animated-vector;

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_fp_default"
    >
    <target
        android:animation="@anim/ic_fp_p_1_anim"
        android:name="my_path_1" />
</animated-vector>

这里target是给矢量图中对应名字的path一个动画;

动画ic_fp_p_1_anim的内容如下:

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially" >
  <set
      android:ordering="together" >
    <objectAnimator
        android:duration="300"
        android:propertyName="fillColor"
        android:valueFrom="#000000"
        android:valueTo="#4285F4"
        android:valueType="intType"
        android:interpolator="@android:interpolator/linear_out_slow_in" />
    <objectAnimator
        android:duration="300"
        android:propertyName="fillAlpha"
        android:valueFrom="0.07f"
        android:valueTo="0.65f"
        android:valueType="floatType" />
  </set>
  <set
      android:ordering="together" >
    <objectAnimator
        android:duration="300"
        android:propertyName="fillColor"
        android:valueFrom="#4285F4"
        android:valueTo="#000000"
        android:valueType="intType"
        android:interpolator="@android:interpolator/fast_out_slow_in" />
    <objectAnimator
        android:duration="300"
        android:propertyName="fillAlpha"
        android:valueFrom="0.65f"
        android:valueTo="0.07f"
        android:valueType="floatType" />
  </set>
</set>
  • set 表示动画组合
  • objectAnimator 是单个动画效果
  • propertyName 执行动画的属性
  • valueFrom 起始值
  • valueTo 结束值
  • valueType 值的类型;intType、floatType等;
  • interpolator 插值器;控制值变化速度,有先快后慢啊,匀速啊什么的;

动画组内成员的播放顺序,android:ordering:

  • together 同步播放
  • sequentially 顺序播放

属性:

  • fillColor 填充的颜色
  • fillAlpha 非透明度
  • trimPathStart 从头播放到尾,根据dataPath绘制的顺序,所以有时动画可能会比较奇怪,特别是用到贝塞尔曲线之类时
  • trimPathEnd 从尾播放到头,其它同上
  • translateY 在Y轴方向平移
  • pathData 形状变化,valueFrom和valueTo的长度需要一致

动画重复播放

  • objectAnimator 有属性 android:repeatCount和android:repeatMode可以控制重复播放
  • AnimatedVectorDrawable 有方法registerAnimationCallback,可以通过监听动画结束进行重复播放

除了path之外,group、clip-path等标签也可以播放动画;

启停动画

AnimatedVectorDrawable mAnimatedVectorDrawable = ((AnimatedVectorDrawable)icon.getDrawable());

if (!mAnimatedVectorDrawable.isRunning()) {
    mAnimatedVectorDrawable.start();
}

if (mAnimatedVectorDrawable.isRunning()) {
    mAnimatedVectorDrawable.stop();
}

猜你喜欢

转载自blog.csdn.net/weixin_39821531/article/details/89312545
今日推荐