2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Анимации в Android по полочкам (Часть 1. Базовые анимации)

Анимация в Android

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

Android имеет много инструментов, которые помогают разработчикам создавать анимацию относительно легко и просто. Включить описание этих возможностей в одну статью не представляется возможным в виду большого объёма информации. Поэтому вопросы анимации будут рассмотрены на нескольких страницах. Описание кадровой анимации (cell animation) с примерами представлено здесь.

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

  • изменение прозрачности;
  • изменение размера;
  • перемещение компонента;
  • вращение компонента.

Описание и реализация анимации View-компонентов

При описании анимации View-компонентов необходимо в файле формата XML описать начальное и конечное состояния объекта и разместить xml-файл в директории res/anim. После этого можно из этого xml-файла создать объект анимации Animation. Для этого используется статический метод loadAnimation(Context context, int id) класса AnimationUtils, в котором context связан с текущим контекстом, а id определяет идентификатор анимационного ресурса. Метод возвращает экземпляр класса Animation — абстрактный класс для представления анимации в приложении. Созданный экземпляр класса Animation передается методу startAnimation(Animation) класса View (и всех его наследников). Система (Android) сама выполнит перевод объекта из одного состояния в другое.

При переводе View-компонентов из одного состояния в другое используется интерполяция – в вычислительной математике это способ нахождения промежуточных значений величины по имеющемуся дискретному набору значений. Для каждой анимации можно использовать свой интерполятор. Интерполятором можно определять плавность изменения параметра объекта на различных этапах анимации (начальном, промежуточном, конечном). Вопрос использования интерполяторов в анимации View компонентов рассмотрен отдельно.

Примечание : в этой статье неоднократно было подчеркнуто, что между понятиями анимации и трансформации View-компонентов ставится знак равенства. Сделано это не случайно. Вы должны понять, что анимация View-компонентов выполняется трансформацией их параметров.

Читать еще:  Создание электронных книг в Web-формате при помощи Natata

Экспериментировать с анимацией будем на основе модуля P04Animation. Подробно описание процесса создания модулей представлено здесь. В проекте/модуле нам необходимо создать описания анимаций и определить интерфейс. В интерфейсе примера разместим кнопки при нажатии на которые будет выполняться определенный тип анимации View компонента.

Чтобы в структуре модуля создать узловую запись/директорию res/anim необходимо выделить запись res и в контекстном меню выбрать пункт New/Directory. Для создания файлов описания анимаций необходимо выделить запись res/anim и в контекстном меню выбрать пункт New/File. Начнем с описания анимации прозрачностью.

Изменение прозрачности компонента

Для создания анимации изменением прозрачности создадим файл res/anim/alpha.xml. Корневым элементом описания анимации прозрачностью является тег alpha.

В файле определяются следующие параметры компонента :

Как создать анимацию в Android приложениии?

Продолжая серию уроков по Android, я решил показать вам как можно добавить анимацию для простой картинки.

В данном уроке мы научимся создавать несколько анимация на картинку. Для того чтобы выполнить этот урок вам потребуется создать Android проект c:

Minimum required SDK = 3.0

Target SDK = 4.2

Шаг 1. Создаем внешний вид

Создаем layout main_layout.xml (srcmainreslayoutmain_layout.xml) cо следующим содержимым:

И в string.xml добавим следующие строки:

И теперь в srcmainresdrawable добавляем картинку android_img.png:

В итоге наше приложение будет выглядеть так:

Шаг 2. Создаем Activity

Теперь давайте добавим Activity для нашего layout, для этого в srcmainjavacomdevcolibrianimationimage создаем новое Activity MainActivity.java со следующим содержимым:

После этого ваш layout можно будет увидеть после запуска приложения, но незабывайте настроить activity в AndroidManifest.xml.

Теперь все будет работать

Шаг 3. Создаем анимации

В Android анимации представлены в виде анимационных ресурс файлов, а точней в виде XML файлов, в которох описанно поведение элемента на который будет применена данная анимация.

Анимация №1

Для начало создадим самую простую анимацию для первой кнопки.

Она будет смещать наже изображение влево, потом возвращать на исходное положение. Для того, чтобы создать анимацию в папке res создайте новую ресурсную папку anim:

После этого в папке anim создаем Animation resource file с именем animation_one.xml и содержимым:

Как видите все начинается с тега set, он является стандартным тегом для всех анимационных русурс файлов, а вот тег translate – это уже наша анимация, где:

android:toXDelta – это смежение по оси X в лево;

android:duration – это продожытельность перемещения, чем больше duration, тем медленей будет двигаться изображение.

Читать еще:  Анализ работы MS SQL Server, для тех кто видит его впервые (часть 2)

Анимация №2

Теперь создадим в тойже папке anim новый ресурс файл с именем anumation_two.xml и содержимым:

Как видите в этой анимации мы используем тег rotate – он позволит нам заставить наше изображение сделать поворот, в нашем случае на 360 градусов.

Давайте рассмотрим детальней атрибуты свойства rotate:

android:pivotX – это говорит о том, что точка повората будет в центре изображения, поэтому оно просто сделает круговой поворот;

android:fromDegrees- тут мы указываем начальное угловое положение, в градусах;

android:toDegrees – а тут конечное угловое положение, в градусах;

android:duration = это продолжительность анимации чем больше оно будет тем медленей будет анимация.

Анимация №3

Теперь расмотрим немного сложней анимацию. Для этого создаем 3-ю анимацию и называем её animation_three.xml:

Тут мы уже видим несколько анимационных свойств объеденены в одну анимацию. Вы уже наверное заметели, что мы сново используем анимацию rotate, но помимо её тут есть и новая анимация scale.

scale – позволяет сделать динамическое изменение размера компонента, в нашем случае картинки.

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

android:duration – продолжительность анимации;

android:fromXScale – начальная позиция смещения анимации по оси X;

android:fromYScale – начальная позиция смещения анимации по оси Y;

android:pivotX – определяет начальную точку изменения размера по оси X;

android:pivotY – определяет начальную точку изменения размера по оси Y;

android:startOffset – количество миллисекунд задержки анимации после запуска;

android:toXScale – размер смещения по оси X;

android:toYScale – размер смещения по оси Y.

Шаг 4. Подключение анимаций

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

Вот полный код MainActivity:

Методы onAnimationImageOne, onAnimationImageTwo, onAnimationImageThree вызываются в main_layout на каждой кнопке в свойстве android:onClick.

Лучшие приложения для создания анимации на Android

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

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

Читать еще:  Лучшая прошивка для htc one m8. Необходимое для получения Root прав

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

В Google Play довольно много программ, которые могут создавать простейшие мультфильмы. Однако не все они подойдут новичкам. И тем более, не все они выдадут ожидаемый результат. Поэтому мы собрали в данном материале именно те программы, которые хорошо справляются со своей работой.

Legend

Бесплатное приложение для анимации, способное создавать 6-секундные авторские гифки. Создать полноценный мультфильм здесь не получится. Но программу вполне можно использовать в качестве создателя интро для различных видео.

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

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

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

Достоинства:

  • Быстрое создание GIF.
  • Использование фото и видео.
  • Анимированный текст.
  • Большое количество шрифтов.
  • Есть эффекты и фильтры.
  • Много готовых шаблонов.
  • Простейший интерфейс.
  • Быстрая работа на слабых устройствах.
  • Использование видео для фона.
  • Поиск изображений на Flickr.
  • Совместимость с социальными сетями.

Недостатки:

  • Много рекламы и нет русского языка.

Adobe Spark Post

Весьма известный инструмент для создания коротких анимаций. Он позволяет нарисовать ролик с нуля. Для этого есть все необходимые инструменты. Причем производимый визуальный контент соответствует профессиональному качеству (что немаловажно).

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

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

Само приложение бесплатно. Однако в его составе есть некоторые функции, которые необходимо разблокировать путем приобретения платной подписки. Продукт хорошо оптимизирован и способен неплохо работать даже на относительно слабых смартфонах.

Ссылка на основную публикацию
Статьи c упоминанием слов:

Adblock
detector