Знаете ли вы, что флаттер лучше всего подходит для кроссплатформенных мобильных анимаций? Ваш новый движок, последний из которых называется Impeller, может создавать сложную анимацию со скоростью 60 кадров в секунду (кадров в секунду), а также 3D-анимацию. Как видите, фреймворк Flutter очень хорош для анимации, и вы, начинающие флаттер, должны немного о нем знать.

Сегодня мы узнаем о явной анимации, но подождите, что это такое?

Во флаттере у нас есть два основных способа управления анимацией:

1-Неявная анимация: с неявной анимацией вы можете анимировать свойство виджета, установив целевое значение; всякий раз, когда это целевое значение изменяется, виджет анимирует свойство от старого значения к новому. Таким образом, неявные анимации обменивают управление на удобство — они управляют анимационными эффектами так, что вам не нужно этого делать.

Подробнее см. здесь: https://docs.flutter.dev/codelabs/implicit-animations

2 — Явные анимации: Ну, если все неявные анимации контролируются внутри виджета, здесь у нас больше контроля над характеристиками анимации. мы устанавливаем элемент управления, чтобы сообщать флаттеру, как быстро перестраивать дерево виджетов при изменении свойств виджета для создания анимационных эффектов. Этот подход позволяет создавать эффекты, которых невозможно добиться с помощью неявной анимации!

подробнее см. здесь: https://docs.flutter.dev/codelabs/explicit-animations

Хорошо, приступим к работе!

После создания виджета с сохранением состояния давайте создадим новую переменную с именем animationController, см. ниже:

Поздний тег означает, что эта переменная будет инициализирована буквально позже.

Теперь нам нужно инициализировать переменную, но где? В методе InitState. Он служит для инициализации всего, что вам нужно, перед загрузкой дерева виджетов на этой странице, см.:

Подождите… Что это за ошибка?

Контроллеру анимации требуется TickerProvider, а конструктор принимает обязательный параметр vsync, который должен реализовывать интерфейс TickerProvider. Как мы видим выше. Таким образом, этот первый шаг для создания явной анимации — сделать объект TickerProvider доступным для передачи в качестве аргумента vsync в AnimationController. Для этого используйте миксин с анимируемым виджетом:

Некоторые соображения:

Если вы создаете только один animationController, вы можете использовать SingleTickerProviderStateMixin. Если вам нужно создать более одного animationController, используйте TickerProviderStateMixin.

Хорошо, когда анимированный контроллер готов, давайте настроим переменные анимации. В этой статье мы собираемся сделать простую анимацию контейнера, позвольте мне объяснить вам:

1 — Контейнер перемещается вверх и вниз, когда пользователь нажимает на него.

2 - Форма контейнера изменится, когда пользователь нажмет на него.

3 - Цвет также изменится.

Давайте определим наши переменные следующим образом:

Нам нужно определить тип Animation‹typeOfdata› для работы. Не забывайте об позднем вводе ключей!

Теперь инициализируем их все:

Здесь мы используем класс Tween с двумя параметрами: begin, где мы устанавливаем начальное значение, и end для конечного значения. Это будет интерполяция между этими двумя значениями, создавая анимацию! .animate нуждается в параметре типа Animation, куда мы передаем наш контроллерAnimation, который мы инициализировали ранее. Сразу после этого мы используем каскадный оператор (..) для доступа к функции с именем addListener, которая будет прослушивать любое изменение значения наша переменная, и когда это произойдет, также будет вызван метод setState, производящий изменение состояния.

Теперь давайте просто передадим значения нашим виджетам:

Чтобы получить доступ к значениям, используйте ‹nameOfYourVariable›.value, как показано выше. Просто замените параметр widgets значениями анимации, и все должно работать! Что касается экземпляра animationController, мы можем получить доступ к методам внутри него, таким как reverse(), который обращает анимацию, или foward(), который необходимо для запуска анимации.

И, наконец, всегда удаляйте animationController в методе жизненного цикла dispose(), чтобы очистить память анимации устройства.

Результат:

Спасибо, что прочитали! =)