Усильте свои iOS-приложения анимацией
Анимация — один из самых мощных способов коммуникации. От телерекламы до базовых приложений для смартфонов — они широко используются, даже если мы их не замечаем.
В настоящее время они идеально интегрированы в наши приложения, поскольку они используются разработчиками для улучшения взаимодействия с пользователем. Анимации действительно полезны как форма обратной связи, которая дает понять, что действие было распознано системой. Большим преимуществом (и недостатком) на самом деле является привлечение внимания пользователя, поэтому вы должны быть осторожны при их использовании.
В этой статье мы создадим простой и красочный интерфейс для ваших первых шагов в этом фантастическом мире.
Давайте начнем!
Есть 3 вещи, на которых нужно сосредоточиться: круги, анимация и фон.
В ZStack мы устанавливаем количество кругов, которые мы хотим отобразить на экране. В нашем случае их 50. Тогда мы говорим, что хотим, чтобы цвета кружков случайным образом перемещались в диапазоне между оттенками красного, зеленого и синего.
Из этих цветных кругов мы хотим, чтобы нижний круг был освещен верхним слоем [строка 14].
После этого мы настраиваем анимацию. Мы хотим, чтобы круги становились больше и меньше, выполняя небольшой отскок [строка 15], мы хотим, чтобы это повторялось вечно [строка 16], двигаясь с определенной скоростью [строка 17] и с определенной задержкой между одним кругом и другим [строка 18].
В остальных строках мы устанавливаем размер кругов, говоря, что мы хотим, чтобы они увеличивались в случайном диапазоне в пределах определенного пространства на экране, и это должно происходить при каждом запуске.
Переходя к фону, мы можем выбрать один из предопределенных цветов или создать новый. Давайте создадим новый, который мы назовем rouge. Мы выберем его вариацию красного, зеленого и синего [строка 5].
Мы заставим этот цвет заполнять весь экран через .ignoresSafeArea() [строки 35–38].
Теперь мы можем добавить немного расслабляющей музыки, чтобы создать прекрасную атмосферу.
Прежде всего, нам нужно добавить трек в качестве актива, и мы можем сделать это, просто перетащив его в соответствующий раздел.
Примечание.Всегда обращайте внимание на авторские права, используйте такие сайты, как Pixabay, чтобы бесплатно скачивать музыку для своего проекта.
[Строка 2, 6] Теперь мы можем импортировать AVKit и установить новую переменную, назвав ее audio.
Затем мы идем в конце ZStack и вводим onAppear, указывая, что музыка должна воспроизводиться при запуске.
[Строка 3–5] Итак, мы создаем новую переменную (song), с которой связываем название трека, как оно называется в активах, а затем устанавливаем аудиоплеер (аудио), указав песню и тип ее файла.
Готово! Поздравляем!
Вот полный код:
Также вы можете скачать проект по этой ссылке:
Наслаждаться!
