Flutter：如何在没有插件的情况下制作旋转动画

徐建国

发布于 2022-03-30 15:31:58

1.6K0

发布于 2022-03-30 15:31:58

文章被收录于专栏：个人路线

Flutter：如何在没有插件的情况下制作旋转动画

本文将向您展示如何使用Flutter 中内置的RotationTransition小部件创建旋转动画。

简单说明

该RotationTransition小部件用于创建一个旋转的转变。它可以采用一个子部件和一个控制该子部件旋转的动画：

RotationTransition(
   turns: _animation,
   child: /* Your widget here */
}

您可以创建一个无限旋转的动画，如下所示：

// Create a controller
late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
)..repeat(reverse: false);

// Create an animation with value of type "double"
late final Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.linear,
);

要停止动画，只需调用***stop()***方法：

_controller.stop()

要开始动画，请使用***repeat()***方法：

_controller.repeat()

为了更清楚，请参阅下面的示例。

完整示例

我们将要构建的应用程序包含一个浮动操作按钮和一个由四种不同颜色的四个圆圈组合而成的小部件。一开始，小部件会自行无限旋转。但是，您可以使用浮动按钮停止和重新启动动画。

旋转

编码

main.dart 中的完整源代码和解释：

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: '坚果前端',
        theme: ThemeData(
          primarySwatch: Colors.indigo,
        ),
        home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  // Create a controller
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: false);

  // Create an animation with value of type "double"
  late final Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.linear,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('坚果前端'),
      ),
      body: Center(
        child: RotationTransition(
          turns: _animation,
          child: Padding(
            padding: EdgeInsets.all(8.0),
            child: Container(
              child: Wrap(
                children: [
                  Container(
                    width: 150,
                    height: 150,
                    decoration: BoxDecoration(
                        color: Colors.amber, shape: BoxShape.circle),
                  ),
                  Container(
                    width: 150,
                    height: 150,
                    decoration: BoxDecoration(
                        color: Colors.green, shape: BoxShape.circle),
                  ),
                  Container(
                    width: 150,
                    height: 150,
                    decoration: BoxDecoration(
                        color: Colors.indigo, shape: BoxShape.circle),
                  ),
                  Container(
                    width: 150,
                    height: 150,
                    decoration: BoxDecoration(
                        color: Colors.red, shape: BoxShape.circle),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
      // This button is used to toggle the animation
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.moving),
        onPressed: () {
          if (_controller.isAnimating) {
            _controller.stop(); // Stop the animation
          } else {
            _controller.repeat(); // Start the animation
          }
        },
      ),
    );
  }

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