Источник: Nuances of Programming
Я покажу вам 6 прикольных анимационных эффектов, которые можно попробовать в своих приложениях. Добавлять анимацию с Flutter — одно удовольствие. И делать это можно по-разному. Например, можно скачать пакет с dart pub или воспользоваться виджетом AnimatedBuilder, который позволяет настроить каждую деталь анимации.
В этой статье я буду работать с виджетом AnimatedBuilder. Если вы не знакомы с ним, то почитайте документацию. Раз мы решили поработать с AnimatedBuilder, то нам потребуются два дополнительных виджета:
1. AnimationController — задает длительность анимации;
2. Animation — определяет тип и стиль анимации.
Проще говоря, эти виджеты используются для настройки и обработки анимации. Не забудьте протестировать анимацию в виджете изменяемых состояний StatefulWidget. А в определение класса обязательно добавьте SingleTickerProviderStateMixin. Он нужен для управления временем в анимации.
Готовы начать? Поехали.
Базовый макет
Я создал базовый макет, на котором вы можете потренироваться в настройке и переключении анимации. Выглядит он вот так:
В процессе работы мы будем пользоваться разными изображениями. Вы можете добавить свои изображения или другие виджеты.
Триггером для анимации у нас служит плавающая кнопка снизу. Я буду активировать анимацию через вызов _controller.forward().
Не пугайтесь кода ниже. Пользуйтесь им для настройки контроллера и виджета анимации.
Теперь я познакомлю вас с разными типами анимации в двух блоках кода — для определения и использования анимации. Все очень просто: сначала выбираете понравившийся тип анимации, а затем копируете и вставляете два блока кода. Первый нужен для запуска контроллера, а второй — для работы с анимацией.
01. Появление/исчезновение
Воспользуйтесь кодом ниже для определения анимации. Лучше всего это делать через метод initState. Теперь он будет запускаться только при отображении StatefulWidget.
Во Flutter уже есть встроенный виджет под названием FadeTransition. Таким образом, мы можем обернуть наш виджет-контейнер в FadeTransition, а затем настроить динамические значения для непрозрачности.
02. Изменение размера/пульсация
Это тоже простая разновидность анимации. Для начала, зададим нужные параметры.
Возможно, сейчас вы заметите что-то новое. Например, мы используем _controller.addStatusListener() каждый раз, когда хотим повторить анимацию. После определения анимации в AnimationController она готова к использованию в виджете-контейнере.
03. Скольжение
Slide-анимация — это еще одна встроенная функция Flutter. Вот, как ее можно определить.
Чтобы воспользоваться анимацией, оберните ее в виджет SlideTransition. Проще простого, не так ли?
04. Прыгающая анимация
Еще одна забавная разновидность, которую можно попробовать. Во многом она похожа на анимацию пульсации. Только помните, что в этот раз нам нужно будет изменить отступы контейнера. Давайте определим параметры.
Будьте осторожны — мы играем с огнем. Если я выставлю граничное значение 0.0, то появится ошибка. Для тех, кто уже работал с Flutter, это совсем не новость. Да, перед вами — ошибка переполнения, она же — overflow error. Мы не можем быть уверенными в том, что значения в этих границах будут меняться. Особенно в случае, если эффект анимации (эластичный) выйдет за пределы границ. Запомните, что отступы не могут иметь отрицательного значения.
Теперь, когда мы настроили все необходимые параметры, самое время воспользоваться анимацией.
3D-переворот
Flip-анимация — это простой и прикольный эффект, который легко добавить в приложение. (Одна из моих любимых анимаций). Давайте посмотрим, как все реализовать.
Здесь появляется кое-что новенькое — AnimationStatus. Им я пользовался для реализации прямых и обратных функций. Этот дополнительный виджет помогает мне получить текущий статус анимации.
Тут я воспользовался простым контейнером, чтобы показать flip-анимацию в действии.
06. Вращение с падением
Перейдем к более сложным примерам. Здесь я объединил сразу несколько эффектов. Мы называем это последовательностью анимации. Посмотрите, как можно определить анимацию врещения.
Обратите внимание, что при определении анимации мы пользуемся 3 отдельными виджетами Animation. И для всех них берется один AnimationController. А еще я передавал разные значения для каждого виджета Interval. Именно так и задается последовательность анимации.
Теперь давайте посмотрим, как работает последовательность анимации:
Все правильно! Нам нужен еще один виджет –AnimatedBuilder. Затем мы можем поменять значения контейнера. В этом примере я изменял отступы (для смены положения объекта) и непрозрачность.
Примеры анимации можно посмотреть на Github
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи Sahan Amarsha: Cool Flutter Animations That You Can Try