1. Главная страница » Компьютеры »

Android studio анимация появления

Автор: | 16.12.2019

Содержание

Кадровая (фреймовая) анимация, в английском языке Cell animation, представляет собой процесс, при котором несколько изображений (кадров) последовательно сменяют друг друга, оставаясь видимыми в течение короткого промежутка времени. Подобная техника довольно распространена как при создании мультфильмов, так и при создании анимированных *.gif изображений. Браузеры понимают .gif формат и реализуют анимацию. На следующем анимированном изображении слева представлен скромненький кролик, напоминающий мужчинам о необходимости дарить женщинам цветы. Сразу видно, что сам кролик делает это очень редко, поэтому он немного смущен.

Android studio анимация появления Android studio анимация появления

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

  • определить графический интерфейс приложения анимации;
  • определить файл анимации rabbit.xml, включающий изображения;
  • настроить код активности MainActivity.java для старта и останова анимации.

Интерфейс примера

Для формирования графического интерфейса создадим макет res/layout/anim_rabbit.xml. Для этого в древовидном описании проекта можно выделить модуль p03images или один из его узов (res, res/layout), вызвать правой клавишей мыши контекстное меню и выбрать New/XML/Layout XML File. Подробно о выборе типа макета и формировании интерфейса написано здесь.

Ниже представлен листинг макета приложения anim_rabbit.xml. Особого комментария к нему не требуется. Файл включает ImageView, «привязанный» к левой и нижней сторонам экрана («layout_constraintStart_toStartOf», «layout_constraintBottom_toBottomOf»), и две кнопки, также «привязанные» к левой и нижней частям экрана и связанные между собой. В качестве единицы измерения размеров компонентов, а также отступов используется «dp».

Необходимо отметить, что параметр «android:src» компонента ImageView неопределен. Анимация будет формироваться динамически после нажатия кнопки btnStart.

Листинг anim_rabbit.xml

Файл анимации, rabbit.xml

В директории res/drawable/ необходимо разместить покадровые изображения. Кроме этого в этой же директории необходимо создать файл описания анимации в формате XML, в который включить соответствующие изображения. Напоминаю, что изображения в директорию res/drawable/ копируются через буфер обмена (Ctrl+C, Ctrl+V), подробности здесь.

Файл описания анимации res/drawable/rabbit.xml создаем в диалоговом окне, открывающемся при выборе пункта контекстного меню New/File для узла drawable. Ниже представлен листинг файла описания анимации res/drawable/rabbit.xml.

Листинг описания анимации rabbit.xml

На что следует обратить внимание при формировании файла анимации :

  • animation-list – корневой элемент списка;
  • android:oneshot – опция циклического повторения процесса анимации;
  • item – покадровые элементы анимации :
  • android:drawable – покадровые изображения, размещаемые в директории drawable;
  • android:duration – продолжительность представления, мс.

Опция andro анимация срабатывает только один раз. Каждый элемент аннимации устанавливает ссылку на ресурс изображения с помощью свойства android:drawable; свойство android:duration устанавливает время представления изображения в миллисекундах. Описанная анимация включает 16 кадров.

Читайте также:  Fifa 19 лига чемпионов

Старт и останов анимации в модуле MainActivity.java

Для отображения анимации используются компонент ImageView и класс/объект AnimationDrawable. Компонент ImageView отображается в интерфейсе. А объект AnimationDrawable, получаемый из ImageView, управляет анимацией.

В листинге MainActivity.java сначала получаем объект представления изображения mImageView, и определяем его BackgroundResource. После этого получаем объект mAnimation. К кнопкам управления подключаются обработчики событий, которые стартуют и останавливают процесс анимации.

После старта примера Вы увидите следующий графический интерфейс приложения.

Android studio анимация появления

Динамическое формирование анимации

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

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

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

  • создать макет интерфейса anim_feya.xml и включить в него только один компонент ImageView;
  • загрузить покадровые изображения feya_1.png, feya_2.png (в конце страницы).

Ну, и в заключении необходимо немного изменить код активности MainActivity.java . Включим в него процедуру createAnimation(), которая подготавливает и запускает процесс анимации.

На что следует обратить внимание в процедуре createAnimation? Сначала графические изображения читаются из ресурсов приложения в переменные bm1, bm2 типа Bitmap. Изображения можно получить не только из ресурсов приложения, но и из других мест. После этого изображения конвертируются в объекты frame1, frame2 типа BitmapDrawable. Далее создается объект типа AnimationDrawable, у которого динамически определяем флаг циклического повторения анимации, и в который методом addFrame загружам кадры анимации (frame1, frame2). После того, как объект анимации mAnimation подготовлен, он загружается в контейнер ImageView методом setBackground, делается видимым и стартует.

После старта примера мы увидим нашу фею в интерфейсе приложения :

Android studio анимация появления

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

Класс AnimationDrawable

В примерах кадровой анимации использовался класс AnimationDrawable, который не имеет слушателей, позволяющих отслеживать завершение процесса анимации. Если у Вас возникает такая необходимость, то можно самостоятельно в отдельном потоке на основе общего количества кадров и их продолжительности выполнить перехват процесса (остановить анимацию, вызвать какой-либо метод). Для этого используйте метод получения количества кадров getNumberOfFrames(), чтения кадра getFrame(int), определения продолжительности кадра getDuration(iint).

Скрыть или показать анимацию с использованием AnimationDrawable можно изменением прозрачности кадров в диапазоне от 0 до 255. Для этого следует использовать метод класса setAlpha(int alpha).

Скачать изображения

Используемые в примерах изображения можно скачать здесь (517 Kб).

В этом уроке мы:

— рассмотрим анимацию View-компонентов

Перед серьезными темами я решил все таки рассмотреть еще одну интересную и, на мой взгляд, несложную тему. Правда рассмотрю я только вершину и в дебри не полезу. Тема – анимация. Мы научимся проделывать следующие трансформации с обычными View-компонентами:
— менять прозрачность
— менять размер
— перемещать
— поворачивать

Создадим проект:

Project name: P0201_SimpleAnimation
Build Target: Android 2.3.3
Application name: SimpleAnimation
Package name: ru.startandroid.develop.p0201simpleanimation
Create Activity: MainActivity

Трансформации конфигурируются в XML файлах, затем в коде программы считываются и присваиваются View-элементам. Я не буду дублировать хелп и все расписывать, а сразу перейду к практике.

В нашем проекте есть папка res. Надо в ней создать папку anim. Сделать это можно, например, так: правой кнопкой на res и в меню выбираем New -> Folder. В папке anim надо создать файлы. Делается это аналогично: правой кнопкой на anim и в меню выбираем New -> File. В этих файлах будем конфигурировать анимацию.

Создаем следующие файлы в папке res/anim:

Имя файла: myalpha.xml

Описание трансформации: меняется прозрачность с 0 до 1 в течение трех секунд.

Имя файла: myscale.xml

Описание трансформации: изменение размера с 0.1 от оригинальной ширины и высоты до 1. Точка, относительно которой будет производиться масштабирование, лежит ровно посередине объекта (pivotX, pivotY). Продолжительность – 3 сек.

Имя файла: mytrans.xml

Описание трансформации: перемещение с -150 относительно текущей позиции по оси X и -200 по оси Y в текущую позицию (0,0). Продолжительность – 3 сек.

Имя файла: myrotate.xml

Описание трансформации: поворот относительно левого верхнего угла (т.к. не указаны pivotX, pivotY) на 360 градусов в течение трех секунд

Имя файла: mycombo.xml

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

Итак, мы создали 5 файлов анимации.

Android studio анимация появления

И теперь можем применять их к View-компонентам.

Открываем main.xml и создадим экран:

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

Читайте также:  Moc3041 описание на русском

Анимация читается из xml-файла методом AnimationUtils.loadAnimation, на выходе получается объект типа Animation. Его используем в методе startAnimation, который запускает анимацию.

Все сохраним и запустим приложение. Вызываем контекстное меню для TextView, и тестируем анимации

Android studio анимация появления

Я использовал не все возможности и параметры. Есть еще, например, параметр andro >) и вам надо чтобы они запускались не одновременно, а в определенном порядке. Также полезный параметр android:repeatCount – это количество повторов.

Рекомендую поиграть параметрами в XML файлах и посмотреть, что получается.

На следующем уроке:

— создаем в приложении второй экран

Присоединяйтесь к нам в Telegram:

— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.

— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование

— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня

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

Анимация может выполняться в виде ряда простых преобразований — изменение позиции, размера, угла вращения и уровня прозрачности на поверхности объекта View. Например, у компонента TextView можно перемещать, вращать, уменьшать или увеличивать текст. Если TextView имеет фоновое изображение, оно будет преобразовано наряду с текстом. Пакет android.view.animation содержит необходимые классы для анимации с промежуточными кадрами.

Основные классы анимации и их соответствия в XML:

Команды анимации определяют преобразования, которые необходимо произвести над объектом. Преобразования могут быть последовательными или одновременными. Каждое преобразование принимает набор параметров, определённых для этого преобразования (начальный размер, конечный размер при изменении размера, стартовый угол и конечный угол при вращении объекта и т. д.), а также набор общих параметров (например, начального времени и продолжительности). Если требуется сделать несколько преобразований одновременно, им задают одинаковое начальное время. Если требуется сделать последовательные преобразования, задается их время старта плюс продолжительность предыдущего преобразования.

Последовательность команд анимации определяется в XML-файле (предпочтительно) или в программном коде.

Создание анимации в XML-файле

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

По умолчанию все элементы применяются одновременно. Чтобы запускать элементы последовательно, необходимо определить атрибут startOffset и указать значение в миллисекундах, например:

Атрибуты анимации

  • duration — продолжительность эффекта в миллисекундах
  • startOffset — начальное время смещения для этого эффекта, в миллисекундах
  • fillBefore — когда установлен в true, то преобразование анимации применяется перед началом анимации
  • fillAfter — когда установлен в true, то преобразование применяется после конца анимации
  • repeatCount — определяет число повторений анимации, можно использовать значение infinity (бесконечность)
  • repeatMode — определяет поведение анимации при ее окончании. Возможные варианты: restart (перезапустить без изменений) или reverse (изменить анимацию в обратном направлении)
  • zAdjustment — определяет режим упорядочения оси Z, чтобы использовать при выполнении анимации (нормаль, вершина или основание)
  • interpolator — определяет постоянную скорости, которая описывает динамику визуальной деятельности в зависимости от времени или, говоря простым языком, определяет скорость изменения анимации. Можно использовать любой из элементов подкласса интерполятора, определенных в R.styleable, например: andro

Элемент

Элемент — контейнер, который может содержать другие элементы. Представляет класс AnimationSet. Поддерживает атрибут shareInterpolator, который при значении true указывает на возможность совместного использования этого интерполятора для всех дочерних элементов.

Элемент

Постепенно изменяющаяся анимация прозрачности при помощи AlphaAnimation. Поддерживает следующие атрибуты:

  • fromAlpha — начальное значение прозрачности объекта;
  • toAlpha — конечное значение прозрачности объекта;

Атрибуты содержат значение прозрачности от 0 до 1 типа Float, где 0 означает полную прозрачность объекта.

Элемент

Элемент управляет анимацией изменения размеров объекта и представляет класс 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%

Элемент

Элемент создает вертикальную или горизонтальную анимацию движения. Представляет класс TranslateAnimation и поддерживает следующие атрибуты:

  • fromXDelta — начальное положение по X
  • toXDelta — конечное положение по X
  • fromYDelta — начальное положение по Y
  • toYDelta — конечное положение по Y

Атрибуты должны быть в любом из следующих трёх форматов:

  • Абсолютное значение
  • Значения в процентах от -100% до 100%
  • Значения в процентах от -100%p до 100%p, где p указывает процент относительно его родителя.

Слайд-шоу

Например, для эффекта слайд-шоу, когда один элемент выталкивает полностью другой элемент, реализуется двумя анимациями справо-налево или слева-направо.

Элемент

Элемент предназначен для анимации вращения и представляет класс RotateAnimation. Поддерживает следующие атрибуты:

  • fromDegrees — начальный угол вращения в градусах
  • toDegrees — конечный угол вращения в градусах
  • pivotX — координата X центра вращения в пикселах;
  • pivotY — координата Y центра вращения в пикселах
Читайте также:  Firefox monitor что это

Примеры с анимацией преобразований

Можно создать несколько файлов анимации и применять их для одного объекта. Рассмотрим работу анимации на примере прямоугольника. К сожалению, у меня не заработал пример с изменением прозрачности (alpha), может вам повезет больше. (Как рассказал один из читателей, пример работает на эмуляторе 2.1, а на эмуляторе 2.3.3 уже нет).

Создайте новый проект и в каталоге res/anim/ проекта создайте пять файлов с XML-анимацией: alpha.xml, rotate.xml, scale.xml, translate.xml и файл combination.xml, в котором мы будем использовать комбинацию различных объектов для создания смешанной анимации.

alpha.xml

rotate.xml

scale.xml

translate.xml

combination.xml

shape.xml

Фигуру прямоугольника для анимации определим в файле shape.xml, который будет находиться в каталоге res/drawable.

Разметка

Перейдем к разметке основной формы приложения (main.xml). Поместим элемент ImageView:

Анимация

Анимация запускается в коде следующим образом: надо создать объект Animation через вызов метода AnimationUtils.loadAnimation() и передать ему в качестве параметра контекст активности и ссылку на XML-файл анимации. Затем запускается анимация через метод View.startAnimation(), передавая в него объект Animation:

AnimationListener

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

У интерфейса AnimationListener есть три метода обратного вызова:

  • onAnimationEnd()
  • onAnimationRepeat()
  • onAnimationStart()

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

Вызовите метод setAnimationListener() из объекта Animation и передайте ему в качестве параметра реализацию интерфейса AnimationListener, при необходимости переопределив методы onAnimationEnd(), onAnimationStart() и onAnimationRepeat().

В основном классе создадим меню из пяти пунктов, соответствующих каждому типу запускаемой анимации: Alpha, Scale, Translate, Rotate и Комбинация. В качестве идентификаторов пунктов меню используем идентификаторы ресурсов XML-файлов анимации, упростив тем самым структуру метода onOptionsitemSeiected(), вызываемого при выборе пункта меню.

Анимация графических файлов

Анимация для графических файлов ничем особым не отличается от анимации для графических фигур. Рассмотрим на примере анимацию графического объекта, отображаемого в ImageView. Создайте новый проект и найдите какой-нибудь графический файл с изображением кота (но не собаки, иначе работать не будет!).

В XML-файле анимации создадим следующую структуру: используем элемент для растягивания изображения и вложенный контейнер , в котором определим два дочерних элемента и для одновременного вращения и изменения размеров объекта. Данный файл необходимо сохраним в каталоге res/anim/ под любым именем, например, crazycat.xml

crazycat.xml

В файле разметки поместим кнопку для запуска анимации и один элемент ImageView для нашего изображения.

Осталось написать программный код:

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

Android studio анимация появления

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

Анимация группы представлений

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

Принцип анимаци останется тем же. В файле разметки приложения разместите дочерний контейнер LinearLayout, в котором разместите ImageView с изображением и TextView с надписью. Для дочернего контейнера обязательно присвойте идентификатор, по которому вы сможете загрузить его в код программы и использовать для анимации.

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

«>

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

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