Android text size animation

Анимация текста — временное увеличение размера и смена цвета

Никогда с анимацией не работал.
Есть десяток TextView на активити.
При некоторых важных изменениях надо обратить на цифру внимание (остальные не трогать). Типа «эй, обрати внимание, уже не 265, а 266»

Хотелось бы на секунду-три увеличить шрифт текста и из черного сделать красным или зеленым..
Причем не охота «вручную» контролировать плавное выпрыгивание и затухание.
как подобное сделать?

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

Хочется понять как подобное можно сделать ВСТРОЕННЫМИ средствами? С минимумом кода — только указать анимацию для текст-вьюва и «активировать»

Подкиньте пример/ссылку на ЛЮБУЮ простую анимацию текста — дальше сам разберусь! Большинство примеров либо мутные(список методов без примеров), либо не для текста.

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

Анимация элемента — смена цвета PictureBox
Доброе время суток. я пытаюсь сделать что бы при запуске PictureBox сначала красный а потом.

Увеличение текста Анимация
помогите пожалуйста. дали задание, увеличить текст в размере от 10 до 100 анимацией Вот программа.

Смена размера и цвета изображения при передвижении
Здравствуйте. Я знаю коды изменения цвета изображения(на месте), размера изображения(на месте) и.

Источник

Анимируем изменения размеров компонента в Android

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

Я много читал про анимацию, а вот использовать в своих интерфейсах до сих пор не довелось. Хотелось опробовать наконец всякие Layout Transitions, Animators, Layout Animations и написать по этому поводу статейку, чтобы и самому лучше запомнить, и другим разжевать. Закончилось, однако, всё гораздо прозаичней — кастомным ViewGroup и ObjectAnimator’ом.

Итак, мне захотелось сделать разворачивающийся при получении фокуса EditText, как в Chrome для Android, вот такой:

Быстро прошерстив StackOverflow для определения примерного направления движения нашёл 2 варианта реализации:

1. Использовать ScaleAnimation.
2. Так или иначе пошагово менять размер EditText’а и запрашивать requestLayout() на каждом шаге.

Первый вариант я сразу отмёл, как минимум, потому что буквы тоже растянутся. Второй вариант звучит куда логичней, за исключением того, что каждый шаг будет полностью отрабатывать цикл onMeasure/onLayout/onDraw для всей ViewGroup, хотя необходимо изменить отображение только EditText’а. К тому-же я подозревал, что такая анимация вовсе не будет смотреться плавной.

Берём за основу второй способ и начинаем думать как уйти от вызова requestLayout() на каждом шаге. Но начнём, как положено, с малого.

Пишем ViewGroup

Начнём с того, что создадим кастомный ViewGroup для размещения наших компонентов:

Разметка содержит 3 элемента:

1. Кнопка «Добавить таб», имеет фиксированный размер, находится слева.
2. Кнопка «Выбрать таб», имеет фиксированный размер, находится справа.
3. Поле для ввода URL (UrlBar, наследник от EditText’а), заполняет собой оставшееся свободное пространство.

Методы onMeasure и onLayout не представляют из себя ничего сложного — сначала меряем/располагаем кнопки, потом текстовое поле между ними.

Я делал всё это поверх другого примера, так что можно заметить присутствие лишнего кода. Например, кнопка «Добавить таб». Она отображается только при переключении в режим выбора таба, в нашем же случае она просто скрыта.

Добавляем аниматор

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

Мы собираемся использовать ObjectAnimator, так что нужно добавить getter и setter для нашего параметра, однако, если minSdkVersion >= 14, то, чтобы избежать рефлексии, лучше создать поле класса Property для этого.

Теперь добавим 2 inner-класса и 2 поля для старта анимации.

Не забудем зарегистрировать наш OnFocusChangeListener в initializeViews!

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

1. При изменении фокуса мы создаём ObjectAnimator, который пошагово изменяет переменную, обозначающую процент получения фокуса полем.
2. На каждом шаге вызывается invalidate() для ViewGroup. Данный метод не приводит к переразметке, он только перерисовывает компонент.

Процесс получения фокуса UrlBar’ом будет происходить следующим образом:

1. Скрываем все остальные элементы чтобы они не мешали отрисовке анимации (в нашем случае это кнопка переключения табов).
2. Вызываем requestLayout() чтобы после завершения анимации реальные границы UrlBar’а совпадали с наблюдаемыми (помните, что после вызова requestLayout() методы onMeasure+onLayout могут быть вызваны с задержкой!).
3. Начинаем пошагово менять процент выполнения анимации, вызывая на каждом шаге invalidate().
4. Вручную на каждом шаге высчитываем границы UrlBar’а для текущего процента и перерисовываем его.

При потере фокуса UrlBar’ом скрывать элементы и вызывать requestLayout() нужно наоборот, в конце работы анимации. Также, введём переменную для отключения этапа разметки, и не забудем добавить изменения в методы onMeasure и onLayout:

Готовимся к рисованию

Чтобы посчитать размер UrlBar’а на каждом шаге нам нужно знать его начальный и конечный размер. Добавим 2 переменные, в которые будем запоминать этот размер и в очередной раз немного поменяем onLayout:

Рисуем!

Помните, непосредственно во время анимации реальный размер UrlBar’а не меняется, это происходит либо в начале, либо в конце анимации, а по-умолчанию отрисовывает он себя в соответствии с границами, полученными на этапе разметки. Таким образом, во время анимации реальный размер компонента больше наблюдаемого. Чтобы уменьшить в этой ситуации наблюдаемый размер при отрисовке UrlBar’а воспользуемся хитростью — будем делать clipRect на canvas’е.

Ещё одна хитрость заключается в том, чтобы убрать фон у UrlBar’а и отрисовывать его вручную.

Немножечко меняем разметку.

Вводим переменную для отрисовки фона.

И, наконец, отрисовка! Добавим в метод drawChild(Canvas, View, long) условие для UrlBar’а:

Всё готово, можно запускать и смотреть:

Заключение

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

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

Источник

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

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

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

Источник