Определение настраиваемой анимации

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

  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.

Урок 6. Установка пользовательских анимаций в Material Design обновлено: Февраль 1, 2016 автором: admin

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*
Website