Question

我正在为我的Android应用中的tablayout中的图标设置动画。
我已经尝试过使用动画矢量可绘制对象和AnimatedStateListDrawable，同时打开和关闭状态，并且我已经使用shapeshifter设计了动画，但是没有任何效果。
我尝试使它像Android时钟应用一样。
像这样：

我受此blog的启发并尝试这样做：

这就是我所做的：

anim_dwbl_bus.xml

<animated-selector xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    tools:targetApi="lollipop">

    <!-- provide a different drawable for each state-->
    <item android:id="@+id/state_on"
        android:drawable="@drawable/ic_location_on_black_24dp"
        android:state_checked="true"/>
    <item android:id="@+id/state_off"
        android:drawable="@drawable/inactive_location"/>

    <!-- specify transitions -->
    <transition
        android:drawable="@drawable/avd_anim"
        android:fromId="@id/state_off"
        android:toId="@id/state_on"/>

</animated-selector>

inactive_location.xml

<vector android:height="24dp" android:tint="#FFFFFF"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FFF" android:pathData="M12,2C8.13,2 5,5.13 5,9c0,5.25 7,13 7,13s7,-7.75 7,-13c0,-3.87 -3.13,-7 -7,-7zM12,11.5c-1.38,0 -2.5,-1.12 -2.5,-2.5s1.12,-2.5 2.5,-2.5 2.5,1.12 2.5,2.5 -1.12,2.5 -2.5,2.5z"/>

ic_location_on_black_24dp.xml

<vector android:height="24dp" android:tint="#FFFFFF"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="24dp"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <path android:fillColor="#FFF" android:pathData="M12,2C8.13,2  5,5.13 5,9c0,5.25 7,13 7,13s7,-7.75 7,-13c0,-3.87 -3.13,-7 -7,-7zM12,11.5c-1.38,0 -2.5,-1.12 -2.5,-2.5s1.12,-2.5 2.5,-2.5 2.5,1.12 2.5,2.5 -1.12,2.5 -2.5,2.5z"/>

</vector>

avd_anim.xml

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

    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <group android:name="group">
                <path
                    android:name="path"
                    android:pathData="M 12 2 C 8.13 2 5 5.13 5 9 C 5 14.25 12 22 12 22 C 12 22 19 14.25 19 9 C 19 5.13 15.87 2 12 2 Z M 12 11.5 C 10.62 11.5 9.5 10.38 9.5 9 C 9.5 7.62 10.62 6.5 12 6.5 C 13.38 6.5 14.5 7.62 14.5 9 C 14.5 10.38 13.38 11.5 12 11.5 Z"
                    android:fillColor="#FFFFFF"/>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="group">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="translateY"
                android:duration="500"
                android:valueFrom="-10"
                android:valueTo="0"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
</animated-vector>

在TabLayout中，我将其设置为：

<android.support.design.widget.TabItem
    android:id="@+id/tabItem3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:icon="@drawable/anim_dwbl_bus"
    android:text="@string/tab_text_3" />

请分享您的想法和建议。谢谢。

Answer 1

这里有一个很好的例子：Here

对于 BottomNavigationView 使用动画矢量可绘制吗？：

<com.google.android.material.bottomnavigation.BottomNavigationView
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:menu="@menu/bottom_nav_animated_menu"/>

bottom_nav_animated_menu.xml ：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:enabled="true"
      android:icon="@drawable/asld_clock_alarm"
      android:title="@string/cat_bottom_nav_alarm"/>
  <item
      android:enabled="true"
      android:icon="@drawable/asld_clock_clock"
      android:title="@string/cat_bottom_nav_clock"/>
  <item
      android:enabled="true"
      android:icon="@drawable/asld_clock_timer"
      android:title="@string/cat_bottom_nav_timer"/>
  <item
      android:enabled="true"
      android:icon="@drawable/asld_clock_stopwatch"
      android:title="@string/cat_bottom_nav_stopwatch"/>
</menu>

asld_clock_stopwatch .xml：

<animated-selector
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      tools:ignore="NewApi">
      <item
        android:id="@+id/state_on"
        android:drawable="@drawable/vd_clock_stopwatch"
        android:state_checked="true"/>
      <item
        android:id="@+id/state_off"
        android:drawable="@drawable/vd_clock_stopwatch"/>
      <transition
        android:drawable="@drawable/avd_clock_stopwatch"
        android:fromId="@id/state_off"
        android:toId="@id/state_on"/>

avd_clock_stopwatch.xml ：

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

      <target android:name="hand">
        <aapt:attr name="android:animation">
          <objectAnimator
            android:duration="1333"
            android:interpolator="@android:interpolator/fast_out_slow_in"
            android:propertyName="rotation"
            android:valueFrom="0"
            android:valueTo="360"
            tools:targetApi="lollipop"/>
        </aapt:attr>
      </target>

      <target android:name="button">
        <aapt:attr name="android:animation">

          <set android:ordering="sequentially">
            <objectAnimator
              android:duration="133"
              android:interpolator="@android:interpolator/fast_out_slow_in"
              android:propertyName="translateY"
              android:valueFrom="12"
              android:valueTo="13">
            </objectAnimator>
            <objectAnimator
              android:duration="133"
              android:interpolator="@android:interpolator/fast_out_slow_in"
              android:propertyName="translateY"
              android:valueFrom="13"
              android:valueTo="12"
              tools:ignore="NewApi">
            </objectAnimator>
          </set>

        </aapt:attr>
      </target>

    </animated-vector>

vd_clock_stopwatch.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="timer"
        android:translateX="12"
        android:translateY="12">
        <group
          android:name="timer_pivot"
          android:translateX="-12"
          android:translateY="-12">
          <group android:name="timer_body">
            <path
              android:name="timer_interior_path"
              android:fillAlpha="1"
              android:fillColor="@android:color/white"
              android:pathData="M 19.0269927979,7.40730285645 c 0,0 1.42401123047,-1.42399597168 1.42401123047,-1.42399597168 c -0.428009033203,-0.513000488281 -0.902008056641,-0.98600769043 -1.41500854492,-1.41400146484 c 0,0 -1.4229888916,1.42399597168 -1.4229888916,1.42399597168 c -1.54000854492,-1.23199462891 -3.49101257324,-1.97300720215 -5.61801147461,-1.97300720215 c -4.97399902344,0 -8.99499511719,4.0299987793 -8.99499511719,9.0 c 0,4.9700012207 4.02099609375,9 8.99499511719,9 c 4.97399902344,0 9.00500488281,-4.0299987793 9.00500488281,-9 c 0,-2.125 -0.740997314453,-4.07398986816 -1.97300720215,-5.61299133301 Z M 12,20.0202941895 c -3.86700439453,0 -7,-3.13398742676 -7,-7 c 0,-3.86599731445 3.13299560547,-7 7,-7 c 3.86700439453,0 7,3.13400268555 7,7 c 0,3.86601257324 -3.13299560547,7 -7,7 Z"/>
          </group>
        </group>
      </group>
      <group
        android:name="hand"
        android:translateX="11.96875"
        android:translateY="13.17188">
        <group
          android:name="hand_pivot"
          android:translateX="-12"
          android:translateY="-13.17188">
          <path
            android:name="hand_path"
            android:fillAlpha="1"
            android:fillColor="@android:color/white"
            android:pathData="M 11,14.0200042725 c 0,0 2,0 2,0 c 0,0 0,-6 0,-6 c 0,0 -2,0 -2,0 c 0,0 0,6 0,6 Z"/>
        </group>
      </group>
      <group
        android:name="button"
        android:translateX="12"
        android:translateY="12">
        <group
          android:name="button_pivot"
          android:translateX="-12"
          android:translateY="-12">
          <path
            android:name="button_path"
            android:fillAlpha="1"
            android:fillColor="@android:color/white"
            android:pathData="M 15,1.02000427246 c 0,0 -6,0 -6,0 c 0,0 0,2 0,2 c 0,0 6,0 6,0 c 0,0 0,-2 0,-2 Z"/>
        </group>
      </group>
    </vector>

如何使用可绘制的矢量动画为TabLayout中的图标设置动画？

1 个答案: