如何为展开/折叠视图动画化图标？

Question

我有这个图标：

当我在列表视图中按下我的项目时，我希望它旋转180度。 当我再次单击时，我希望它再次旋转180度，以便回到原始位置。

首先我尝试了：

view.animate().rotation(180).setDuration(500).start();

但它只能触发一次。之后我尝试了：

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

    <rotate
        android:duration="500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="180" />
</set>

但是动画总是从箭头向下显示并旋转到向上，即使箭头已经向上显示。那么我该怎么做才能使其正常工作呢？

- Mulgard

Answer 1

用户可以使用以下代码来处理图像点击事件：

ObjectAnimator anim = ObjectAnimator.ofFloat(v, "rotation",rotationAngle, rotationAngle + 180);
            anim.setDuration(500);
            anim.start();
            rotationAngle += 180;
            rotationAngle = rotationAngle%360;

并将 rotationAngle 变为全局变量：

int rotationAngle = 0;

- Sachin Chandil

Answer 2

如果您希望在每次按下视图时旋转180度，则可以尝试另一种解决方案，如下所示：

rotationAngle = rotationAngle == 0 ? 180 : 0;  //toggle
mExpandArrow.animate().rotation(rotationAngle).setDuration(500).start();

将旋转角度最初定义为：

int rotationAngle = 0;

- Talab Omar

---

太棒了，真是太棒了。 - Jaimin Modi

完美！谢谢。 - Pranav Goswami

Answer 3

你可以使用animatedvectordrawable来实现此功能。在prelolipop设备上，只有在使用支持库v28或更高版本时才能正常工作。

更多详情请参考这个repos：https://github.com/alexjlockwood/adp-delightful-details 在布局中添加：

<ImageView
      android:id="@+id/expandcollapse"
      android:layout_width="128dp"
      android:layout_height="128dp"
      android:layout_margin="4dp"
      android:contentDescription="@null"
      android:scaleType="fitCenter"
      app:srcCompat="@drawable/asl_checkable_expandcollapse" />

在Fragment或Activity中

expandCollapseView.setOnClickListener(v -> {
      final int[] stateSet = {android.R.attr.state_checked * (isChecked ? 1 : -1)};
      expandCollapseView.setImageState(stateSet, true);
    });

asl_checkable_expandcollapse.xml

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

  <item
    android:id="@+id/expanded"
    android:drawable="@drawable/vd_checkable_expandcollapse_expanded"
    android:state_checked="true"/>

  <item
    android:id="@+id/collapsed"
    android:drawable="@drawable/vd_checkable_expandcollapse_collapsed"/>

  <transition
    android:drawable="@drawable/avd_checkable_expandcollapse_collapsed_to_expanded"
    android:fromId="@id/collapsed"
    android:toId="@id/expanded"/>

  <transition
    android:drawable="@drawable/avd_checkable_expandcollapse_expanded_to_collapsed"
    android:fromId="@id/expanded"
    android:toId="@id/collapsed"/>

</animated-selector>

vd_checkable_expandcollapse_expanded.xml

<vector
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:width="24dp"
  android:height="24dp"
  android:tint="?attr/colorControlNormal"
  android:viewportHeight="24"
  android:viewportWidth="24">

  <group
    android:name="chevron"
    android:translateX="12"
    android:translateY="9">
    <group
      android:name="leftBar"
      android:rotation="135">
      <group android:translateY="-3">
        <path
          android:fillColor="@android:color/white"
          android:pathData="@string/path_pathmorph_expandcollapse"/>
      </group>
    </group>
    <group
      android:name="rightBar"
      android:rotation="45">
      <group android:translateY="3">
        <path
          android:fillColor="@android:color/white"
          android:pathData="@string/path_pathmorph_expandcollapse"/>
      </group>
    </group>
  </group>
</vector>

vd_checkable_expandcollapse_collapsed.xml

<vector
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:width="24dp"
  android:height="24dp"
  android:tint="?attr/colorControlNormal"
  android:viewportHeight="24"
  android:viewportWidth="24">

  <group
    android:name="chevron"
    android:translateX="12"
    android:translateY="15">
    <group
      android:name="leftBar"
      android:rotation="135">
      <group android:translateY="3">
        <path
          android:fillColor="@android:color/white"
          android:pathData="@string/path_pathmorph_expandcollapse"/>
      </group>
    </group>
    <group
      android:name="rightBar"
      android:rotation="45">
      <group android:translateY="-3">
        <path
          android:fillColor="@android:color/white"
          android:pathData="@string/path_pathmorph_expandcollapse"/>
      </group>
    </group>
  </group>
</vector>

avd_checkable_expandcollapse_collapsed_to_expanded.xml

<animated-vector
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:aapt="http://schemas.android.com/aapt"
  android:drawable="@drawable/vd_checkable_expandcollapse_collapsed">

  <target android:name="chevron">
    <aapt:attr name="android:animation">
      <objectAnimator
        android:duration="250"
        android:interpolator="@android:interpolator/fast_out_slow_in"
        android:propertyName="translateY"
        android:valueFrom="15"
        android:valueTo="9"/>
    </aapt:attr>
  </target>

  <target android:name="leftBar">
    <aapt:attr name="android:animation">
      <objectAnimator
        android:duration="200"
        android:interpolator="@interpolator/pathmorph_expandcollapse"
        android:propertyName="rotation"
        android:valueFrom="135"
        android:valueTo="45"
        android:valueType="floatType"/>
    </aapt:attr>
  </target>

  <target android:name="rightBar">
    <aapt:attr name="android:animation">
      <objectAnimator
        android:duration="200"
        android:interpolator="@interpolator/pathmorph_expandcollapse"
        android:propertyName="rotation"
        android:valueFrom="45"
        android:valueTo="135"
        android:valueType="floatType"/>
    </aapt:attr>
  </target>

</animated-vector>

avd_checkable_expandcollapse_expanded_to_collapsed.xml

<animated-vector
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:aapt="http://schemas.android.com/aapt"
  android:drawable="@drawable/vd_checkable_expandcollapse_expanded">

  <target android:name="chevron">
    <aapt:attr name="android:animation">
      <objectAnimator
        android:duration="250"
        android:interpolator="@android:interpolator/fast_out_slow_in"
        android:propertyName="translateY"
        android:valueFrom="9"
        android:valueTo="15"/>
    </aapt:attr>
  </target>

  <target android:name="leftBar">
    <aapt:attr name="android:animation">
      <objectAnimator
        android:duration="200"
        android:interpolator="@interpolator/pathmorph_expandcollapse"
        android:propertyName="rotation"
        android:valueFrom="135"
        android:valueTo="45"
        android:valueType="floatType"/>
    </aapt:attr>
  </target>

  <target android:name="rightBar">
    <aapt:attr name="android:animation">
      <objectAnimator
        android:duration="200"
        android:interpolator="@interpolator/pathmorph_expandcollapse"
        android:propertyName="rotation"
        android:valueFrom="45"
        android:valueTo="135"
        android:valueType="floatType"/>
    </aapt:attr>
  </target>

</animated-vector>

- Maksim Turaev

Answer 4

你可以在你的列表适配器上尝试这个

 btnOpen.setOnClickListener(v -> {

        if (btnOpen.getTag()!=null && btnOpen.getTag().toString().equals("180")){
            ObjectAnimator anim = ObjectAnimator.ofFloat(v, "rotation",180, 0);
            anim.setDuration(time);
            anim.start();
            btnOpen.setTag("");


        }  else {
            ObjectAnimator anim = ObjectAnimator.ofFloat(v, "rotation",0,  180);
            anim.setDuration(time);
            anim.start();
            btnOpen.setTag(180+"");

        }

    });

这个与您列表上的标签配合使用

- yousef Abbdolzadeh