Android SDK: создание простой анимации свойств

С Android вы можете включать различные типы анимации в свои приложения. В этом уроке мы создадим базовую анимацию свойств, используя классы Android Object Animator и Value Animator. Результат будет простым, но используемые методы будут применяться в более сложных анимационных эффектах. Мы создадим анимацию, в которой руль поворачивается и фоновая сцена перемещается соответственно.

С анимацией свойств у вас есть несколько дополнительных параметров, чем с анимацией просмотра, например, вы можете анимировать элементы пользовательского интерфейса, отличные от представлений, и анимировать больше свойств. Анимация свойств также может иметь более согласованные результаты в некоторых случаях, так как в отличие от анимации View, она изменяет сами объекты UI, а не просто выводит их особым образом. Недостатком этих преимуществ является то, что анимация свойств немного сложнее, но все же доступна для начинающих.

---

Шаг 1: Запустите проект Android

Запустите или откройте проект Android в Eclipse. Вам понадобится пустой Activity и макет для него. Вам также нужно будет выбрать минимальный SDK 11, чтобы использовать методы из этого учебного пособия, поэтому убедитесь, что в манифесте вашего проекта указан соответствующий уровень, как в следующем фрагменте:

В учебном и исходном коде приложение называется «PropertyAnimatedApp», действие — «PropertyAnimatedActivity», а макет — «activity_property_animated.xml». Вы можете выбрать свои собственные имена, если будете вносить изменения в приведенный ниже код, если это необходимо.

---

Шаг 2: Добавить изображения в проект

Мы создадим несколько рисованных файлов в XML для анимации, но также будем использовать пару изображений PNG. Мы будем использовать изображения облаков и рулевого колеса ниже в представлении изображений в макете приложения. Загрузите их из отображенных здесь копий или скопируйте их из исходной папки загрузки. Убедитесь, что вы копируете их в каждую папку drawables в своем приложении — вы можете внести изменения в любой из доступных для рисования файлов, если вы планируете ориентироваться на определенные размеры экрана.

---

Шаг 3: Создание Drawables

Теперь давайте определим XML Drawables для остальных элементов анимации. В папке (папках) Drawables вашего приложения создайте первый новый файл, выбрав папку и выбрав «Файл», «Новый», «Файл». Введите «sun.xml» в качестве имени файла. В новом файле введите следующий код, чтобы определить форму солнца:

Рисуемое изображение имеет овальную форму с радиальным градиентным заполнением и заданным размером. Когда вы закончите вводить код для каждого из файлов drawables, сохраните их и скопируйте в каждую папку drawables, которую использует ваше приложение.

Создайте еще один новый файл в ресурсах рисования вашего приложения, на этот раз назвав его «ground.xml». Введите следующую форму для рисования:

Земля будет представлена ​​зеленым прямоугольником.

Создайте другой файл drawables, назовите его «window.xml» и введите следующую форму:

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

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

---

Шаг 4: Дизайн макета

Теперь мы можем включить наши макеты в макет. Мы будем использовать представления изображений, с помощью которых нам необходимо предоставить строку описания содержимого, описывающую изображение в каждом случае. Чтобы подготовиться к этому, откройте файл вашего приложения «res / values ​​/ strings.xml» и добавьте следующие значения:

Нам нужна строка для каждого изображения / рисования, которые мы будем использовать.

Теперь откройте файл макета. Замените содержимое следующей относительной компоновкой:

Измените атрибут контекста, если ваш класс Activity имеет другое имя. Обратите внимание, что мы применяем цвет фона к макету — мы будем анимировать это позже, поэтому мы также включаем атрибут ID для ссылки на макет в Java.

Сначала внутри макета, добавьте Image View для отображения формы солнца, которую мы создали:

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

Затем добавьте еще два просмотра изображений для облаков:

Эти два идентичны, кроме атрибутов позиционирования и идентификатора.

Затем добавьте землю:

Земля выравнивается по низу родительского просмотра. Обратите внимание, что мы также добавили отступы внизу — для размещения рамки окна мы добавим следующее:

Форма окна использует обводку шириной 40dp, поэтому мы добавили 40dp отступа для формы основания.

Каждый добавленный просмотр изображений будет отображаться поверх предыдущих элементов с точки зрения z-индекса, поэтому мы добавляем руль последним:

Макет изначально будет выглядеть следующим образом:

---

Шаг 5: Определите анимацию поворота колеса

Давайте сейчас застрянем в анимации. В папке «res» приложения создайте новую подпапку, выбрав «res» и выбрав «Файл», «Новый», «Папка». Введите «аниматор» в качестве имени папки. Мы добавим два XML-файла в эту папку, определяя анимацию вращения колеса и движения солнца. Начните с создания нового файла в «animator» и назовите его «wheel_spin.xml».

Начните с добавления набора элементов:

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

Внутри набора включите аниматор для поворота колеса:

Это Object Animator, который сначала определяет продолжительность и свойство для анимации в течение этого периода. Атрибут valueTo указывает на 180 градусов, то есть на сколько колесо будет вращаться в течение продолжительности. Когда анимация завершается, мы устанавливаем ее в обратном направлении и затем непрерывно повторяем.

---

Шаг 6: примени анимацию вращения колеса

Теперь давайте обратимся к классу Activity. Сначала добавьте следующие операторы импорта вверху:

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

Теперь создайте Animator Set для загрузки анимации, которую мы определили:

Теперь установите элемент View в качестве цели для анимации:

Запустите анимацию:

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

---

Шаг 7: Определите анимацию движения Солнца

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

На этот раз Object Animator анимирует свойство x , перемещая объект влево, когда руль поворачивает нас вправо. Свойства длительности и повторения совпадают с анимацией поворота колеса, поскольку этот эффект должен совпадать с ней.

---

Шаг 8: примени анимацию движения солнца

Вернувшись в метод Activity класса onCreate , примените эту новую анимацию к представлению солнца, используя ту же технику, что и раньше:

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

---

Шаг 9: Реализация анимации затемнения неба

До сих пор мы реализовали несколько анимаций путем определения ресурсов анимации. Давайте теперь рассмотрим создание анимации в Java из класса Activity. Мы сделаем небо немного темнее, когда солнце исчезнет из поля зрения. Все еще внутри onCreate , создайте экземпляр Value Animator:

Мы создаем Value Animator, вызывая метод ofInt класса Object Animator, поскольку мы имеем дело с целочисленными значениями для цветов. Мы передаем идентификатор элемента макета, к которому применен цвет фона, также указав «backgroundColor» в качестве свойства, которое мы хотим анимировать. Наконец, мы указываем цвета для анимации от и до, которые являются более светлыми и темными оттенками синего.

Установите длительность и свойства повтора, чтобы соответствовать существующим анимациям:

Теперь установите оценщик, чтобы инструктировать аниматора, как оценивать передаваемые значения цвета:

Запустите анимацию:

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

---

Шаг 10. Реализация двух анимаций перемещения облаков

Давайте закончим эту анимацию, переместив два облака. Все еще в onCreate , создайте экземпляр Object Animator для первого облачного представления, указав свойство x и значение для его перемещения:

Установите длительность и повторите свойства, как раньше, затем запустите анимацию:

Сделайте то же самое для второго облака, передав немного другое значение, чтобы переместить его вдоль оси x :

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

Вывод

Это приложение завершено — запустите его и поэкспериментируйте с различными свойствами, чтобы увидеть эффект. В этом уроке мы создали простую анимацию свойств. В построенном нами приложении анимация начинается при запуске и работает непрерывно. В ваших собственных приложениях вы, конечно, можете запускать анимацию взаимодействия пользователя с такими элементами, как кнопки. Два других основных типа анимации на Android — это анимация движения и фрейм, оба из которых являются анимациями просмотра. Каждый тип подходит для различных потребностей, в зависимости от ресурсов изображения, с которыми вы работаете, и деталей анимации.