Создаем анимацию «Восход солнца»
Статичный контент не очень интересен. Гораздо интереснее создавать различные анимационные эффекты, которые привлекут внимание пользователя.
В Android доступны несколько видов анимации, которым отведён отдельный раздел Анимация. Мы рассмотрим один из видов для ознакомления.
В этом уроке мы будем использовать анимацию из фигур, создав иллюзию восхода солнца. Также добавим анимацию аналоговых часов. Будет интересно!
Создадим новый проект под названием «Sunrise» (Восход солнца).
Пусть всегда будет солнце
Сначала нарисуем солнце. Создадим новую папку drawable в папке res (если такой папки нет). Далее в созданной папке создадим новый файл sun.xml следующего содержания:
Для изображения солнца мы использовали фигуру Овал с одинаковыми размерами, чтобы получить «солнечный круг». Чтобы рисунок солнца получился красивым, применим к нему градиент (плавное изменение цвета) от тёмно-жёлтого к светло-жёлтому.
Пусть всегда будет небо
Далее нарисуем «небо вокруг». В той же папке drawable создадим новый файл sky.xml следующего содержания:
Мы задали фигуру в виде прямоугольника с голубым градиентом от нижнего края к верхнему.
Трын-трава
Мальчишка нарисовал солнце, небо и подписал в уголке четыре строчки опять про солнце, небо, а также про маму и про себя. А про кота он совсем забыл. Ладно, не будем обращать внимания на глупого мальчика, а обратимся к другой песне, где зайцы косили (. ) трын-траву. Видимо у автора неплохая травка была. Но слов из песни не выкинешь — нарисуем траву. Создаём файл grass.xml в уже знакомой папке:
Особо изощряться не будем, а нарисуем зелёный прямоугольник с градиентом, тем более я не знаю, как выглядит трава, скошенная зайцами.
Собираем фигуры вместе
Настало время собирать камни, простите, фигуры. Для начала откроем файл strings.xml в папке res/values и добавим несколько строковых ресурсов:
Откроем разметку главной активности activity_main.xml и добавим в неё несколько элементов ImageView:
У всех элементов 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).
Добавим анимацию в код:
— А где коты? — завопил мой кот Рыжик, внимательно следивший за созданием проекта. Ладно, добавим кота.
Как добавлять котов, объяснять не буду. Сами сообразите.
Запускаем проект и наблюдаем за анимацией. Получилось красиво, мне нравится.
Простите за качество видео. Снимал с рук с телефона на мониторе. И кот дёргал за руку, грозно спрашивая, где коты?
Источник
GIF изображения солнца. Восходы, закаты, пейзажи, солнце в космосе
Наша планета Земля находится внутри солнечной системы, названной в честь единственной звезды. Солнце это главный источник тепла и света на Земле, источник жизни и божество во многих культурах мира. Эта звезда обладает невероятной красотой и мощью. Только посмотрите на наши гифки солнца. Более 100 анимированных изображений. Используйте их для ваших уникальных поздравительных открыток, для графического дизайна и других целей. Скачайте бесплатно!
Анимированные GIF изображения Солнца
Красивое солнце на закате и в воде
Очень горячий огненный шар идеальной формы
Комическая ситуация. Солнце в солнцезащитных очках
Красивое тропическое солнце
Солнце над морем рядом с крупным городом
Немного солнечного блеска
Солнце в виде огненного шара
Голубое небо позади простого Солнца
Огромный город во время заката
Вот что происходит во время вспышки на Солнце. Раскалённая плазма выплёскивается наружу
Солнце подмигивает вам через отверстие в скале
Рассвет или закат, очень красивый вид на море. Одинокий корабль
Солнце вращается вокруг своей оси
Простое солнце, немного размытое снизу
Яркое солнце встаёт над голубым морем. Отличный шаблон для поздравительной открытки
Синее мрачное солнце
Солнце скрыто за редкими облаками над спокойной водой
Демоническое солнце и некое существо с крыльями
Пёс в солнцезащитных очках изображён на солнце
Прекрасный рассвет на море
Солнце прячется в скалах
Красивый мрачный закат
Облака вращаются вокруг солнца
Бескрайнее море под солнцем
Красивый розовый рассвет над морем
Солнце скрывается под облаками, очень красивый закат
Анимированное изображение улыбающегося солнца в высоком разрешении
Солнце поднимается над лесом и озером
Закат крупным планом
Ежик Соник летит к солнцу
Волнующееся море и солнце, наполовину погрузившееся в него
Скоро здесь будет вспышка. Нестабильное магнитное поле
Сумасшедшее солнце высунуло язычок
Красивый пиксельный пейзаж. Двигающаяся вода и неподвижное солнце
Солнце тонет в черной воде
Вот как ведёт себя магнитное поле во время вспышки на солнце
Этот красный шар обладает огромной энергией
Солнце между границами пространства
Солнце в желтом цвете
Солнце освещает спокойную воду
Настоящие кадры наблюдения за солнцем
Желтое солнце с разных ракурсов
Полосатое солнце погружается в красное море
Солнце медленно поднимается над морем
Закат в Берлине
Солнце, запечатленное с огромным приближением
Апельсин в бескрайнем космосе
Итальянское солнце выглядит так
Солнце над облаками
Вот так земля вращается вокруг солнца
Милое детское солнце на прозрачном фоне
Меркурий на фоне солнца
Анимированный рисунок солнца на белом фоне
Солнце скрывается в море
Весёлое солнце крутится и смеётся
Солнце исчезает в пространстве
Солнечные лучи прорываются через облака
Солнце источает тепло, ультрафиолет и радиацию
Ещё одна вспышка на солнце
Красное солнце оставляет блики на воде
Квадратная Земля вращается вокруг квадратного Солнца
Вот что будет если посмотреть на Солнце через воду
Полное солнечное затмение
Доброе солнце надевает шляпу, но ему не нравится это
Вода, освещённая последними лучами солнца на сегодня
Беспощадное солнце с лицом
Солнце поднимается и опускается
Солнце опустилось на землю и осветило лес
Злое солнце из мультфильма
Земля и луна вращаются вокруг Солнца
Прямо как на пляжном курорте
Растения заслоняют солнце
Красное солнце и белые лепестки света
Вертикальная GIF анимация. Солнце над тропическим пляжем и пальмой
Облака пролетают мимо, но солнце остаётся тем же
Похоже, Солнце стало нестабильным
Румяное солнце улыбается
Полёт к солнцу над облаками
Красный солнечный шар на прозрачном фоне
Солнце в ладони
Солнце с человеческим лицом на прозрачном фоне
Только солнечное отражение в воде
GIF изображение из мультфильма аниме. Девушка смотрит на волшебное солнце
Планета пролетает перед солнцем
Солнце виднеется сквозь жалюзи
Солнце улыбается и качается из стороны в сторону
Малыш в образе солнца
Зелёный огонёк вращается вокруг солнца
Солнце во время затмения
Солнечный ветер появляется так
Несколько уровней солнечных лучей
Солнце засыпает и бодрствует, но свет остаётся тем же
Приветливое солнце к вашим услугам
Не забывайте надевать солнечную шляпу
Милое солнце для детских мероприятий
Самый простой рисунок солнца с лицом
Солнце пытается избавиться от прилипшего облака
Источник