写点什么

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

作者:坚果前端
  • 2021 年 11 月 25 日
  • 本文字数:2030 字

    阅读完需:约 7 分钟

这里是坚果前端小课堂,大家喜欢的话,可以关注我的公众号“坚果前端,”,或者加我好友,获取更多精彩内容



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


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

简单说明

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


RotationTransition(   turns: _animation,   child: /* Your widget here */}
复制代码


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


// Create a controllerlate 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.dartimport '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();  }}
复制代码

结论

您已经在不使用任何第三方软件包的情况下构建了自己的旋转动画。

发布于: 4 小时前阅读数: 5
用户头像

坚果前端

关注

此间若无火炬,我便是唯一的光 2020.10.25 加入

公众号:“坚果前端”,51CTO博客首席体验官,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。

评论

发布
暂无评论
Flutter:如何在没有插件的情况下制作旋转动画