Анонс EzAnimation

Упростите анимацию во Flutter!

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

Пакет: https://pub.dev/packages/ezanimation

Текущая ситуация

Давайте сначала посмотрим на обычную анимацию Flutter, которая анимирует квадрат от 0 до 100,0, чтобы установить проблему:

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
    animation = Tween(begin: 0.0, end: 100.0).animate(_controller);

    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: animation,
          builder: (context, snapshot) {
            return Container(
              color: Colors.blue,
              width: animation.value,
              height: animation.value,
            );
          },
        ),
      ),
    );
  }
}

Создание явной анимации сопряжено с когнитивными издержками, потому что для совместной работы требуется много вещей. У разработчиков есть вопросы и отзывы, например:

1. Что такое SingleTickerProviderStateMixin?
2. Почему контроллеры и анимация разделены?
3. Создать изогнутую анимацию сложно
4. Создать последовательность непросто

Представляем EzAnimation

Вот простейшая возможная анимация с использованием EzAnimation, выполняющая то же самое, что и выше:

Определять

var animation = EzAnimation(0.0, 100.0, Duration(seconds: 1));

Начинать:

animation.start();

Наблюдать:

AnimatedBuilder(
  animation: animation,
  builder: (context, snapshot) {
    return Container(
      color: Colors.blue,
      width: animation.value,
      height: animation.value,
    );
  },
),

Здесь не требуется тикер, здесь не требуется AnimationController, здесь не требуется Tween, и очень легко задать кривую для анимации, как будет показано позже. (Обратите внимание, что это не самый эффективный тип анимации, подробнее об этом позже.)

Полный код этого эквивалента показанного в первом разделе:

class _MyHomePageState extends State<MyHomePage> {
  var animation = EzAnimation(0.0, 100.0, Duration(seconds: 1));

  @override
  void initState() {
    super.initState();
    animation.start();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: animation,
          builder: (context, snapshot) {
            return Container(
              color: Colors.blue,
              width: animation.value,
              height: animation.value,
            );
          },
        ),
      ),
    );
  }
}

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

Погружаясь глубже

Давайте посмотрим на все функции и лучшие практики, связанные с использованием EzAnimation.

Декларация

Метод 1. Простой

var animation = EzAnimation(0.0, 100.0, Duration(seconds: 1));

Это легко определить, и он не зависит от TickerProviderStateMixin, однако его нужно останавливать вручную при переходе, поскольку в противном случае анимация завершается независимо (Спасибо Реми Русселе за указание на проблему).

Метод 2: контекст

var animation = EzAnimation(0.0, 100.0, Duration(seconds: 1), context: context);

Передача BuildContext дает возможность выбрать, что делать, когда вы уходите. По умолчанию он останавливает и сбрасывает анимацию. Вы также можете изменить это, передав значение OnNavigate:

var animation = EzAnimation(0.0, 100.0, Duration(seconds: 1), context: context, onNavigate: OnNavigate.pauseAnimation);

Это определяет поведение анимации при уходе. Обратите внимание, что когда анимация приостановлена, ее необходимо перезапустить вручную.

Метод 3: Vsync

Вы также можете напрямую передать параметр vsync, который заботится о вашей анимации, как обычная анимация:

var animation = EzAnimation(0.0, 100.0, Duration(seconds: 1), vsync: this);

Обратите внимание, что в этом случае вам нужно будет добавить TickerProviderStateMixin в свое состояние. Кроме того, onNavigate не работает с vsync, так как навигатор позаботится об анимации за вас.

Использование CurvedAnimations

С EzAnimation легко добавить кривую к анимации:

var animation = EzAnimation(0.0, 100.0, Duration(seconds: 1), curve: Curves.bounceInOut);

Вы также можете добавить обратную кривую с помощью:

var animation = EzAnimation(0.0, 100.0, Duration(seconds: 1), curve: Curves.bounceInOut, reverseCurve: Curves.easeInOut);

Создание анимационной последовательности

Если анимация должна состоять из нескольких этапов, вы можете использовать EzAnimation.sequence () следующим образом:

var animation = EzAnimation.sequence([
  SequenceItem(0.0, 100.0),
  SequenceItem(100.0, 50.0, weight: 2.0),
], Duration(seconds: 1));

Вы можете передать SequenceItem, а также веса: здесь анимация изменяется от 0 до 100 в 1/3 времени, а затем обратно до 50 в 2/3.

Использование настраиваемой анимации движения

Когда вам нужно использовать что-то вроде ColorTween, вы можете использовать EzAnimation.tween () для создания собственного Tween:

var animation = EzAnimation.tween(ColorTween(begin: Colors.red, end: Colors.blue), Duration(seconds: 1));

Использование пользовательской TweenSequence

Точно так же вы также можете указать свою собственную TweenSequence с помощью EzAnimation.tweenSequence (), например:

var animation = EzAnimation.tweenSequence(TweenSequence([
  TweenSequenceItem(tween: ColorTween(begin: Colors.red, end: Colors.blue), weight: 1.0),
  TweenSequenceItem(tween: ColorTween(begin: Colors.blue, end: Colors.red), weight: 1.0),
]), Duration(seconds: 3));

Смотря вперед

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

Получите пакет по адресу:

Если вы хотите внести свой вклад в код:

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

Вот и все для этой статьи! Надеюсь, вам понравилось, и если да, то оставлю пару аплодисментов. Следуйте за мной, чтобы увидеть больше статей о Flutter и комментировать любые отзывы об этой статье.

Некоторые из моих других статей:

Другие мои профили

Твиттер