使用AnimatedVectorDrawable为按键icon改变添加动画

Posted 2021-05-13 怪兽N

文章目录

• • • 简介
    • 定义步骤
    • 总结

简介

AnimatedVectorDrawable（矢量可绘制对象）是一种无需像素化或进行模糊处理即可缩放的可绘制对象。借助AnimatedVectorDrawable类以及用于实现向后兼容的AnimatedVectorDrawableCompat，可以为矢量可绘制对象的属性添加动画效果，例如旋转或更改路径数据以将其变为其他图片。可以与帧动画 AnimationDrawable划为一类，动画可绘制图像。

项目地址：https://gitee.com/guaishoun/animated-vector-drawable.git

定义步骤

在三个 XML 文件中定义添加动画效果之后的矢量可绘制对象：

• 一个矢量可绘制对象，其中 <vector> 元素位于 res/drawable/

  res/drawable/ic_media.xml

  <vector xmlns:android="http://schemas.android.com/apk/res/android"
      android:width="128dp"
      android:height="128dp"
      android:viewportWidth="24"
      android:viewportHeight="24">
      <group
          android:name="mediaButtonGroup"
          android:pivotX="12"
          android:pivotY="12"
          android:rotation="0">
          <path
              android:name="mediaButtonIcon"
              android:fillColor="@android:color/holo_green_dark"
              android:pathData="M8,5l11,7,-11,7 0,-14 m0,0l0,7 0,7 0,7z"/>
      </group>
  </vector>
  

  注意要设置group的name和path的name，用于指定变换

• 一个添加动画效果之后的矢量可绘制对象，其中 <animated-vector> 位于 res/drawable/

  这个步骤是为了关联动画和目标

  res/drawable/ic_animator_media.xml

  <?xml version="1.0" encoding="utf-8"?>
  <animated-vector
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:drawable="@drawable/ic_media">
      <target
          android:name="mediaButtonGroup"
          android:animation="@animator/rotation"/>
      <target
          android:name="mediaButtonIcon"
          android:animation="@animator/icon_shape_change"/>
  </animated-vector>
  

• 一个或多个对象 Animator，其中 <objectAnimator> 元素位于 res/animator/

  定义动画

  形状变化动画res/animator/icon_shape_change.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="400"
        android:propertyName="pathData"
        android:valueFrom="M8,5l0,14 11,-7 -11,-7m0,7l0,4 0,0 0,0z"
        android:valueTo  ="M7,7l3,0 0,10 -3,0m6,-10l3,0 0,10 -3,0z"
        android:valueType="pathType"
        />
</set>

旋转变化动画res/animator/rotation.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="400"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360"
/>

最后动画开启

        ImageButton button = findViewById(R.id.image_button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Drawable drawable = ((ImageButton)v).getDrawable();
                if(drawable!=null){
                    AnimatedVectorDrawable animatedVectorDrawable = (AnimatedVectorDrawable)drawable;
                    animatedVectorDrawable.start();
                }
            }
        });

总结

AnimatedVectorDrawable有个特点就是path的点是要对应的，其实也是在点之间中间插值，实现在canvas层面上的绘制。里面一些属性可以ctrl+左键点击进去看看。个人觉得主要还是对点击icon的变化控制时使用吧。