Анимация появления view android

Анимация преобразований

Анимация может выполняться в виде ряда простых преобразований — изменение позиции, размера, угла вращения и уровня прозрачности на поверхности объекта 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, например: android:interpolator=»@android:anim/decelerate_interpolator»

Элемент

Элемент — контейнер, который может содержать другие элементы. Представляет класс 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 центра вращения в пикселах

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

Можно создать несколько файлов анимации и применять их для одного объекта. Рассмотрим работу анимации на примере прямоугольника. К сожалению, у меня не заработал пример с изменением прозрачности (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 для нашего изображения.

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

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

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

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

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

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

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

Источник

Анимация в 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-компонентов выполняется трансформацией их параметров.

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

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

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

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

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

• android:fromAlpha	начальное состояние равное «0.0», полностью невидимое;
• android:toAlpha	конечное состояние равное «1.0», полностью видимое;
• android:duration	продолжительность анимации 3000 миллисекунд.

Масштабирование компонента

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

Текущий размер компонента по осям X, Y принимается равным 1.0. При описании анимации масштабированием определяются следующие параметры компонента :

• android:fromXScale	начальное значение масштаба по оси X;
• android:toXScale	конечное значение масштаба по оси X;
• android:fromYScale	начальное значение масштаба по оси Y;
• android:toYScale	конечное значение масштаба по оси Y;
• android:pivotX	х координата точки, относительно которой выполняется масштабирование;
• android:pivotY	y координата точки, относительно которой выполняется масштабирование.

Возможные значение параметров pivotX и pivotY :

– в пикселях относительно левого/верхнего края элемента, например «5»;
– в процентах относительно левого/верхнего края, например «5%»;
– в процентах относительно левого/верхнего края родительского элемента, например «5%p».

Перемещение компонента

Для создания анимации изменением положения компонента создадим файл res/anim/trans.xml. Корневым элементом описания анимации перемещением является тег translate.

Изменение положения View компонента выполняется относительно текущего, представленного в макете описании интерфейса. При описании анимации перемещением компонента определяются следующие параметры :

• android:fromXDelta	смещение относительно начального положения по оси X;
• android:toXDelta	смещение относительно конечного положения по оси X;
• android:fromYDelta	смещение относительно начального положения по оси Y;
• android:toYDelta	смещение относительно конечного положения по оси Y;
• android:duration	продолжительность.

Значения смещений могут быть определены в пикселях, в процентах относительно соответствующуго размера компонента (ширины, длины), например «5%», в процентах относительно соответствующего размера родительского контейнера (например «5%p»).

Вращение компонента

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

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

• android:fromDegrees	начальное значение угла поворота в градусах (возможно отрицательное значение);
• android:toDegrees	конечное значение угла поворота;
• android:pivotX	х координата центра поворота;
• android:pivotY	y координата центра поворота.
• android:duration	продолжительность.

Возможные значения pivotX и pivotY как у анимации scale; по умолчанию эти параметры, если не представлены в описании, равны нулю, т.е. поворот выполняется относительно левого верхнего угла компонента.

Комбинирование транформаций

Анимацию можно выполнить совмещением нескольких видов трансформаций View компонента. Для описания комбинированной анимации создадим файл res/anim/combo.xml. Корневым элементом описания комбинированной анимации является тег set. Описание комбинированной анимации включает несколько секций трансформации.

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

Дополнительные параметры описания анимации

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

• android:duration	длительность анимации в миллисекундах (представлена в примерах);
• android:interpolator	определение используемого интерполятора анимации;
• android:repeatCount	количество дополнительных циклов анимации. По умолчанию значение равно «0». Это значит, что анимация выполнится только один раз. При значении равным 2 анимация будет повторена 3 раза : один раз основной и два раза дополнительный. При значение «-1» или «infinite» — бесконечный повтор.
• android:repeatMode	поведение анимации перед повторением, если параметр repeatCount не равен 0. Параметр repeatMode может принимать значение «restart», при котором анимация начинается заново, и «reverse», при котором анимация выполнится в обратном порядке.
• android:startOffset	задержка в миллисекундах перед началом анимации.

Определение интерфейса примера

На следующем скриншоте представлена структура проекта/модуля. В директории res/anim располагаются описанные выше XML файлы анимаций.

Разместим в интерфейсе приложения кнопки, по нажатию на которые будет выполняться определенная анимация View компонента. На следующем скриншоте представлен графический интерфейс примера (activity_main.xml в режиме Design) с расположенными в нижней части кнопками. View компонент с надписью «Hello, World!» располагается в верхней части интерфейса.

Текстовое описание интерфейса activity_main.xml представлено в следующем листинге.

Листинг activity_main.xml

Просматривая файл описание интерфейса приложения обратите внимание на привязки компонентов, определенные параметрами app:layout_constraintStart_toStartOf и app:layout_constraintTop_toTopOf. В наименовании параметра указывается префикс «app» пространства имен, определенное в верхней части, а в качестве значения используется либо родитель «parent», т.е. привязка к родительскому контейнеру (ConstraintLayout), либо идентификатор соседнего компонента (для кнопок).

Выполнение анимации

В заключении необходимо модифицировать активность MainActivity.java, в котором к кнопкам подключить обработчики анимации. В связи с тем, что кнопок в интерфейсе 5, то чтобы не плодить один и тот же код с небольшими отличиями реализуем один общий метод. Для этого в описании класса добавим implements View.OnClickListener и реализуем метод onClick.

Теперь необходимо ко всем кнопкам подключить обработчик события, сославшись на класс оператором this. Таким образом, при нажатии на любую из кнопок будет вызываться метод onClick. В методе onClick идентифицируется кнопка и вызывается метод doAnim(int) с соответствующим анимационным ресурсом. В методе doAnim определяется View компонент, загружается и выполняется анимация.

Интерфейс выполняемого примера представлен на следующем скриншоте.

Продолжение статьи, связанное с анимацией View компонентов без описания в XML файле, представлено здесь.

Источник