RotationTransition в Flutter
ВВ этой статье мы исследуем RotationTransition во Flutter. Мы увидим, как реализовать демонстрационную программу для создания блока RotationTransition, а также покажем анимацию отображения в ваших приложениях Flutter.
Что такое RotationTransition?
RotationTransition Widget - это виджет, который используется для анимации вращения виджета.
Конструктор по умолчанию для него будет иметь фрагмент кода, как показано ниже:
RotationTransition({
Key? key,
required Animation turns,
Alignment alignment = Alignment.center,
FilterQuality? filterQuality,
Widget? child,
});В Above Constructor все атрибуты, отмеченные @requuired, не должны быть пустыми, поэтому в этом конструкторе turns не должны быть пустыми.
Свойства
Вот некоторые свойства RotationTransition:
1: -key: этот ключ атрибута управляет тем, как один виджет заменяет другой виджет в дереве.
2: -turns: этот атрибут имеет тип данных Animation, который используется для управления вращением дочернего элемента.
3: - alignment: этот атрибут используется для определения выравнивания начала координат системы координат, вокруг которой происходит вращение, относительно размера блока.
4: - child: Этот атрибут используется для определения виджета под этим виджетом в дереве.
Как объявить Animation для RotationTransition: -
Во-первых, нам нужно расширить TickerProviderStateMixin.
extends State<Rotation> with TickerProviderStateMixin{
После этого мы должны объявить переменные
late AnimationController _controller;
late Animation<double> _animation;
И затем мы должны инициализировать эту переменную в initState ()
void initState() {
// TODO: implement initState
super.initState();
_controller=AnimationController(vsync:this,duration: Duration(seconds: 10));
_animation=CurvedAnimation(parent: _controller, curve: Curves.easeIn,);
_controller.repeat();
}
После инициализации мы должны избавиться от контроллера анимации, потому что это снижает вероятность утечек. При использовании с StatefulWidget обычно AnimationController создается в State. initState, а затем удаляется в State.
void dispose() {
_controller.dispose();
// TODO: implement dispose
super.dispose();
}
Как использовать виджет RotationTransition во Flutter?
Следующий код покажет вам, как использовать виджет RotationTransition.
class _RotationState extends State<Rotation> with TickerProviderStateMixin{
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller=AnimationController(vsync:this,duration: Duration(seconds: 10));
_animation=CurvedAnimation(parent: _controller, curve: Curves.easeIn,);
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
// TODO: implement dispose
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
RotationTransition(turns: turnsTween.animate(_controller),,
child: Center(child: Image.network('assets/img/squarebox.png',height: 200,width: 200,))),
],
),
),
);
}
}
В этом конструкторе RotationTransition преобразован как параметр, который принимает анимацию в качестве значения, а в анимации мы можем использовать несколько кривых, таких как easyIn, easy, bounceIn, bounceInOut, bounceOut, decelerate, easyInCubic и многие другие типы.
_controller=AnimationController(vsync:this,duration: Duration(seconds: 10));
_animation=CurvedAnimation(parent: _controller, curve: Curves.easeIn,);
Просто измениd кривые, вы можете увидеть несколько типов и по продолжительности, вы можете решить, сколько времени будет работать анимация. Когда мы запускаем приложение, мы должны получить вывод на экран, как на снимке экрана внизу.
Переход вращения для вращения флаттера против часовой стрелки:
Когда виджет вращается по часовой стрелке, значение контроллера изменяется от 0,0 до 1,0. Чтобы повернуть в обратном направлении, вам нужно значение от 1.0. до 0,0. Для этого вы можете настроить Tween:
final Tween<double> turnsTween = Tween<double>(
begin: 1,
end: 0,
);
Мы должны объявить Tween, который предоставит нам начальное и конечное значение
RotationTransition(turns: turnsTween.animate(_controller),,
child: Center(child: Image.network('assets/img/squarebox.png',height: 200,width: 200,))),
Когда мы запускаем приложение, мы должны получить изображение на экране, подобное видео под экраном.
Вывод:
В этой статье мы обсудили, как используется RotationTransition, какие параметры вы можете использовать для настройки его отображения, а также он предоставляет множество функций для настройки виджета.
Я объяснил базовую структуру RotationTransition на Flutter; вы можете изменить этот код по своему усмотрению. Это было небольшое введение в RotationTransition при взаимодействии с пользователем с моей стороны, и он работает с использованием Flutter.
