ActionBar 中菜单项的动画

Question

当您在

Gmail

应用程序 (

Honeycomb

) 中长按电子邮件项目时，会显示类似上下文的菜单，其中的项目在启动时会显示动画。这是怎么做出来的？谢谢。

Answer 1

您无法对 MenuItems 进行动画处理，因此技巧是使用 MenuItem.setActionView() 在其位置设置一个外观相同的 View，并像平常一样对该视图进行动画处理，然后在动画完成时使用 MenuItem.setActionView(null) 取消设置

public class MainFragment extends Fragment {

   private Menu mOptionsMenu;

   @Override
   public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
       mOptionsMenu = menu;
       inflater.inflate(R.menu.fragment_main, menu);
   }

   private void animateActionBarItem() {
       final MenuItem refreshItem = mOptionsMenu.findItem(R.id.action_refresh);
       refreshItem.setActionView(R.layout.actionbar_foo);
       refreshItem.getActionView()
            .animate()
            .setInterpolator(new AccelerateInterpolator())
            .setDuration(100L)
            .scaleX(2F)
            .scaleY(2F)
            .withEndAction(new Runnable() {

                @Override
                public void run() {
                    refreshItem.setActionView(null);
                }
            });
      }

}

R.layout.actionbar_foo 的 XML

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    style="?android:attr/actionButtonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_accept" />

Answer 2

看看我的答案。它与菜单项的父级的布局更改有关，但是如果您看看我的想法，您将了解如何为菜单项设置动画。

Answer 3

实现菜单项动画的一种方法是通过动画矢量绘图，如

1. 首先使用 Shape Shifter 创建一个动画矢量绘图

   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="1024dp"
           android:height="1024dp"
           android:viewportWidth="1024"
           android:viewportHeight="1024">
           <path
               android:name="path"
               android:pathData="M 289.1 296.7 L 382.1 296.7 C 390.584 296.7 398.729 300.074 404.727 306.073 C 410.726 312.071 414.1 320.216 414.1 328.7 C 414.1 337.184 410.726 345.329 404.727 351.327 C 398.729 357.326 390.584 360.7 382.1 360.7 L 233 360.7 C 224.516
   360.7 216.371 357.326 210.373 351.327 C 204.374 345.329 201 337.184 201 328.7 L 201 179.7 C 201 171.216 204.374 163.071 210.373 157.073
   C 216.371 151.074 224.516 147.7 233 147.7 C 241.484 147.7 249.629
   151.074 255.627 157.073 C 261.626 163.071 265 171.216 265 179.7 L 265 230.3 C 338.599 162.68 435.767 126.396 535.674 129.226 C 635.58
   132.056 730.538 173.783 800.191 245.461 C 869.844 317.139 908.833 413.253 908.8 513.2 C 908.8 614.987 868.329 712.71 796.364 784.694 C 724.4 856.677 626.687 897.173 524.9 897.2 C 423.096 897.2 325.357 856.715 253.371 784.729 C 181.385 712.743 140.9 615.004 140.9 513.2 L 204.9 513.2 C 204.9 598.037 238.637 679.486 298.626 739.474 C
   358.614 799.463 440.063 833.2 524.9 833.2 C 609.737 833.2 691.186 799.463 751.174 739.474 C 811.163 679.486 844.9 598.037 844.9 513.2 C 844.892 448.761 825.42 385.802 789.047 332.61 C 752.673 279.418
   701.067 238.434 641.02 215.05 C 580.973 191.667 515.241 186.958 452.473 201.542 C 389.706 216.127 332.785 249.336 289.2 296.8 Z"
               android:fillColor="#4b4b4b"/>
       </vector> </aapt:attr> <target android:name="path">
       <aapt:attr name="android:animation">
           <objectAnimator
               android:propertyName="fillAlpha"
               android:duration="1000"
               android:valueFrom="1"
               android:valueTo="0"
               android:valueType="floatType"
               android:interpolator="@android:anim/linear_interpolator"/>
       </aapt:attr> </target> </animated-vector> ```
   
   

2. 现在添加动画矢量绘图作为菜单项的图标

       <?xml version="1.0" encoding="utf-8"?> <menu
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:android="http://schemas.android.com/apk/res/android">
   
       <item
           android:id="@+id/refresh"
           android:icon="@drawable/refresh_fade_out"
           android:title="Refresh"
           app:showAsAction="always" />
   
       </menu>  ```
   
   
   

3. 现在通过将 MenuItem 的图标转换为 Java 中的 Animatable 来启动或停止 Animated Vector Drawable 的动画，如下所示

      MenuItem refresh=menu.findItem(R.id.refresh); 
      Animatable animatable= (Animatable) refresh.getIcon();
      if (animatable!=null)
         animatable.start();
   

Answer 4

看看这里。您可以通过调用动画来为任何视图添加动画效果。