当前位置：文江博客话题详情

ActionBar 中菜单项的动画

发布于 2024-12-04 12:09:37 字数 110 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

-柠檬树下少年和吉他 2024-12-11 12:09:37

您无法对 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);
                }
            });
      }

}

XML for R 取消设置它.layout.actionbar_foo

<?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" />

You cannot animate MenuItems, so the trick is to set a same looking View in its place with MenuItem.setActionView() and animate that view as you would normally and then unset it when animation is done with 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);
                }
            });
      }

}

XML for R.layout.actionbar_foo

<?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" />

回复收藏 0 原文

隔纱相望 2024-12-11 12:09:37

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

首先使用 Shape Shifter 创建动画矢量绘图

xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"> 
    <向量
        安卓：名称=“矢量”
        机器人：宽度=“1024dp”
        安卓：高度=“1024dp”
        安卓：viewportWidth =“1024”
        android:viewportHeight="1024">
        <路径
            安卓：名称=“路径”
            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℃ 414.1 337.184 410.726 345.329 404.727 351.327℃ 398.729 357.326 390.584 360.7 382.1 360.7 L 233 360.7℃ 224.516
360.7 216.371 357.326 210.373 351.327 ℃ 204.374 345.329 201 337.184 201 328.7 L 201 179.7 ℃ 201 171.216 204.374 163.071 210.373 157.073
216.371 151.074 224.516 147.7 233 147.7 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℃ 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℃ 724.4 856.677 626.687 897.173 524.9 897.2℃ 423.096 897.2 325.357 856.715 253.371 784.729℃ 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 ℃ 844.892 448.761 825.42 385.802 789.047 332.61 ℃ 752.673 279.418
701.067 238.434 641.02 215.05℃ 580.973 191.667 515.241 186.958 452.473 201.542℃ 389.706 216.127 332.785 249.336 289.2 296.8 Z"
            android:fillColor="#4b4b4b"/>
      <目标 android:name="路径">
    
        <对象动画师
            android:propertyName="fillAlpha"
            机器人：持续时间=“1000”
            安卓：值来自=“1”
            安卓：valueTo =“0”
            android:valueType="floatType"
            android:interpolator="@android:anim/linear_interpolator"/>
       ````

现在添加动画矢量可绘制对象作为 MenuItem 的图标

  <菜单
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <项目
        android:id="@+id/刷新"
        android:icon="@drawable/refresh_fade_out"
        android:title="刷新"
        应用程序：showAsAction =“总是”/>

     ````

现在，通过将 MenuItem 的图标转换为 Animatable，如

 MenuItem刷新=menu.findItem(R.id.refresh); 
   可动画化 animatable= (可动画化)refresh.getIcon();
   if (可动画！=null)
      可动画化.start();

One way to achieve animation fr the MenuItems is via Animated Vector Drawables,as

First create an Animated Vector Drawable using 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> ```

Now add the Animated Vector Drawable as icon for the MenuItem

    <?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>  ```

Now start or stop the animation of the Animated Vector Drawable by casting the icon of the MenuItem to Animatable in Java, as

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

回复收藏 0 原文