Анимация кнопки андроид студио

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

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

Создаем новый проект, выбираем Blank Activity. Основные шаги создания будут следующими:

1) создаем интерфейс программы, состоящий всего то из одного элемента ImageView, который и будет играть роль кнопки;

2) создаем анимацию из набора изображений;

3) ну и напоследок кодим в MainActivity.java.

Начнем с работы с интерфейсом. Открываем файл activity_main.xml и добавляем туда элемент ImageView, задав ему определенные рамки, чтоб он в итоге не занимал нам весь экран:

Пока что Android Studio ругает нас на строчке android:background=»@drawable/anim_button», чтобы это исправить, переходим к выполнению второго пункта плана: создание анимации. Как вы наверное уже догадались, анимация в приложении будет представлена xml файлом anim_button.xml. Перед тем, как его создать, добавим в проект приложения несколько изображений, которые и будут составлять анимацию. Я не слишком крутой дизайнер (мягко говоря), поэтому если вам не понравиться мой набор картинок, можете подобрать что-нибудь свое. Изображения нужно поместить в папке res/drawable проекта.

Теперь в этой же папке res/drawable создаем новый xml файл по имени anim_button.xml и добавим в него наши картинки:

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

Переходим к работе в файле MainActivity.java. Нам нужно объявить и инициализировать переменные ImageView и AnimationDrawable, настроить файл anim_button.xml в качестве анимации для элемента ImageView и настроить запуск самой анимации при нажатии на элемент ImageView. Чтобы все это сделать, добавляем следующий код:

Ну вот и все на этот раз, запускаем и смотрим что получилось:

Кнопочка с ImageView работает нормально. Чтобы анимация повторилась 1 раз, в строке
animation.setOneShot(false) нужно выставить значение true.

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

Источник

ПРОГРАММИРОВАНИЕ НА ANDROID STUDIO — FLOATING ACTION BUTTON (АНИМАЦИЯ ЛЕТАЮЩЕЙ КНОПКИ) Ч. 1

Итак, в данном уроке я расскажу о том, как делать простейшую анимацию летающей кнопки Floating Action Button.

Первым делом создайте новое приложение в Android Studio с пустым активити (Empty Activity).

Для работы с Floating Action Button в Android Studio необходимо подключить библиотеку Design. Чтобы это сделать нужно перейти в Gradle Scripts -> build.gradle (Modul: app). В build.gradle (Modul: app) в раздел dependencies добавьте такую строчку:

Должно всё выглядеть примерно так:

После чего нужно синхронизировать проект, нажав на ссылку Sync Now в верхнем правом углу. Теперь можно приступать к созданию летающей кнопки. Первым делом перейдите к представлению MainActivity, т.е. к файлу activity_main.xml, который расположен в app -> res -> layuot, и отредактируйте его содержимое следующим образом:

В примере мы будем использовать две кнопки. Первая кнопка — Floating Action Button, при нажатии на которую она будет плавно уменьшаться до тех пор, пока не исчезнет совсем. Вторая кнопка — Button, при нажатии на которую будет восстанавливаться видимость Floating Action Button. Чтобы кнопки заняли свои позиции внутри контейнера в соответствии со своими настройками, в качестве контейнера в activity_main.xml необходимо использовать CoordinatorLayout .

Далее нам нужно будет создать каталог для хранения файлов с настройками анимации. Для этого перейдём к каталогу ресурсов проекта app -> res и, нажав на нём правой кнопкой мыши, в появившемся меню выберем New -> Android resource directory. В открывшемся окне зададим наименование нового каталога. Назовём его anim. После создания каталога anim создадим в нём файл, отвечающий за скрытие кнопки Floating Action Button. Для этого нажмите правой кнопкой мыши на каталоге anim и в появившемся меню выберите New -> Animation resource file. Назовите его fab_hide.

Отредактируйте его содержимое следующим образом:

Теперь аналогичным образом нужно создать ещё один файл, который будет отвечать за появление кнопки Floating Action Button. Назовите этот файл fab_show и отредактируйте его содержимое так:

fillAfter=»true» означает, что преобразование будет выполнятся после завершения анимации. duration=»1000″ устанавливает время выполнения анимации в миллисекундах. В данной ситуации установлено 1000 миллисекунд, или 1 секунда. shareInterpolator=»true» устанавливает возможность использования интерполятора всеми дочерними элементами. Элемент scale отвечает за изменение размера кнопки при анимации, где параметры fromXScale и fromYScale — это начальные значения масштабов кнопки по осям X и Y на момент начала анимации, а параметры toXScale и toYScale — это конечные значения масштабов на момент завершения анимации. Значения этих параметров имеют тип float и варьируются от 0 до 1. Значение 1.0 соответствует натуральному масштабу. Параметры pivotX и pivotY указывают на координату внутри кнопки, относительно которой происходит изменение размера кнопки. Т.е. эта координата становиться центром, относительно которого кнопка уменьшается при её скрытии, или увеличивается при её появлении. Элемент alpha отвечает за прозрачность кнопки, где значение 1.0 соответствует абсолютной непрозрачности, а 0.0 — абсолютной прозрачности. Параметр fromAlpha — это начальное значение прозрачности, а toAlpha — конечное значение прозрачности.

Теперь перейдите к MainActivity и отредактируйте его код следующим образом:

Источник