Выбор инженерируемых фреймворков для Flutter — решение задач с анимациями в Flutter

Эта статья является эксклюзивной публикацией сообщества Tuishe Juejin и запрещена для перепечатки в течение 14 дней, после чего также запрещена для перепечатки без специального разрешения, иначе будут приняты меры.

Сначала хочу сказать, что этот новый цикл "Выбор инженерируемых фреймворков для Flutter" не будет посвящён управлению инфраструктурой фронтенд-разработки. Этот цикл просто расскажет вам, как создать проект Flutter или скелет Flutter-приложения, выбрав подходящие плагины и модули, чтобы быстро начать работу.

Почему я решил написать такую серию? Потому что таких вопросов слишком много. Простое поисковое запрос в чате группы выдает десятки страниц результатов, поэтому цель этой серии — помочь вам выбрать различные сторонние модули для вашего проекта Flutter, сравнивая технические детали, что позволит мне в будущем отсылать людей к этим ссылкам при ответах на вопросы.

Как первая статья этого цикла, мы начнём с обсуждения анимации.Почему именно с ней? Потому что недавно я провёл исследование по теме анимации в Flutter, и совсем недавно опубликовал несколько материалов по этому поводу, поэтому материал здесь достаточно обширный. В данной статье мы рассмотрим различные сценарии использования анимаций и предложим различные фреймворки для ускоренного создания анимаций.## Введение

В предыдущих советах по Flutter мы уже говорили, что если не использовать упаковку, то создание анимации в Flutter обычно требует:

• AnimationController: для управления запуском и остановкой анимации
• TickerProvider: для создания параметра vsync, необходимого для AnimationController. Обычно используется SingleTickerProviderStateMixin.
• Animation: для обработки значений анимации, например, CurvedAnimation.
• Объект, принимающий анимацию: например, FadeTransition.

Пример такого кода приведен ниже. Мы можем назвать его явной анимацией (не стоит зацикливаться на названии). Основные характеристики такой анимации заключаются в том, что она имеет имя в виде *Transition, например, FadeTransition, SizeTransition и RotationTransition. Необходимость самостоятельно определять и управлять объектами типа AnimationController.```dart class _AnimatedOpacityState extends State with TickerProviderStateMixin { late final AnimationController _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, )..repeat(reverse: true); late final Animation _animation = CurvedAnimation( parent: _controller, curve: Curves.easeIn, ); }

@override void dispose() { _controller.dispose(); super.dispose(); }

@override Widget build(BuildContext context) { return Container( color: Colors.white, child: FadeTransition( opacity: _animation, child: const Padding(padding: EdgeInsets.all(8), child: FlutterLogo()), ), ); } ```Однако, если использовать анимацию таким образом, то в проекте будет много повторяющегося кода. Поэтому официальная библиотека Flutter предоставляет некоторые готовые решения, которые также называют неявными анимациями:> Это готовые к использованию решения, часто начинающиеся с префикса Animated*, таких как `AnimatedPositioned`, `AnimatedContainer`, `AnimatedPadding`, `AnimatedOpacity` и другие виджеты. Главной особенностью этих виджетов является полная внутренняя реализация логики, вам достаточно указать соответствующие параметры, чтобы запустить анимацию.

Как показано ниже, просто измените значения _width и _height, чтобы активировать анимацию. Промежуточные данные анимации будут получены через "интерполяцию" изменения кривых (Curves).

body: Center(
  child: AnimatedContainer(
    width: _width,
    height: _height,
    decoration: BoxDecoration(
      color: _color,
      borderRadius: _borderRadius,
    ),
    duration: Duration(seconds: 1),
    curve: Curves.fastOutSlowIn,
  ),
),

Хотя неявные анимации очень удобны, но в реальных проектах они могут не удовлетворять всем требованиям бизнес-логики. Часто требуется более гибкое или детализированное решение, что приводит нас к следующей части этой статьи.

Основные анимации

Основные анимации представляют собой дальнейшую обертку над неявными анимациями, позволяющую быстро создавать более сложные анимационные эффекты при минимальной конфигурации.

АнимацииAnimations — это официально предоставляемая библиотека анимаций, которая особенно хорошо подходит для анимации переходов между страницами в соответствии со стилем Material Design. Главное преимущество этого пакета заключается в том, что он предназначен для анимации переходов между маршрутами или страницами. Например, на нижеприведённом GIF показан пример использования OpenContainer для создания эффекта перехода между страницами в стиле Material Design.

Кроме того, можно использовать PageTransitionSwitcher, чтобы реализовать анимацию перехода между страницами, которая не основана на маршрутах. Это можно рассматривать как модифицированную версию AnimatedSwitcher или как версию с анимацией для Stack от PageView. Однако он поддерживает создание пользовательских анимаций входа и выхода, а также позволяет определять пользовательские макеты. Обычно при использовании по умолчанию метода defaultLayoutBuilder используется Stack в качестве макета.

Официальный пример также использует PageTransitionSwitcher, чтобы создать эффект перехода между страницами. Поэтому основные возможности анимации в пакете animations заключаются в анимациях перехода между страницами.

В целом, этот пакет официально поддерживается и заслуживает доверия.

simple_animations

simple_animations как следует из его названия, предназначен для упрощения процесса создания пользовательских анимаций. Как было показано ранее, при использовании анимаций в Flutter обычно требуется определение объектов AnimationController, Animatable и Animation для конфигурации анимационного эффекта.Пакет simple_animations предоставляет объект AnimationMixin. Как показано ниже, вам достаточно использовать ключевое слово with, чтобы упростить использование анимаций.

Кроме того, пакет simple_animations предлагает различные билдеры для упрощения работы с анимациями. Например, можно использовать MirrorAnimationBuilder, чтобы реализовать циклическую повторяющуюся анимацию.

Таким образом, пакет simple_animations оптимизирует и упаковывает явные анимации, позволяя более удобно и гибко контролировать анимационные эффекты, как показано на следующих изображениях. В проекте gsy_flutter_demo используется simple_animations для реализации некоторых анимационных эффектов:

• MirrorAnimation и MovieTween используются для создания плавного изменения фона
• LoopAnimation и MovieTween используются для создания анимации частиц

| | | | ---------------------------------------- | ------------------------------------------ |> Однако у этого пакета есть одна проблема: каждый крупный выпуск за последнее время содержал некоторые обратнонеполезные изменения, хотя это могло быть просто переименование или перемещение параметров. Если вы некоторое время не следили за этим, то обновление может потребовать затрат времени.## animate_do**animate_do — это легковесный пакет анимаций, который "ленивее" чем simple_animations, имеет более простой код и предлагает множество встроенных анимационных виджетов для прямого использования**.

Можно сказать, что это более богатые скрытые анимации.

Пакет animate_do использует сочетание AnimatedBuilder, Transform и Opacity. Разработчики могут использовать объекты, такие как FlipInX, FadeInDown, ElasticIn и другие для реализации различных анимаций.

Хотя animate_do очень прост, почему его рекомендуют? Потому что он действительно полезен.

Прежде всего, простота делает его легко поддерживать, даже если автор прекратил работу над ним, мы можем продолжить самостоятельно. Во-вторых, animate_do предоставляет множество готовых решений, что особенно удобно для ленивых разработчиков, особенно при работе с "более сложными" анимациями (как показано ниже).

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

Анимации интерфейсаПосле рассмотрения базовых анимаций мы предлагаем некоторые часто используемые библиотеки анимаций, поскольку многие люди задаются вопросом, где найти готовые решения.> В части анимаций интерфейса нет необходимости в подробном описании; важно, чтобы они соответствовали вашим требованиям.

Числовые анимации

Первая категория — числовые анимации. К наиболее популярным относятся flutter-animated-counter, который предлагает множество API и эффектов анимации. Подобные библиотеки также доступны, например odometer и animated_digit. Выбор конкретной библиотеки зависит от ваших потребностей.| | | |

Бегущая строка

Когда говорят об анимациях текста, нельзя не упомянуть бегущую строку. Ниже представлены популярные пакеты для реализации бегущей строки в Flutter, среди которых marquee_widget предлагает наиболее богатый набор интерфейсов.

marquee_widget	text_scroll	marquee_text

Анимация загрузки является одной из самых распространённых UI-анимаций. Если у вас нет дизайнера или вы не уверены, какой анимацией загрузки лучше всего воспользоваться, то вы можете рассмотреть следующие пакеты. Эти три пакета для анимации загрузки полностью реализованы через код и предлагают множество вариантов оформления.

flutter_spinkit	loading_animation_widget	loading_indicator

Какие преимущества имеет реализация через чистый код? Когда требуется сделать небольшие изменения в стиле, разработчику можно быстро это сделать с помощью кода. Именно поэтому мне нравится использовать анимацию, полностью реализованную через код.

Анимация руководстваАнимация руководства также является одним из часто встречающихся требований. Основная реализация обычно осуществляется с использованием Overlay, различия могут заключаться в эффектах анимации и методах позиционирования. Выбор конкретной реализации зависит от ваших потребностей.| feature_discovery | flutter_showcaseview | flutter_intro | BubbleShowcase |

| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------- | ---------------------------------------------------------- | | | | | |

Анимация спискаАнимация списка также является одной из наиболее распространённых возможностей анимации в UI. Наиболее часто используемые сторонние библиотеки для анимации списков в Flutter представлены в следующей таблице. Несмотря на наличие недостатков, они всё же могут использоваться.

flutter_staggered_animations	animation_list	transformable_list_view

3D анимация

Этот раздел может быть менее популярен среди пользователей, но именно то, что меня больше всего интересует в данный момент. Здесь представлены два сторонних пакета, которые используют матричные преобразования для создания эффекта трёхмерной графики:

• zwidget имеет ограниченные возможности и использует способность Transform.
• zflutter основан на проекте zdog из мира фронтенд-разработки и применяет матричные преобразования к пути на канвасе.

zflutter	zwidget

Конечно, эти две 3D анимации требуют более сложного подхода к использованию. Для получения более продвинутых анимационных эффектов рекомендуется обратиться к следующим рекомендациям.

Поддержка продвинутой анимации

После рассмотрения возможностей анимации для программистов, давайте представим два пакета, ориентированных на дизайнеров и обеспечивающих лучшую поддержку при создании сложных анимаций.

Lottie

Lottie должно быть знакомо всем, Airbnb — один из лучших открытых библиотек анимации. Дизайнеры могут использовать плагин AE для экспорта заранее спроектированных анимационных эффектов, после чего эти эффекты можно отрендерить с использованием возможностей платформы, таких как Canvas, чтобы воспроизвести анимацию, созданную в AE.

Преимуществом использования Lottie является то, что дизайнер может свободнее экспериментировать с более сложными анимациями, в то время как программист заботится лишь о контроле за анимацией (продолжительностью, циклом, направлением, частотой кадров и т. д.), при этом большинство анимаций являются векторными данными, поэтому размер файла Lottie остаётся относительно небольшим.> В ранние времена, поскольку Lottie сам по себе поддерживал только native платформы, на Flutter использовались внешние текстуры или PlatformView, что привело к различным проблемам производительности и совместимости. К счастью, теперь lottie-flutter поддерживает native API Dart Canvas.

Конечно, у самого Lottie есть свои недостатки, так как вашему взаимодействующему дизайнеру требуется знание программы Adobe After Effects (AE). Но к сожалению, большинство дизайнеров, которых я знаю, не знакомы с AE, и даже если они знают AE, им также нужно знать плагины совместимости Bodymovin, чтобы понимать, какие свойства можно использовать. Общая среда разработки довольно сложна.

Rive

Для Rive многие могут чувствовать некоторую незнакомость, однако те, кто работали с Flutter, возможно, уже слышали о нем. Это потому что ранее Rive назывался Flare и был открытой продукцией компании 2Dimensions, которая была рекомендована официально командой Flutter из-за глубокого сотрудничества между ними.

Rive также представляет собой фреймворк анимации, ориентированный на дизайнера, который позволяет выполнять UI-компоновку и создание анимаций в веб-редакторе, поэтому его среда разработки легче.| | | | | ------------------------------------------- | ---------------------------------------------------------- | ----------------------------------------------------------- |

Аналогично, Rive также использует экспортированные данные анимации в виде векторных файлов (также могут содержать некоторые статические ресурсы), а затем реализует эффекты анимации с помощью Canvas платформы, поэтому его размер также остаётся относительно небольшим. Кроме того, Rive также поддерживает все платформы, Android, iOS, Web, Desktop, Flutter, React, Vue, C++ и другие.

Если вы хотите более подробно узнать о Rive, можете посмотреть мою предыдущую статью "Добавление анимационного эффекта к логотипу Дживин". На самом деле, для программистов Rive очень удобен в освоении.

В настоящее время проблемой Rive является то, что второе поколение Rive несовместимо с первым поколением Flare, и переход между ними практически невозможен. Также отсутствие локализованной бесплатной среды разработки иногда создаёт проблемы.

Хорошо, это всё, что я хотел рассказать о связанных с Flutter анимациях. Если у вас есть ещё вопросы по проектам или фреймворкам Flutter, пожалуйста, оставьте свои комментарии, возможно, они послужат материалом для следующей статьи.