Добавьте градиентную анимацию входа в Instagram в свое приложение.
Хотите добавить анимацию цветового градиента в стиле Instagram в свое приложение Flutter? Не ждите больше!
В этой статье мы реализуем красивую анимацию цветового градиента и сделаем наше приложение более привлекательным. Мы создадим простой метод Utility, который будет анимировать наш виджет с помощью этой красивой анимации градиентов.
Константы настройки
Давайте определим некоторые константы, которые мы будем использовать в анимации. Прежде всего, давайте создадим список из Color, которые будут перетасованы для получения случайных цветов.
Мы также создадим список Alignment. Эти выравнивания будут использоваться для установки ориентации градиентов. Этот список даст нам случайные значения, поэтому мы будем получать разные анимации в каждом цикле. Круто, правда? Вот код:
Запустить таймер анимации
Мы создадим Timer с пятисекундными интервалами. Каждые пять секунд мы будем обновлять пользовательский интерфейс виджета. При обновлении состояния виджета будет нарисован новый градиент, и мы увидим плавную анимацию градиента.
Мы также сохраним счетчик для интервала, он будет использоваться для правильного выравнивания градиента. Подробнее об этом в следующем разделе. Вот код:
Создать градиентный виджет
Давайте создадим виджет с состоянием, мы будем использовать AnimatedContainer в качестве базового виджета. Этот виджет будет отвечать за плавный переход от одного градиента к другому.
Внутри AnimatedContainer мы определим LinearGradient и будем использовать список цветов и список выравнивания, созданный выше. Мы только получим выравнивание друг напротив друга, это позволит нам показать симметричный градиент. Для этого мы используем значение counter, сохраненное ранее в методе Timer. Используя counter, мы рассчитаем противоположное положение выравнивания.
Давайте анимируем
Мы будем вызывать метод startBgColorAnimationTimer() в initState виджета. Это запустит таймер анимации, и мы сможем увидеть классную анимацию градиента.
Теперь вы можете настроить цвет и продолжительность таймера в соответствии с вашими требованиями и наслаждаться этой потрясающей анимацией.
Результат
Посмотрите на эту сборку веб-сайта, используя тот же код, чтобы показать градиентную анимацию:
ОБРАТНЫЙ ОТСЧЕТ
Полный код
Спасибо, и я надеюсь, что эта статья помогла вам в чем-то. Если вам нравится этот пост, пожалуйста, следите за обновлениями. Хорошего дня!
Want to connect? You can reach me on LinkedIn.
