Эффект переворачивания (Card Flip)

В этом уроке мы покажем как создать анимацию с эффектом переворачивания (card flip – вращение карты) используя собственную анимацию фрагментов. Вот пример такой анимации:

Эффект переворачивания.Нажмите на экран, чтобы проиграть видео еще раз.

Если вы хотите перескочить вперед и посмотреть полный пример, скачайте демо-проект, запустите и выберите пример Card Flip. Смотрите следующие файлы:

  • src/CardFlipActivity.java
  • animator/card_flip_right_in.xml
  • animator/card_flip_right_out.xml
  • animator/card_flip_left_in.xml
  • animator/card_flip_left_out.xml
  • layout/fragment_card_back.xml
  • layout/fragment_card_front.xml

Создаем Аниматоры

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

card_flip_left_in.xml

card_flip_left_out.xml

card_flip_right_in.xml

card_flip_right_out.xml

Создаем контейнеры

На каждой стороне “карточки” есть отдельная разметка, которая может включать любое содержимое по вашему желанию, например два компонента текста, два изображения, или комбинация любых компонентов. Мы будем использовать две разметки во фрагментах, которые позже будем вращать. Ниже приведен пример разметки для одной стороны “карточки”, содержащей текст:

И другая сторона, содержащая ImageView:

Создаем фрагмент

Создадим классы фрагментов для передней и задней стороны “карточки”. Эти классы будут возвращать разметку, которую мы создали в предыдущем параграфе, в методе onCreateView(). Вы можете создать экземпляры этих фрагментов в основном явлении приложения, в котором будет показана “карточка”. Следующий пример показывает размещение классов фрагментов внутри родительского явления:

Создаем анимацию

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

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

Теперь в нужное время мы можем показать и заднюю сторону “карточки” с применением анимации. Создадим метод, который будет делать следующее:

  • Выбирать аниматоров, которых мы создали ранее.
  • Заменять текущий фрагмент следующим, используя нашу анимацию<./li>
  • Добавлять предыдущий фрагмент в стек, чтобы при нажатии кнопки “назад” он вернулся на экран.

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