Как да анимираме диалози при трептене? Ето отговор

Снимка на Маркус Spiske на Unsplash

Здравейте, аз съм Маюр. Това е първата статия от моя живот и в Medium също.

Анимациите дават по-добро изживяване на потребителя. Знам и може би знаете, че Flutter има страхотна поддръжка на Animations с лесна употреба. Но изчакайте, не в случая с Диалози. Диалозите на Flutter имат някои прости и предварително определени анимации.

Има много страхотни статии за започване на работа с Animations in Flutter. Но за съжаление, тя не обхваща Анимации за диалози.

Хей, не се притеснявай Пиша тази статия, за да разреша този проблем. В тази статия ще ви покажа как да анимирате диалозите във Flutter. Не само някои прости анимации, но можете да използвате всякакви или много криви от Curves.

Прост диалог

Flutter има showDialog (), за да показва основни диалози с основна анимация. След GIF показва основен диалог в Flutter.

showDialog ()

Така че, нека го оживим.

Вътрешно Flutter повиква showGeneralDialog () чрез showDialog ().

Нека се потопим в showGeneralDialog (). Ето някои параметри.

Бъдещо showGeneralDialog ({
 @required BuildContext контекст,
 @потребна страница на RoutePageBuilderBuilder,
 преграда за изпускане
 Бариерен низ
 Цветова бариераЦвят,
 Продължителност на прехода
 RouteTransitionsПреход на строителяBuilder,
})

Забележка: Всички аргументи са задължителни, в противен случай ще възникне някаква грешка.

Някои основни аргументи в showGeneralDialog са

  1. barrierDisigned -> Определя дали диалогът може да е недопустим или не.
  2. barrierColor -> Цвят на фона на диалоговия прозорец.
  3. translationDuration -> Продължителност на анимацията, когато диалоговият прозорец се появи и изчезне.
  4. prehodBuilder -> Взема RouteTransitionsBuilder Функция за изграждане, извиква се със стойности на анимация винаги, когато диалогът се нуждае от възстановяване. Изпълнението е показано по-долу.
typedef RouteTransitionsBuilder = Функция на джаджа (контекст на BuildContext, анимация анимация, анимация sekundarAnimation, Widget child);
Основният параметър на RouteTransitionsBuilder е анимацията. Можете да го използвате, за да анимирате нещата в диалогов прозорец.

Така че, нека да направим някои практики

  1. Завъртане
Завъртане
import 'package: vector_math / vector_math.dart' като математика;
showGeneralDialog (
    контекст: контекст,
    pageBuilder: (контекст, anim1, anim2) {},
    бариераДопустимо: вярно,
    barrierColor: Colors.black.wOOpacity (0.4),
    barrierLabel: '',
    prehodBuilder: (контекст, anim1, anim2, дете) {
      върнете Transform.rotate (
        ъгъл: math.radians (anim1.value * 360),
        дете: AlertDialog (
          форма:
              OutlineInputBorder (borderRadius: BorderRadius.circular (16.0)),
          заглавие: Текст („Здравей !!“),
          съдържание: Текст („Как си?“),
        ),
      );
    }
    prehodDuration: Продължителност (милисекунди: 300));

2. Завъртете с непрозрачност

Завъртете с непрозрачност
import 'package: vector_math / vector_math.dart' като математика;
showGeneralDialog (
    контекст: контекст,
    pageBuilder: (контекст, anim1, anim2) {},
    бариераДопустимо: вярно,
    barrierColor: Colors.black.wOOpacity (0.4),
    barrierLabel: '',
    prehodBuilder: (контекст, anim1, anim2, дете) {
      върнете Transform.rotate (
        ъгъл: math.radians (anim1.value * 360),
        дете: непрозрачност (
          непрозрачност: anim1.value,
          дете: AlertDialog (
            оформят:
                OutlineInputBorder (borderRadius: BorderRadius.circular (16.0)),
            заглавие: Текст („Здравей !!“),
            съдържание: Текст („Как си?“),
          ),
        ),
      );
    }
    prehodDuration: Продължителност (милисекунди: 300));
А, това са няколко прости анимации, нека да направим някоя сложна. Да използваме Curves.

3. Curves.easeInOutBack

Използване на кривата лекотаInOutBack
showGeneralDialog (
    barrierColor: Colors.black.withOpacity (0.5),
    prehodBuilder: (контекст, a1, a2, джаджа) {
      final curvedValue = Curves.easeInOutBack.transform (a1.value) - 1.0;
      връщане Преобразуване (
        трансформация: Matrix4.translationValues ​​(0.0, curvedValue * 200, 0.0),
        дете: непрозрачност (
          непрозрачност: a1. стойност,
          дете: AlertDialog (
            форма: OutlineInputBorder (
                borderRadius: BorderRadius.circular (16.0)),
            заглавие: Текст („Здравей !!“),
            съдържание: Текст („Как си?“),
          ),
        ),
      );
    }
    prehodDuration: Продължителност (милисекунди: 200),
    бариераДопустимо: вярно,
    barrierLabel: '',
    контекст: контекст,
    pageBuilder: (контекст, анимация1, анимация2) {});

4. Мащаб

мащаб
showGeneralDialog (
    barrierColor: Colors.black.withOpacity (0.5),
    prehodBuilder: (контекст, a1, a2, джаджа) {
      връщане Transform.scale (
        мащаб: a1. стойност,
        дете: непрозрачност (
          непрозрачност: a1. стойност,
          дете: AlertDialog (
            форма: OutlineInputBorder (
                borderRadius: BorderRadius.circular (16.0)),
            заглавие: Текст („Здравей !!“),
            съдържание: Текст („Как си?“),
          ),
        ),
      );
    }
    prehodDuration: Продължителност (милисекунди: 200),
    бариераДопустимо: вярно,
    barrierLabel: '',
    контекст: контекст,
    pageBuilder: (контекст, анимация1, анимация2) {});
Ако имате нужда от повече персонализиране, можете да посетите ръководството за Flutter Animations и да приложите вашата софтуерна логика за Animations. От този метод можете да използвате всяка крива, всякакъв вид анимация.
Просто трябва да играете със стойностите .

Ако ви харесва статията, просто кликнете върху . Оценете го от 50. Довиждане.