Урок 6. Установка пользовательских анимаций в Material Design

Содержание этого урока

  1. Настройка реакции на касание
  2. Применение эффекта появления
  3. Настройка переходов
  4. Анимация изменений состояния представления
  5. Анимация векторных элементов

См. также

Благодаря анимациям в Material Design пользователи получают отклик на выполняемые действия. Кроме того, анимации обеспечивают зрительную связь при взаимодействии с приложением. Тема Material Design содержит ряд анимаций по умолчанию для кнопок и переходов, а в Android 5.0 (уровень API 21) и более поздних версиях можно настраивать эти анимации и создавать новые:

  • реакция на касание;
  • круговое появление;
  • переходы;
  • перемещение по кривой;
  • изменение состояний представления.

Настройка реакции на касание


Реакция на касание в Material Design обеспечивает моментальное визуальное подтверждение взаимодействия пользователя с элементами интерфейса в точке касания. В стандартной анимации для реакции на нажатие кнопок используется новый класс RippleDrawable, обеспечивающий переход между разными состояниями с созданием эффекта ряби.

В большинстве случаев эту возможность следует применять в XML-файле представления, указав фон представления следующим образом:

  • ?android:attr/selectableItemBackground для ограниченной области ряби;
  • ?android:attr/selectableItemBackgroundBorderless для ряби, распространяемой за границы представления. При отрисовке она будет ограничиваться ближайшим родительским элементом представления со значением фона, отличным от null.

Примечание. selectableItemBackgroundBorderless — это новый атрибут, представленный в уровне API 21.

Также можно определить RippleDrawable в качестве XML-ресурса с помощью элемента ripple.

Можно назначить цвет для объектов RippleDrawable. Чтобы изменить стандартный цвет отклика на касание, воспользуйтесь атрибутом темы android:colorControlHighlight .

Дополнительные сведения представлены в справке по API для класса RippleDrawable.

Применение эффекта появления


Анимация эффекта появления обеспечивает зрительную связь с действиями пользователя, когда отображается или скрывается группа элементов интерфейса. С помощью методаViewAnimationUtils.createCircularReveal() можно анимировать ограничивающий круг, чтобы отобразить или скрыть с экрана представление.

Как отобразить ранее скрытое представление с помощью этого эффекта:

 

Как скрыть ранее отображавшееся представление с помощью этого эффекта:

 

Настройка переходов


Переходы в приложениях Material Design обеспечивают зрительные связи между различными состояниями путем движения элементов и преобразований между общими элементами. Можно выбрать настраиваемые анимации для начальных и конечных переходов, а также для переходов общих элементов между операциями.

  • Начальный переход определяет порядок появления на экране представлений в операции. Например, в начальном переходе explode представления появляются на экране извне и перемещаются к центру экрана.
  • Конечный переход определяет порядок исчезновения с экрана представлений в операции. Например, в конечном переходе explodeпредставления исчезают с экрана в направлении из центра к краям.
  • Переход общих элементов определяет порядок перехода между операциями представлений, используемых в обеих операциях. Например, если в двух операциях используется одно и то же изображение, но в разных позициях и с разными размерами, в случае применения перехода общего элемента changeImageTransform выполняется плавное перемещение и масштабирование изображения между этими операциями.

В Android 5.0 (уровень API 21) поддерживаются следующие начальные и конечные переходы:

  • explode — перемещение представлений в центр экрана или из центра;
  • slide — перемещение представлений к одному из краев экрана или от него;
  • fade — отображение или скрытие представления на экране путем изменения его прозрачности.

Любой переход, являющийся наследованием класса Visibility, поддерживается как начальный или конечный переход. Дополнительные сведения представлены в справке по API для класса Transition.

В Android 5.0 (уровень API 21) также поддерживаются следующие переходы общих элементов:

  • changeBounds — анимация изменений границ макетов целевых представлений;
  • changeClipBounds — анимация изменений границ обрезки целевых представлений;
  • changeTransform — анимация изменений параметров масштабирования и поворота целевых представлений;
  • changeImageTransform — анимация изменений размеров и параметров масштабирования целевых изображений.

Если активировать переходы в приложении, то между начальной и конечной операциями активируется стандартный переход методом плавной замены.

  Рисунок 2. Переход с одним общим элементом.

Определение настраиваемых переходов

Сначала необходимо активировать переходы содержимого окна с помощью атрибутаandroid:windowContentTransitions при определении стиля, наследуемого из темы Material Design. В определении стиля можно указать начальный и конечный переходы, а также переходы общих элементов:

 

Переход change_image_transform в этом примере задается следующим образом:

 

Элемент changeImageTransform соответствует классу ChangeImageTransform. Дополнительные сведения представлены в справке по API для Transition.

Чтобы активировать в своем коде переходы содержимого окна, вызовите методWindow.requestFeature():

 

Чтобы задать переходы в своем коде, вызовите следующие методы с использованием объектаTransition:

Методы setExitTransition() и setSharedElementExitTransition() задают конечный переход для вызывающей операции. Методы setEnterTransition() и setSharedElementEnterTransition() задают начальный переход для вызываемой операции.

Чтобы в полной мере реализовать возможности перехода, необходимо активировать переходы содержимого окна как в вызывающей, так и в вызываемой операции. В противном случае вызывающая операция запустит конечный переход, однако будет выполнен переход окна (например, масштабирование или затемнение).

Чтобы запустить начальный переход как можно раньше, используйте в вызываемой операции методWindow.setAllowEnterTransitionOverlap() . Это позволит сделать начальные переходы более эффектными.

Запуск операции с помощью переходов

Если в приложении разрешены переходы и для операции задан конечный переход, переход активируется при запуске другой операции следующим образом:

 

Если для второй операции задан начальный переход, он также активируется при запуске операции. Чтобы отключить переходы при запуске другой операции, укажите значение null для набора параметров.

Запуск операции с помощью общего элемента

Порядок анимации перехода на экране между двумя операциями с общим элементом

  1. Активируйте в своей теме переходы содержимого окна.
  2. В определении стиля укажите переходы общих элементов.
  3. Определите свой переход как XML-ресурс.
  4. Присвойте одинаковое имя общим элементам в обоих макетах, используя для этого атрибутandroid:transitionName.
  5. Воспользуйтесь методом ActivityOptions.makeSceneTransitionAnimation().

 

Для общих динамических представлений, создаваемых в коде, используйте методView.setTransitionName() для определения одинакового имени элемента в обеих операциях.

Чтобы выполнить анимацию обратного перехода по завершении второй операции, вызовите методActivity.finishAfterTransition() вместоActivity.finish().

Запуск операции с несколькими общими элементами

Чтобы создать анимацию перехода на экране между двумя операциями с несколькими общими элементами, определите общие элементы в обоих макетах с помощью атрибутаandroid:transitionName (или воспользуйтесь методом View.setTransitionName() в обеих операциях), а затем создайте объект ActivityOptions, как указано ниже.

 

Использование перемещения по кривой


При анимации в Material Design используются кривые для интерполяции по времени и создания схем перемещения в пространстве. В Android 5.0 (уровень API 21) и более поздних версиях имеется возможность определить для анимаций настраиваемые кривые синхронизации и схемы перемещения по кривой.

Класс PathInterpolator — это новый интерполятор на основе кривой Безье или объекта Path. Данный интерполятор определяет перемещение по кривой в квадрате 1 x 1 с привязкой в точках (0,0) и (1,1), а также с контрольными точками, задаваемыми с помощью аргументов конструктора. Также можно определить интерполятор траектории в качестве XML-ресурса:

 

В системе имеются XML-ресурсы для трех основных кривых в спецификации Material Design:

  • @interpolator/fast_out_linear_in.xml;
  • @interpolator/fast_out_slow_in.xml;
  • @interpolator/linear_out_slow_in.xml.

Можно передать объект PathInterpolator в метод Animator.setInterpolator().

Класс ObjectAnimator имеет новые конструкторы, с помощью которых можно анимировать координаты вдоль траектории перемещения, используя для этого не менее двух свойств. Например, следующий аниматор использует объект Path для анимации свойств представления по осям X и Y:

 

Анимация изменений состояния представления


С помощью класса StateListAnimator можно определить аниматоры, которые запускаются при изменении состояния представления. В следующем примере показан порядок определенияStateListAnimator в качестве XML-ресурса:

 

Чтобы присоединить к представлению настраиваемые анимации состояния представления, определите аниматор, используя элемент selector в файле XML-ресурса (как в этом примере), а затем назначьте его своему представлению с помощью атрибута android:stateListAnimator. Чтобы в своем коде назначить представлению аниматор списка состояний, используйте методAnimationInflater.loadStateListAnimator(), а затем назначьте аниматор своему представлению с помощью метода View.setStateListAnimator().

Если ваша тема является расширением темы Material Design, по умолчанию у кнопок имеется возможность анимации по оси Z. Чтобы отключить такое поведение кнопок, задайте для атрибутаandroid:stateListAnimator значение @null.

С помощью класса AnimatedStateListDrawable можно создавать элементы, которые служат для отображения анимации между изменениями состояния связанного представления. В Android 5.0 в некоторых системных виджетах такая анимация используется по умолчанию. В следующем примере показан порядок определения AnimatedStateListDrawable в качестве XML-ресурса:

 

Анимация векторных элементов


Векторные элементы можно масштабировать без ущерба четкости. Класс AnimatedVectorDrawableпозволяет анимировать свойства векторного элемента.

Анимированные векторные элементы обычно определяются в трех XML-файлах:

  • векторный элемент с элементом <vector> в res/drawable/;
  • анимированный векторный элемент с элементом <animated-vector> в res/drawable/;
  • один или несколько аниматоров для объектов с элементом <objectAnimator> в res/anim/.

С помощью анимированных векторных элементов можно анимировать атрибуты элементов <group> и<path>. Элемент<group> определяет набор траекторий или подгрупп, а элемент <path> — траектории для прорисовки.

При определении векторного элемента, который требуется анимировать, используйте атрибутandroid:name для назначения уникальных имен группам или траекториям, чтобы на них можно было сослаться в определениях аниматора. Например:

 

Определение анимированного векторного элемента ссылается на группы и траектории в векторном элементе, используя их имена:

 

Определения анимации представляются объектами ObjectAnimator или AnimatorSet. Первый аниматор в этом примере поворачивает целевую группу на 360 градусов:

 

Второй аниматор в этом примере преобразует траекторию векторного элемента из одной формы в другую. Для преобразования обе траектории должны быть совместимы: они должны содержать одинаковое количество команд, а также одинаковое количество параметров для каждой команды.

 

Дополнительные сведения представлены в справке по API для AnimatedVectorDrawable.

Комментарии: 2
Добавить комментарий