Как анимировать состояния кнопок в ButtonStyle
В предыдущей статье мы использовали принципы неоморфного дизайна для создания аудиоплеера. Для ознакомления с цветами, использованными в этом уроке, проверьте эту статью.
Добавьте нейроморфные цвета в свои активы и создайте структуру для трех цветов перед началом этого урока.
Фон кнопки
Начиная с фона кнопки, добавьте прямоугольники со скругленными углами для формы кнопки, верхний темный край, нижний светлый край и темную внутреннюю тень.
Используйте stroke() для прямоугольников со скругленными углами для наших ободков и теней.
Затем добавьте blur() к внутренней темной тени, затем добавьте маски к внутренней тени и краям, чтобы сделать их края более четкими.
В ZStack добавьте два модификатора shadow() для создания внешнего света и темных теней. Края и внутренняя тень заставят наш вид казаться вдавленным (вогнутым), а внешние тени сделают его приподнятым (выпуклым).
Далее нам нужно, чтобы внешняя тень отображалась всякий раз, когда кнопка не нажата, и наоборот.
Для этого мы можем добавить opacity() ко всем цветам всех теней и краев. Передайте внешней тени их значение непрозрачности и передайте значения, противоположные этим значениям, краям и внутренним теням.
Значения отправляются из стиля кнопки, который мы собираемся создать далее. Проверьте приведенный ниже код для разрешения:
Стиль кнопки
Внутри нашего ButtonStyle получите текст конфигурации и добавьте фон, созданный выше, к метке.
Анимированными значениями будут непрозрачность, масштаб кнопки, а также радиус и положение внешней тени.
В .onChange() проверяем, нажата ли кнопка и меняем значения всех наших переменных состояния. Проверьте код ниже:
Пользовательская кнопка
Сделайте цвет фона вашего представления цветом нашей неоморфной кнопки. Наконец, добавьте стиль кнопки, который мы создали, в представление кнопки и запустите приложение.
Спасибо за прочтение!
