DevGang
Авторизоваться

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.

Источник:

#Flutter
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

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

Попробовать

В подарок 100$ на счет при регистрации

Получить