Анимация расширения view android

Анимация View без XML описания

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

• перед началом анимации onAnimationStart (Animation);
• после завершения анимации onAnimationEnd (Animation);
• при повторном старте анимации onAnimationRepeat(Animation).

Пример AnimationListener

В следующем примере слушатель анимации ничего полезного не делает, просто выводит сообщения в консоль. У нас же в примере, который мы рассмотрим далее, этот слушатель будет зеркально повторять процесс перехода из одного состояния в другое. Так, например, при анимации масштабированием компонент сначала будет уменьшаться в размерах, а потом восстанавливаться. Процесс уменьшения и восстановления будем привязывать к методу onAnimationEnd. Можно, конечно же, привязать и к методу onAnimationStart. Здесь самое главное определиться с началом анимации, т.е. из какого «состояния» компонента будем стартовать процесс анимации.

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

• AlphaAnimation – класс анимации прозрачностью;
• ScaleAnimation – класс анимации масштабированием;
• TranslateAnimation – класс анимации перемещением;
• RotateAnimation – класс анимации вращением;
• AnimationSet – класс комбинированной анимации.

Анимация прозрачностью, класс AlphaAnimation

Класс AlphaAnimation имеет два конструктора :

Первый конструктор используется для создания объекта анимации с загрузкой ресурсов. Бо́льшее распространение получил второй конструктор, в котором параметры fromAlpha и toAlpha определяют соответственно начальное и конечное значение прозрачности (от 0.0 до 1.0).

В следующем примере анимация изменяет прозрачность компонента от 0.2 до 1.0 в течение 3-х секунд.

Анимация масштабированием, класс ScaleAnimation

Класс ScaleAnimation имеет 4 конструктора :

Первый конструктор используется для создания объекта анимации с загрузкой ресурсов. В других конструкторах используются параметры fromX, toX, fromY, toY, pivotX, pivotY, описанные в предыдущей статье. Назначение параметров pivotXType, pivotXValue, pivotYType, pivotYValue следующее :

• pivotXType и pivotYType формат значения; возможны следующие форматы :
  • Animation.ABSOLUTE – абсолютное значение относительно левой/верхней границы в пикселях;
  • Animation.RELATIVE_TO_SELF – значение в процентах относительно размеров элемента; значение 1.0 соответствует 100%;
  • Animation.RELATIVE_TO_PARENT – значение в процентах относительно размеров родительского контейнера; значение 1.0 соответствует 100%.
• pivotXValue и pivotYValue — значение для координаты центра поворота с учетом формата.

В следующем примере анимация масштабированием увеличивает размер компонента с 10% до 100% в течение 3-х секунд. Центр, относительного которого выполняется масштабирование, находится в точке (0.05, 0.05).

Анимация перемещением, класс TranslateAnimation

Класс TranslateAnimation имеет 3 конструктора :

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

В следующем примере анимация перемещением изменяет положение компонента в течение 3-х секунд. Первоначальное положение компонента смещено относительно конечного на -150 пикселей по оси X и на -200 пикселей по оси Y.

Анимация вращением, класс RotateAnimation

Класс RotateAnimation имеет 4 конструктора :

Первый конструктор используется для создания объекта анимации с загрузкой ресурсов. В остальных конструкторах параметры fromDegrees и toDegrees определяют начальный и конечный углы поворота. Параметры pivotX и pivotY определяют координаты центра поворота в пикселях относительно левой и верхней границы элемента. В последнем конструкторе параметры pivotXType, pivotXValue, pivotYType, pivotYValue имеют такие же значения, как и в классе ScaleAnimation.

Комбинированная анимация, класс AnimationSet

Класс AnimationSet имеет 2 конструктора :

Первый конструктор используется для создания объекта анимации с загрузкой ресурсов. Во втором конструкторе используется параметр shareInterpolator, определяющий признак общего (для набора анимации) интерполятора или каждая анимация использует свой интерполятор. В первом случае значение равно «true», во втором случае «false». Вопрос использования интерполяторов в анимации View компонентов рассмотрен отдельно. Для добавления в набор анимации необходимо использовать метод addAnimation класса AnimationSet.

В следующем примере создается объект комбинированной анимации mAnimation без использования интерполятора. В набор анимации добавляются объекты анимации прозрачностью mAlphaAnimation и масштабированием mScaleAnimation, рассмотренные выше.

Пример использования класса анимации

Рассмотрим пример анимации View-компонентов с использованием описанных выше классов анимации. Новый модуль/проект создавать не будем, а воспользуемся описанным в предыдущей статье модулем p04Animation, в котором внесем изменения только в активность MainActivity.java. То есть весь интерфейс с кнопками оставим без изменений, а обработчики нажатий на кнопки изменим. При этом, в пример включим слушатели событий, чтобы выполнять зеркальные процессы анимации. Для этого для каждого типа анимации будем создавать по 2 объекта. Один объект будет изменять исходное состояние, а другой объект будет восстанавливать исходное состояние. Нам необходимо :

• объявить переменные;
• изменить метод onClick;
• создать два слушателя AnimationListener;
• создать объекты анимации.

Объявление переменных

При объявлении переменных для каждого типа анимации определяем по два объекта. Объекты с постфиксом «In» будут восстанавливать исходное состояние объекта. Объекты с постфиксом «Out» будут изменять исходное состояние объекта. Что касается анимации вращением, то объект mRotateAhead будет вращать компонент по часовой стрелке, а объект анимации mRotateBackward – против часовой стрелки. Слушатели outListener, inListener будут использоваться для повторного старта соответствующего процесса анимации.

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

Листинг метода onClick

В методе onClick определяется идентификатор компонента (кнопки). Для нажатой кнопки устанавливается (true) или сбрасывается (false) соответствующий флаг (логическая переменная). Если флаг установлен, то стартует анимация, связанная с изменением текущего состояния. Процесс анимации, связанный с восстановлением текущего состояния, будет стартован из слушателя. Анимация вращением выполняет повороты в разные стороны.

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

Листинг слушателей

В примере определяем двух слушателей : outListener, inListener. В каждом из слушателей будем использовать метод, вызываемый при завершении анимации onAnimationEnd. Cлушатель ouListener будет стартовать анимацию восстановления состояния компонента, а слушатель inListener – анимацию изменения исходного состояния. При выборе, какую анимацию стартовать, выполняется проверка установленного флага.

Листинг метода onCreate класса MainActivity

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

На этом всё. Полагаю, анимация View компонентов на этих примерах освоена Вами в достаточном объеме.

Источник

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

Анимация может выполняться в виде ряда простых преобразований — изменение позиции, размера, угла вращения и уровня прозрачности на поверхности объекта 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 с надписью. Для дочернего контейнера обязательно присвойте идентификатор, по которому вы сможете загрузить его в код программы и использовать для анимации.

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

Источник