Анимация дождя android studio

TranslateAnimation и

Программная анимация

Класс TranslateAnimation наследуется от класса Animation и отвечает за анимацию перемещения объекта.

Один из конструкторов класса TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) создаёт анимацию путём указания начальных и конечных координат.

Также есть схожий конструктор TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue), где дополнительно можно указать тип координат. Тип может принимать одно из следующих значений:

• Animation.ABSOLUTE — абсолютные координаты (координаты экрана), указываются пиксели
• Animation.RELATIVE_TO_SELF — значения относительно текущих координат объекта, указываются проценты, где 1.0f это 100%
• Animation.RELATIVE_TO_PARENT — значения относительно родительских координат, указываются проценты, где 1.0f это 100%

Слева направо

Простейшая анимация сдвига ImageView слева направо.

Пример для кнопки на Kotlin

Сверху вниз (XML)

Рассмотрим пример перемещения объекта ImageView сверху вниз (падать). В папке res/anim создадим файл falling.xml:

Разместим на форме кнопку и ImageView и добавим код:

Запускайте проект и любуйтесь эффектом.

Усложним проект и заставим падать несколько объектов по очереди. Создадим два новых файла анимации:

falling_down.xml

falling_up.xml

Подготовим разметку из трёх невидимых ImageView:

Запустив проект, вы увидите, как сверху будут сыпаться картинки.

Движение по диагонали

По такому же принципу можно организовать движение по диагонали, изменяя одновременно значения X и Y. Создадим ещё один файл res/anim/slide_diagonal.xml:

Хотя эта запись избыточна, можно и так:

Разместите в углу экрана ImageView внутри контейнера LinearLayout, чтобы у него была возможность двигаться из угла в угол. Напишем код.

Дрожь земли

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

Суть анимации состоит в циклическом повторении операции перемещения объекта за короткий промежуток времени, что создаёт иллюзию дрожания. Создадим папку res/anim, в которой надо создать два файла: shake.xml и cycle_7.xml.

shake.xml

cycle_7.xml

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

Разместим на поверхности активности кнопку и заставим её дрожать при нажатии.

Ничего нам не мешает применить эффект дрожания и к целому экрану (разметка LinearLayout). Добавим пару строчек кода

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

Слайд-шоу

Эффект слайд-шоу, когда один элемент выталкивает другой элемент, реализуется двумя анимациями. Вот пример движения слайдов слева направо. Разместите в папке res/anim файлы:

Файл out.xml

Файл in.xml

Такую анимацию можно увидеть в примере с элементом ViewFlipper

По значениям атрибутов android:fromXDelta и android:toXDelta можно видеть, что идёт смещение первого объекта от 0% до 100%, а второго объекта от -100% до 0.

Если вы хотите использовать анимацию в противоположном направлении, то поменяйте значения на нужные:

Используем системные ресурсы анимации

В Android есть уже предустановленные ресурсы для анимации эффекта слайд-шоу, поэтому необязательно создавать собственные XML-файлы, если вас устраивают системные параметры для показа слайдов. Код изменится незначительно (из примера Анимация переходов):

Источник

Создаём анимацию «Восход солнца»

Статичный контент не очень интересен. Гораздо интереснее создавать различные анимационные эффекты, которые привлекут внимание пользователя.

В Android доступны несколько видов анимации, которым отведён отдельный раздел Анимация. Мы рассмотрим один из видов для ознакомления.

В этом уроке мы будем использовать анимацию из фигур, создав иллюзию восхода солнца. Также добавим анимацию аналоговых часов. Будет интересно!

Создадим новый проект под названием «Sunrise» (Восход солнца).

Пусть всегда будет солнце

Сначала нарисуем солнце. Создадим новую папку drawable в папке res (если такой папки нет). Далее в созданной папке создадим новый файл sun.xml следующего содержания:

Для изображения солнца мы использовали фигуру Овал с одинаковыми размерами, чтобы получить «солнечный круг». Чтобы рисунок солнца получился красивым, применим к нему градиент (плавное изменение цвета) от тёмно-жёлтого к светло-жёлтому.

Пусть всегда будет небо

Далее нарисуем «небо вокруг». В той же папке drawable создадим новый файл sky.xml следующего содержания:

Мы задали фигуру в виде прямоугольника с голубым градиентом от нижнего края к верхнему.

Трын-трава

Мальчишка нарисовал солнце, небо и подписал в уголке четыре строчки опять про солнце, небо, а также про маму и про себя. А про кота он совсем забыл. Ладно, не будем обращать внимания на глупого мальчика, а обратимся к другой песне, где зайцы косили (. ) трын-траву. Видимо у автора неплохая травка была. Но слов из песни не выкинешь — нарисуем траву. Создаём файл grass.xml в уже знакомой папке:

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

Собираем фигуры вместе

Настало время собирать камни, простите, фигуры. Для начала откроем файл strings.xml в папке res/values и добавим несколько строковых ресурсов:

Откроем разметку главной активности activity_main.xml и добавим в неё несколько элементов ImageView. Статья писалась приблизительно в 2013 году, поэтому использую RelativeLayout, самостоятельно сделайте через ConstraintLayout.

У всех элементов ImageView в атрибуте android:src мы прописали созданные фигуры, которые теперь можно видеть на экране.

Анимация восхода

Напомню, что мы собирались делать анимацию, а не рисунок. Продолжим урок. Нужно, чтобы солнце поднималось в верхнюю часть экрана. Создадим новую папку res/anim, в которой будут находиться файлы анимации.

Создадим в созданной папке новый файл sun_rise.xml:

В блоке set мы установили детали анимации. Например, параметр android:duration показывает, что анимация должна совершиться в течение 5 секунд. Параметр fillAfter управляет состоянием анимации — она не должна прыгать в начало. Параметр android:interpolator использует системную константу для небольшого ускорения от начала к середине анимации и торможения от середины к концу анимации.

Внутри блока set устанавливаются специальные блоки, отвечающие за характер анимации: изменение размеров, позиции и прозрачности.

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

Элемент translate двигает солнце по экрану вертикально вверх. Мы отталкиваемся относительно родительского элемента, используя суффикс «p». Солнце начинает движение в позиции 80% от родительского элемента по оси Y и заканчивает движение в позиции 10%.

При движении также меняется прозрачность солнца от полной прозрачности до полной непрозрачности (alpha).

Пишем код

Переходим непосредственно к программированию.

Запускаем проект и любуемся восходом солнца.

Анимация часов

Добавим к проекту часы с анимацией. Создадим в папке res/drawable файл clock.xml:

Создадим в папке res/anim файл clock_turn.xml для анимации часов:

В анимации мы указали значение 720 градусов, чтобы часы сделали полный оборот два раза. Хотя вращается вся фигура, для пользователя будет казаться, что вращается только стрелка.

Добавим в разметку новый ImageView для часов:

Теперь необходимо добавить код для анимации часов:

Запустите проект, чтобы проверить, что всё работает.

Сейчас у часов одна минутная стрелка. Давайте добавим ещё часовую стрелку. Создаём файл hour_hand.xml в папке res/drawable:

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

Снова добавляем ImageView для часовой стрелки в разметку:

Компонент должен находиться в той же позиции, что и часы.

Создаём анимационный файл hour_turn.xml в папке res/anim:

Начальная позиция установлена в значении 180 градусов, что соответствует 6 часам. При анимации стрелка повернётся на 60 градусов и будет соответствовать 8 часам. За это время минутная стрелка сделает два полных оборота, что соответствует двум часам (8-6).

Добавим анимацию в код:

— А где коты? — завопил мой кот Рыжик, внимательно следивший за созданием проекта. Ладно, добавим кота.

Как добавлять котов, объяснять не буду. Сами сообразите.

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

Простите за качество видео. Снимал с рук с телефона на мониторе. И кот дёргал за руку, грозно спрашивая, где коты?

Источник

AnimationDrawable ()

Кадровая (фреймовая) анимация — традиционная анимация при помощи быстрой смены последовательных изображений, как на киноплёнке. Данный вид анимации использует XML-файлы в каталоге res/anim/.

• графический ресурс для кадра
• продолжительность кадра

Данная анимация будет выполняться только для трёх кадров. При установке атрибута android:oneshot в true анимация повторится только один раз и после остановки будет содержать последний кадр. Если же атрибут установить в false, то анимация будет циклической. Данный XML-файл, сохраненный в каталоге res/anim проекта, можно добавить как фоновое изображение для компонента и затем запустить анимацию.

Пример с анимацией

Создадим новый проект и добавим на форму две кнопки для управления анимацией.

Для анимации подготовим заранее отобранные файлы, которые необходимо поместить в каталог res/drawable. Наша анимация будет состоять из восьми кадров. Время показа каждого кадра установим в 250 миллисекунд. Запишем наши настройки в XML-файл catanimation.xml в каталоге res/drawable.

Получить объект AnimationDrawable в коде программы можно так:

Управлять объектом AnimationDrawable можно через методы start() и stop().

Запустите приложение и посмотрите на анимацию. Надеюсь, вид кота, делающего упражнения, заставит вас с понедельника начать делать зарядку.

Создание анимации в коде программы

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

В основном классе определим два внутренних метода startFrameAnimation() и stopFrameAnimation(), которые будем вызывать при нажатии кнопок «Пуск» и «Стоп».

В методе startFrameAnimation() реализуем создание анимации. Надо получить кадры анимации в виде набора объектов Drawable, загрузив изображения из ресурсов. Для каждого кадра создается отдельный объект Drawable:

Созданные объекты BitmapDrawable необходимо добавить в объект AnimationDrawable методом addFrame(), который принимает два параметра: кадр анимации (объект Drawable) и продолжительность показа в миллисекундах.

Полный листинг будет следующим:

В методах я также использовал проверку на работающую анимацию (isRunning()), хотя и без этой проверки всё работало. Но мало ли что.

Результат будет тот же самый (теоретически). У меня в эмуляторе почему-то работали только первые три кадра. На форумах многие пишут, что у них выводится только первый кадр. Отсюда можно сделать вывод, что не нужно использовать программную анимацию, а использовать анимацию через XML. Статья писалась в 2012 году, возможно сейчас на эмуляторе таких проблем нет.

Изменяем прозрачность

Класс AnimationDrawable имеет метод setAlpha(), позволяющий изменять прозрачность кадров от 255 до 0. Модифицируем предыдущий пример. Добавим на форму метку и ползунок:

В коде программы добавим слушатель изменения ползунка в методе onCreate():

Анимация при загрузке приложения

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

В этом случае придётся усложнить код. Добавим новый класс:

А в основном классе из первого примера добавим строчку кода:

Теперь при запуске приложения анимация автоматически начнет проигрываться.

Также можно попробовать вызвать метод onWindowFocusChanged().

Ниже есть пример, где код вынесен в onResume().

Копирование кадров и показ в обратном порядке

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

На всякий случай предупрежу, что во всех примерах мы использовали фон: setBackgroundResource(), getBackground() и т.д. Если вы будете использовать атрибут android:src, то соответственно используйте getDrawable() и другие родственные методы.

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

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

Анимация градиентного фона

Создадим ресурсы для цветов в colors.xml.

В папке drawable создайте три файла с именами gradient_1.xml, gradient_2.xml и т.д. Содержимое будет одинаковым, только меняйте имена ресурсов и углы: 0, 255, 45.

В той же папке drawable создайте ещё один файл gradient_animation_list.xml

Присвойте корневому контейнеру идентификатор и созданный ресурс, у меня корневым макетом был FrameLayout.

Источник