Add per-item animations to the menu

chrome/android/java/src/org/chromium/chrome/browser/appmenu/AppMenuAdapter.java

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 package org.chromium.chrome.browser.appmenu;
 
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.AnimatorSet;
+import android.animation.ObjectAnimator;
 import android.graphics.drawable.Drawable;
 import android.view.LayoutInflater;
 import android.view.MenuItem;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.view.ViewGroup;
+import android.view.animation.DecelerateInterpolator;
 import android.widget.BaseAdapter;
 import android.widget.ImageButton;
+import android.widget.ImageView;
 import android.widget.ListView;
 import android.widget.TextView;
 
 import org.chromium.chrome.R;
 
 import java.util.List;
 
 /**
  * ListAdapter to customize the view of items in the list.
  */
@@ skipping 11 matching lines @@
     private static final int TITLE_BUTTON_MENU_ITEM = 1;
     /**
      * Menu item that has three buttons. Every one of these buttons is displayed as an icon.
      */
     private static final int THREE_BUTTON_MENU_ITEM = 2;
     /**
      * Menu item that has four buttons. Every one of these buttons is displayed as an icon.
      */
     private static final int FOUR_BUTTON_MENU_ITEM = 3;
 
+    /** MenuItem Animation Constants */
+    private static final int ENTER_ITEM_DURATION_MS = 500;
+    private static final int ENTER_ITEM_BASE_DELAY_MS = 100;
+    private static final int ENTER_ITEM_ADDL_DELAY_MS = 70;
+    private static final float ENTER_STANDARD_ITEM_OFFSET_Y_DP = -10.f;
+    private static final float ENTER_STANDARD_ITEM_OFFSET_X_DP = 10.f;
+
     private final AppMenu mAppMenu;
     private final LayoutInflater mInflater;
     private final List<MenuItem> mMenuItems;
     private final int mNumMenuItems;
+    private final float mDpToPx;
 
     public AppMenuAdapter(AppMenu appMenu, List<MenuItem> menuItems, LayoutInflater inflater) {
         mAppMenu = appMenu;
         mMenuItems = menuItems;
         mInflater = inflater;
         mNumMenuItems = menuItems.size();
+        mDpToPx = inflater.getContext().getResources().getDisplayMetrics().density;
     }
 
     @Override
     public int getCount() {
         return mNumMenuItems;
     }
 
     @Override
     public int getViewTypeCount() {
         return VIEW_TYPE_COUNT;
@@ skipping 30 matching lines @@
     public View getView(int position, View convertView, ViewGroup parent) {
         final MenuItem item = getItem(position);
         switch (getItemViewType(position)) {
             case STANDARD_MENU_ITEM: {
                 StandardMenuItemViewHolder holder = null;
                 if (convertView == null) {
                     holder = new StandardMenuItemViewHolder();
                     convertView = mInflater.inflate(R.layout.menu_item, parent, false);
                     holder.text = (TextView) convertView.findViewById(R.id.menu_item_text);
                     holder.image = (AppMenuItemIcon) convertView.findViewById(R.id.menu_item_icon);
                     convertView.setTag(holder);

[aurimas (slooooooooow), 2014/07/15 01:37:25]

Should we set a key for this tag? I am not sure how getTag() works below if you
set multiple tags.

[David Trainor- moved to gerrit, 2014/07/15 20:53:38]

We don't need one.  getTag()/setTag(Object) store to mTag internally. 
getTag(int)/setTag(int, Object) store to mKeyedTags internally.  I could change
this if you want though.

[aurimas (slooooooooow), 2014/07/16 17:03:42]

Acknowledged.

+                    convertView.setTag(R.id.menu_item_enter_anim_id,
+                            buildStandardItemEnterAnimator(convertView, position));
+                    convertView.setTag(R.id.menu_item_exit_anim_id,
+                            buildItemExitAnimator(convertView));
                 } else {
                     holder = (StandardMenuItemViewHolder) convertView.getTag();
                 }
 
                 convertView.setOnClickListener(new OnClickListener() {
                     @Override
                     public void onClick(View v) {
                         mAppMenu.onItemClick(item);
                     }
                 });
                 // Set up the icon.
                 Drawable icon = item.getIcon();
                 holder.image.setImageDrawable(icon);
                 holder.image.setVisibility(icon == null ? View.GONE : View.VISIBLE);
                 holder.image.setChecked(item.isChecked());
 
                 holder.text.setText(item.getTitle());
                 boolean isEnabled = item.isEnabled();
                 // Set the text color (using a color state list).
                 holder.text.setEnabled(isEnabled);
                 // This will ensure that the item is not highlighted when selected.
                 convertView.setEnabled(isEnabled);
                 break;
             }
             case THREE_BUTTON_MENU_ITEM: {
                 ThreeButtonMenuItemViewHolder holder = null;
                 if (convertView == null) {
                     holder = new ThreeButtonMenuItemViewHolder();
                     convertView = mInflater.inflate(R.layout.three_button_menu_item, parent, false);
-                    holder.buttonOne = (ImageButton) convertView.findViewById(R.id.button_one);
-                    holder.buttonTwo = (ImageButton) convertView.findViewById(R.id.button_two);
-                    holder.buttonThree = (ImageButton) convertView.findViewById(R.id.button_three);
+                    holder.buttons[0] = (ImageButton) convertView.findViewById(R.id.button_one);
+                    holder.buttons[1] = (ImageButton) convertView.findViewById(R.id.button_two);
+                    holder.buttons[2] = (ImageButton) convertView.findViewById(R.id.button_three);
                     convertView.setTag(holder);
+                    convertView.setTag(R.id.menu_item_enter_anim_id,
+                            buildIconItemEnterAnimator(holder.buttons, false));
+                    convertView.setTag(R.id.menu_item_exit_anim_id,
+                            buildItemExitAnimator(convertView));
                 } else {
                     holder = (ThreeButtonMenuItemViewHolder) convertView.getTag();
                 }
-                setupImageButton(holder.buttonOne, item.getSubMenu().getItem(0));
-                setupImageButton(holder.buttonTwo, item.getSubMenu().getItem(1));
-                setupImageButton(holder.buttonThree, item.getSubMenu().getItem(2));
+                setupImageButton(holder.buttons[0], item.getSubMenu().getItem(0));
+                setupImageButton(holder.buttons[1], item.getSubMenu().getItem(1));
+                setupImageButton(holder.buttons[2], item.getSubMenu().getItem(2));
                 convertView.setFocusable(false);
                 convertView.setEnabled(false);
                 break;
             }
             case FOUR_BUTTON_MENU_ITEM: {
                 FourButtonMenuItemViewHolder holder = null;
                 if (convertView == null) {
                     holder = new FourButtonMenuItemViewHolder();
                     convertView = mInflater.inflate(R.layout.four_button_menu_item, parent, false);
-                    holder.buttonOne = (ImageButton) convertView.findViewById(R.id.button_one);
-                    holder.buttonTwo = (ImageButton) convertView.findViewById(R.id.button_two);
-                    holder.buttonThree = (ImageButton) convertView.findViewById(R.id.button_three);
-                    holder.buttonFour = (ImageButton) convertView.findViewById(R.id.button_four);
+                    holder.buttons[0] = (ImageButton) convertView.findViewById(R.id.button_one);
+                    holder.buttons[1] = (ImageButton) convertView.findViewById(R.id.button_two);
+                    holder.buttons[2] = (ImageButton) convertView.findViewById(R.id.button_three);
+                    holder.buttons[3] = (ImageButton) convertView.findViewById(R.id.button_four);
                     convertView.setTag(holder);
+                    convertView.setTag(R.id.menu_item_enter_anim_id,
+                            buildIconItemEnterAnimator(holder.buttons, false));
+                    convertView.setTag(R.id.menu_item_exit_anim_id,
+                            buildItemExitAnimator(convertView));
                 } else {
                     holder = (FourButtonMenuItemViewHolder) convertView.getTag();
                 }
-                setupImageButton(holder.buttonOne, item.getSubMenu().getItem(0));
-                setupImageButton(holder.buttonTwo, item.getSubMenu().getItem(1));
-                setupImageButton(holder.buttonThree, item.getSubMenu().getItem(2));
-                setupImageButton(holder.buttonFour, item.getSubMenu().getItem(3));
+                setupImageButton(holder.buttons[0], item.getSubMenu().getItem(0));
+                setupImageButton(holder.buttons[1], item.getSubMenu().getItem(1));
+                setupImageButton(holder.buttons[2], item.getSubMenu().getItem(2));
+                setupImageButton(holder.buttons[3], item.getSubMenu().getItem(3));
                 convertView.setFocusable(false);
                 convertView.setEnabled(false);
                 break;
             }
             case TITLE_BUTTON_MENU_ITEM: {
                 TitleButtonMenuItemViewHolder holder = null;
                 if (convertView == null) {
                     holder = new TitleButtonMenuItemViewHolder();
                     convertView = mInflater.inflate(R.layout.title_button_menu_item, parent, false);
                     holder.title = (TextView) convertView.findViewById(R.id.title);
                     holder.button = (ImageButton) convertView.findViewById(R.id.button);
                     convertView.setTag(holder);
+                    convertView.setTag(R.id.menu_item_enter_anim_id,
+                            buildStandardItemEnterAnimator(convertView, position));
+                    convertView.setTag(R.id.menu_item_exit_anim_id,
+                            buildItemExitAnimator(convertView));
                 } else {
                     holder = (TitleButtonMenuItemViewHolder) convertView.getTag();
                 }
                 final MenuItem titleItem = item.getSubMenu().getItem(0);
                 holder.title.setText(titleItem.getTitle());
                 holder.title.setEnabled(titleItem.isEnabled());
                 holder.title.setFocusable(titleItem.isEnabled());
                 holder.title.setOnClickListener(new OnClickListener() {
                     @Override
                     public void onClick(View v) {
@@ skipping 26 matching lines @@
         button.setEnabled(item.isEnabled());
         button.setFocusable(item.isEnabled());
         button.setOnClickListener(new OnClickListener() {
             @Override
             public void onClick(View v) {
                 mAppMenu.onItemClick(item);
             }
         });
     }
 
+    private Animator buildStandardItemEnterAnimator(final View view, int position) {

[aurimas (slooooooooow), 2014/07/15 01:37:26]

Please add some comments to these animator constructors that explain what kind
of animation will be produced.

[David Trainor- moved to gerrit, 2014/07/15 20:53:38]

Will do.

+        final float offsetYPx = ENTER_STANDARD_ITEM_OFFSET_Y_DP * mDpToPx;
+        final int startDelay = ENTER_ITEM_BASE_DELAY_MS + ENTER_ITEM_ADDL_DELAY_MS * position;
+
+        AnimatorSet animation = new AnimatorSet();
+        animation.playTogether(
+                ObjectAnimator.ofFloat(view, View.ALPHA, 0.f, 1.f),
+                ObjectAnimator.ofFloat(view, View.TRANSLATION_Y, offsetYPx, 0.f));
+        animation.setDuration(ENTER_ITEM_DURATION_MS);
+        animation.setStartDelay(startDelay);
+        // TODO(dtrainor): Update to material interpolators.
+        animation.setInterpolator(new DecelerateInterpolator());
+
+        animation.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationStart(Animator animation) {
+                view.setAlpha(0.f);
+            }
+        });
+        return animation;
+    }
+
+    private Animator buildIconItemEnterAnimator(final ImageView[] views, boolean skipLastItem) {
+        final float offsetXPx = ENTER_STANDARD_ITEM_OFFSET_X_DP * mDpToPx;
+        final int maxViewsToAnimate = views.length - (skipLastItem ? 1 : 0);
+
+        AnimatorSet animation = new AnimatorSet();
+        AnimatorSet.Builder builder = null;
+        for (int i = 0; i < maxViewsToAnimate; i++) {
+            final int startDelay = ENTER_ITEM_ADDL_DELAY_MS * i;
+
+            Animator alpha = ObjectAnimator.ofFloat(views[i], View.ALPHA, 0.f, 1.f);
+            Animator translate = ObjectAnimator.ofFloat(views[i], View.TRANSLATION_X, offsetXPx, 0);
+            alpha.setStartDelay(startDelay);
+            translate.setStartDelay(startDelay);
+            alpha.setDuration(ENTER_ITEM_DURATION_MS);
+            translate.setDuration(ENTER_ITEM_DURATION_MS);
+
+            if (builder == null) {
+                builder = animation.play(alpha);
+            } else {
+                builder.with(alpha);
+            }
+            builder.with(translate);
+        }
+        animation.setStartDelay(ENTER_ITEM_BASE_DELAY_MS);
+        // TODO(dtrainor): Update to material interpolators.
+        animation.setInterpolator(new DecelerateInterpolator());
+
+        animation.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationStart(Animator animation) {
+                for (int i = 0; i < maxViewsToAnimate; i++) {
+                    views[i].setAlpha(0.f);
+                }
+            }
+        });
+        return animation;
+    }
+
+    private Animator buildItemExitAnimator(View view) {
+        return ObjectAnimator.ofFloat(view, View.ALPHA, 1.f, 0.f).setDuration(0);

[aurimas (slooooooooow), 2014/07/15 01:37:26]

What does it mean to have an animation of length 0?

[David Trainor- moved to gerrit, 2014/07/15 20:53:38]

It means right now they just hide immediately.  But that might be tweaked.  Also
it was simpler to have hide/show use the same general codepath to tweak the
views when showing/hiding.

[aurimas (slooooooooow), 2014/07/16 17:03:42]

Acknowledged.

+    }
+
     static class StandardMenuItemViewHolder {
         public TextView text;
         public AppMenuItemIcon image;
     }
 
     static class ThreeButtonMenuItemViewHolder {
-        public ImageButton buttonOne;
-        public ImageButton buttonTwo;
-        public ImageButton buttonThree;
+        public ImageButton[] buttons = new ImageButton[3];
     }
 
     static class FourButtonMenuItemViewHolder {
-        public ImageButton buttonOne;
-        public ImageButton buttonTwo;
-        public ImageButton buttonThree;
-        public ImageButton buttonFour;
+        public ImageButton[] buttons = new ImageButton[4];
     }
 
     static class TitleButtonMenuItemViewHolder {
         public TextView title;
         public ImageButton button;
     }
 }