Как мы разработали анимацию гильотинного меню для Android

Вы, наверное, читали нашу  историю  о том, как наш дизайнер Виталий Рубцов и разработчик iOS Максим Лазебный создали нетрадиционную анимацию верхней панели, получившую зловещее название — Guillotine Menu  (анимацию iOS можно увидеть на  Dribbble  и  GitHub ). Вскоре после этого наш Android-разработчик Дмитрий Денисенко взял на себя задачу реализовать ту же анимацию, но на платформе Android (посмотрите на  GitHub ). Он даже не мог предсказать, с какими трудностями ему придется столкнуться и насколько глубоко ему придется погрузиться в поисках решения.

Когда начать?

Сначала я хотел прибегнуть к стандартным решениям для реализации компонента для Android. Ведь это казалось возможным с первого взгляда. У меня был план использовать  ObjectAnimation  для реализации поворота вида навигации. Я также хотел добавить BounceInterpolator  по умолчанию  для достижения эффекта отскока, когда меню сталкивается с левой границей экрана. Тем не менее,  BounceInterpolator,  казалось, сделал отскок слишком мощным, как если бы это был отскок футбольного мяча, а не металлической гильотины.

По умолчанию  BounceInterpolator  не предоставляет никаких параметров для настройки, поэтому у меня не было другого выбора, кроме как написать свой собственный интерполятор. Предполагалось, что он не только добавит отскок, но и создаст эффект ускорения свободного падения, чтобы анимация выглядела более естественной.

Компонент Гильотина в нашей анимации состоит из вращения Гильотины, отскока Гильотины и отскока панели действий. Более того, я использовал два пользовательских интерполятора для реализации эффектов ускорения свободного падения и отскока. Теперь пришло время провести вас через процесс разработки.

Как мы реализовали ротацию гильотинного меню

Мне нужно было сделать две вещи, чтобы вращать анимацию: найти центр вращения и реализовать  ObjectAnimation,  чтобы сделать фактическое вращение.

Прежде чем я смог вычислить центр вращения, я должен был поместить макет на экран.

private void setUpOpeningView(final View openingView) {

   if (mActionBarView != null) {

       mActionBarView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

           @Override

           public void onGlobalLayout() {

               if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {

                   mActionBarView.getViewTreeObserver().removeOnGlobalLayoutListener(this);

               } else {

                   mActionBarView.getViewTreeObserver().removeGlobalOnLayoutListener(this);

               }

               mActionBarView.setPivotX(calculatePivotX(openingView));

               mActionBarView.setPivotY(calculatePivotY(openingView));

           }

       });

   }

}



private float calculatePivotY(View burger) {

   return burger.getTop() + burger.getHeight() / 2

}



private float calculatePivotY(View burger) {

   return burger.getTop() + burger.getHeight() / 2;

}

ObjectAnimator rotationAnimator = ObjectAnimator.ofFloat(mGuillotineView, "rotation", GUILLOTINE_OPENED_ANGLE, GUILLOTINE_CLOSED_ANGLE);

/* setting duration, listeners, interpolator, etc. */

rotationAnimator.start();

public class GuillotineInterpolator implements TimeInterpolator {

   public static final float ROTATION_TIME = 0.46667f;
   public static final float FIRST_BOUNCE_TIME = 0.26666f;
   public static final float SECOND_BOUNCE_TIME = 0.26667f;


   public GuillotineInterpolator() {
   }

   public float getInterpolation(float t) {
       if (t < ROTATION_TIME) return rotation(t);
       else if (t < ROTATION_TIME + FIRST_BOUNCE_TIME) return firstBounce(t);
       else return secondBounce(t);
   }

   private float rotation(float t) {
       return 4.592f * t * t;
   }

   private float firstBounce(float t) {
       return 2.5f * t * t - 3f * t + 1.85556f;
   }

   private float secondBounce(float t) {
       return 0.625f * t * t - 1.08f * t + 1.458f;
   }

public class ActionBarInterpolator implements TimeInterpolator {

   private static final float FIRST_BOUNCE_PART = 0.375f;
   private static final float SECOND_BOUNCE_PART = 0.625f;

   @Override
   public float getInterpolation(float t) {
       if (t < FIRST_BOUNCE_PART) {
           return (-28.4444f) * t * t + 10.66667f * t;
       } else if (t < SECOND_BOUNCE_PART) {
           return (21.33312f) * t * t - 21.33312f * t + 4.999950f;
       } else {
           return (-9.481481f) * t * t + 15.40741f * t - 5.925926f;
       }
   }
}

ObjectAnimator rotationAnimator = initAnimator(ObjectAnimator.ofFloat(mGuillotineView, ROTATION, GUILLOTINE_CLOSED_ANGLE, GUILLOTINE_OPENED_ANGLE));

rotationAnimator.setInterpolator(mInterpolator);

rotationAnimator.setDuration(mDuration);

rotationAnimator.addListener(new Animator.AnimatorListener() {...});