flutter如何实现animatedrotation动画

在Flutter中如何实现AnimatedRotation动画效果？我想让一个Widget在一定时间内平滑旋转到指定角度，但不太清楚具体的实现方法。能否提供一个完整的代码示例，包括如何控制旋转角度、动画持续时间和旋转方向？另外，这个动画能否和其他动画效果（如缩放或平移）同时执行？

2 回复

使用Flutter的AnimatedRotation组件，通过设置turns属性控制旋转角度（1.0表示360度），并指定duration设置动画时长。例如：

AnimatedRotation(
  turns: _turns,
  duration: Duration(seconds: 1),
  child: YourWidget(),
)

通过改变_turns值触发动画。

更多关于flutter如何实现animatedrotation动画的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，可以使用 AnimatedRotation 小部件实现旋转动画。它会在旋转角度变化时自动生成平滑的过渡动画。

基本用法：

  1. 在 StatefulWidget 中定义一个 double 类型的状态变量（例如 angle）来控制旋转角度。
  2. 使用 AnimatedRotation 包裹需要旋转的子部件，设置 turns 参数为角度（1.0 表示 360 度）。
  3. 通过 setState 更新 angle 值触发动画。

示例代码：

import 'package:flutter/material.dart';

class RotationExample extends StatefulWidget {
  @override
  _RotationExampleState createState() => _RotationExampleState();
}

class _RotationExampleState extends State<RotationExample> {
  double turns = 0.0;

  void _rotateBox() {
    setState(() {
      turns += 0.25; // 旋转 90 度
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedRotation(
              turns: turns,
              duration: Duration(seconds: 1),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _rotateBox,
              child: Text('旋转'),
            ),
          ],
        ),
      ),
    );
  }
}

参数说明：

  • turns：旋转圈数（1.0 = 360°）
  • duration：动画持续时间
  • curve：动画曲线（可选，如 Curves.easeInOut）
  • onEnd：动画结束回调（可选）
  • alignment：旋转中心点（默认 Alignment.center）

点击按钮时，方块会顺时针旋转 90 度，动画时长为 1 秒。

回到顶部