Анимационный сериал Flutter (Анимированное выравнивание)
Я получил большую благодарность от читателей за свои прошлые истории, которые я разместил на Medium on Flutter. Я писал в основном о наиболее часто используемых виджетах для создания приложения Flutter. Если у вас есть базовые знания об этих виджетах, то любому станет проще начать создавать потрясающее приложение в Futter.
Теперь у Flutter есть и анимация: с помощью анимированных виджетов вы можете создавать отличные веселые анимации в своем приложении.
Что такое виджет Animated Align?
Виджет Animated Align автоматически перемещает дочерние элементы из одной позиции в другую в течение заданного времени.
Пройдемся по конструктору…
AnimatedAlign( alignment: Alignment.right, curve: Curves.easeInCirc, heightFactor: 0.0, widthFactor: 0.0, duration: Duration(seconds: 3), child: ),
В конструкторе немногое, кроме 3 важных свойств, которые заставляют работать всю анимацию.
- выравнивание: - там, где изначально размещается дочерний виджет.
- curve: - доступен 41 тип опций.
- duration: - время, необходимое для изменения выравнивания.
Итак, что я собираюсь сделать, так это поместить часть моего кода ниже и несколько гифок, также показывающих, как по-разному работает свойство curve. Вам просто нужно будет самостоятельно оформить изображения, и их несложно найти в Интернете. Я сделал простой макет, в котором злая птица пытается поймать свинью, и обе они удаляются от своей позиции в соответствии со свойством кривой, установленным при нажатии кнопки запуска.
class AnimatedAlignWidget extends StatefulWidget {
@override
_AnimatedAlignWidgetState createState() => _AnimatedAlignWidgetState();
}
class _AnimatedAlignWidgetState extends State<AnimatedAlignWidget> {
AlignmentGeometry _alignment = Alignment.topRight;
AlignmentGeometry _geometry = Alignment.bottomLeft;
void _changeAlignment() {
setState(() {
_alignment = _alignment == Alignment.topRight
? Alignment.bottomLeft
: Alignment.topRight;
_geometry = _alignment == Alignment.topRight
? Alignment.bottomLeft
: Alignment.topRight;
});
}
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/angryback.png'),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 50, horizontal: 50),
child: Stack(
children: [
AnimatedAlign(
alignment: _alignment,
curve: Curves.easeInOutBack,
duration: Duration(seconds: 3),
child: Image.asset(
'images/redbird.png',
height: 75,
width: 75,
),
),
AnimatedAlign(
alignment: _geometry,
curve: Curves.easeInCirc,
duration: Duration(seconds: 3),
child: Image.asset(
'images/greenpig.png',
height: 75,
width: 75,
),
),
Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(primary: Colors.black),
onPressed: () => _changeAlignment(),
child: Text('START'),
),
)
],
),
),
);
}
}
Эта конкретная статья довольно короткая, чем те, что я писал раньше, но писать в любом случае было не о чем. Только если бы я объединил его с другими анимированными виджетами, это было бы долго, но я начал серию анимированных виджетов, поэтому я буду публиковать каждый из них один за другим. Он будет коротким, но со всеми деталями, которые должны быть там, а также с рабочим кодом, с которым можно поиграть.
Оставив ниже ссылки на мои предыдущие истории и мои социальные связи. Продолжайте читать, продолжайте кодировать и наслаждайтесь. Будьте в безопасности и позаботьтесь о себе до следующего раза…
Ссылки на мои предыдущие истории Виджет SafeArea, Расширенный и гибкий, Виджет контейнера, Строка и столбец, Сгруппировать и расположить, Ящики Часть-1, Ящики Часть-2, TabBar & TabBarView, GridView, Кнопки, Виджет скаффолда.
Вы можете подписаться на меня… в Instagram, Twitter, Linkedin, Reddit.
