Flutter-旋转过渡

Flutter是一款快速开发高质量、高性能移动应用的开源框架。Flutter 提供了丰富的动画效果，其中之一就是旋转过渡。

什么是旋转过渡？

旋转过渡是一种在两个 Widget 之间旋转转换的动画效果。在 Flutter 中，旋转过渡可以通过使用 RotationTransition Widget 来实现。

RotationTransition 可以让你在子 Widget 之间进行旋转过渡并且提供可选的旋转中心和旋转角度等属性。

如何使用旋转过渡？

在 Flutter 中，使用旋转过渡非常简单：

1. 导入 RotationTransition Widget：import 'package:flutter/widgets.dart';

2. 使用 RotationTransition Widget：

RotationTransition(
      turns: Animation<double>,
      child: Widget,
 )

参数说明：

• turns：Animation 类型，这个参数是必须要传递的，它是一个动画对象，表示旋转的角度，一般使用 Tween 或者 CurvedAnimation 来创建。

• child：Widget 类型，这个参数也是必须的，它是需要执行旋转动画的 Widget。

例如，我们需要将一个 Container Widget 进行旋转，代码应该如下：

import 'package:flutter/widgets.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    animation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(controller);
    controller.forward();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RotationTransition(
          turns: animation,
          child: Container(
            height: 200,
            width: 200,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

运行结果如下图所示：

这里我们使用 RotationTransition 来将 Container Widget 进行旋转，默认旋转角度为 360 度。使用 AnimationController 和 Tween 来控制角度的变化。

总结

到此，我们已经完成了 Flutter 中使用旋转过渡的详细介绍。旋转过渡可以很好的提升我们的应用体验，而在 Flutter 中使用 RotationTransition Widget 来实现旋转过渡也是非常简单的。