Android: Динамическое добавление компонентов через анимацию

Всем доброго времени суток. Этот пост хочу посвятить теме фрагментов для Android. На Хабре есть уже переводы и некоторые статьи, которые упоминают о том, как начать работать с фрагментами под Android. Например, статья . В ней находится описание того, что такое фрагменты и в какой версии Android они доступны, поэтому те, кто ещё не добрался до неё могут при желании ознакомиться, я же не буду пересказывать этого в своём посте. Поэтому сразу перейду к делу.

Типичный сценарий

Простая игра строится по определенной схеме. Для взаимодействия с пользователем предусмотрены следующие элементы:

  • Основной дисплей. На нем разворачиваются события. По завершении процесса рекомендуется реализовать переход к таблице рекордов, если результат оказался достойным этой «доски почета».
  • Меню. С помощью этого инструмента выбирают действия и делают настройки. Он обеспечивает переход к другим элементам. Меню обычно появляется сразу после заставки. Пользователю предлагается выбор дальнейших действий: приступить к игровому процессу, ознакомиться с инструкцией и правилами, просмотреть текущие рекорды и т. д.
  • Заставка. Представляет собой краткий анонс или рекламу с изображением логотипа. Демонстрируется в начале или во время пауз. Приветствуется использование хотя бы простой анимации.
  • Справка. В этом разделе меню описывают правила. Если текст не помещается в окне целиком, необходимо обеспечить возможность прокрутки.
  • Счет. Здесь отображаются текущие рекорды участников. В данном разделе можно просмотреть список в любой момент, не дожидаясь, когда сам там окажется. Также здесь бывает доступна информация о текущем игровом счете, но последний обычно можно наблюдать на основном дисплее.
  • Настройки. Пользователь должен иметь возможность поменять игровые параметры, свой аватар и логин или зарегистрироваться в качестве нового участника.
Читайте также:  Не работает камера в Zoom? Как исправить на ПК и смартфонах

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

В MenuActivity будут содержаться кнопки и другие элементы, запускающие остальные подпрограммы. SplashActivity потребуется для вывода заставки. Через несколько секунд автоматически запустится MenuActivity. Остальные активности: GameActivity (основной), SettingsActivity (настройки), ScoresActivity (счет) и HelpActivity (справка с возможностью прокрутки).

Рекомендуется также задать базовый class BaseActivity, включающий общедоступные компоненты. Для каждой Activity требуется отдельный разметочный файл с набором нужных элементов. Первоначальной задачей разработчика является освоение работы с активностями. Для получения доступа к ресурсам и настройкам, используемым Activity, нужно сделать контекст приложения. Здесь прибегают к помощи метода getApplicationContext().

Добавление зависимостей

Чтобы иметь возможность использовать Dynamic Animation в вашем проекте, вы должны добавить его как зависимость implementation в файле вашего модуля app:

Implementation «:support-dynamic-animation:»

В этом уроке мы собираемся анимировать виджет ImageView . Разумеется, он должен отображать некоторые изображения, поэтому откройте Vector Assets Studio и добавьте в свой проект следующие Material значки:

  • нейтральное настроение
  • настроение очень удовлетворено

Вот как они выглядят:

Для получения наилучших результатов я предлагаю установить размер значков 56 x 56 dp .

Имитация пружины — Springs

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

Чтобы всё было просто, давайте теперь повторно используем ImageView нашего макета и применим к нему анимацию с эффектом пружинки. Однако, чтобы позволить пользователю запустить анимацию, вам нужно добавить в макет ещё один виджет Button .

Читайте также:  Лучшие планшеты 2020 года: так какой планшет лучше купить?

Чтобы создать анимацию на основе спружинивания, вы должны использовать класс SpringAnimation . Его конструктор тоже ожидает объект View и анимационное свойство. Следующий код создает экземпляр SpringAnimation , настроенный для анимации координаты Х для ImageView:

// Get a reference to the view final ImageView emoji = (ImageView)findViewById(); // Pass it to the constructor SpringAnimation springAnimation = new SpringAnimation(emoji, DynamicAnimation.X);

Чтобы управлять поведением анимации на основе пружинки, вам понадобится spring. Вы можете создать его с помощью класса SpringForce , который позволяет вам указать положение покоя качания, коэффициент затухания и жёсткость. Вы можете думать о коэффициенте затухания как о константе, которая, как и трение, несёт ответственность за замедление анимации до её остановки. С другой стороны, жёсткость определяет, сколько силы требуется для растягивания пружины.

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

SpringForce springForce = new SpringForce(); (()); (_RATIO_HIGH_BOUNCY); (_LOW);

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

Теперь вы можете связать пружину с экземпляром SpringAnimation , используя метод setSpring() .

(springForce);

Наконец, перед началом анимации вы должны убедиться, что вы придаёте ему большую начальную скорость, используя метод setStartVelocity() .

Читайте также:  11 лучших приложений для камеры на Android

(2000f); ();

Если вы запустите приложение сейчас, вы увидите что-то вроде этого:

Элемент

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

  • fromxScale — начальный масштаб по X. Допустимы значения от 0 до 1 типа Float
  • toxScale — конечный масштаб по X. Допустимы значения от 0 до 1 типа Float
  • fromYScale — начальный масштаб по Y. Допустимы значения от 0 до 1 типа Float
  • toYScale — конечный масштаб по Y. Допустимы значения от 0 до 1 типа Float
  • pivotX — Х-координата закрепленного центра. Описывает центральную точку масштабирования в процентах от ширины от 0% до 100%
  • pivotY — Y-координата закрепленного центра. Описывает центральную точку масштабирования в процентах от высоты от 0% до 100%