Rotation Transition 逆时针旋转颤振答案

【问题标题】：Rotation Transition to rotate anticlockwise flutterRotation Transition 逆时针旋转颤振
【发布时间】：2021-06-09 20:28:13
【问题描述】：

我有这段代码可以让图标顺时针旋转。我想让它逆时针旋转。我该怎么做？

    animationController =
    AnimationController(vsync: this, duration: Duration(seconds: 3))
      ..repeat(reverse: true);

RotationTransition(
            turns: animationController,
            child: Icon(Icons.settings_sharp),
            alignment: Alignment.center,
          )

【问题讨论】：

标签： flutter dart flutter-animation

【解决方案1】：

关于RotationTransition 小部件旋转方向由turns 属性控制。

当小部件顺时针旋转时，控制器值从 0.0 变为 1.0。

要向相反方向旋转，您需要将值从 1.0 开始。到 0.0。

为此，您可以设置 Tween：

final Tween<double> turnsTween = Tween<double>(
    begin: 1,
    end: 0,
  );

并使用您需要的任何AnimationController 为turns 属性中的这个补间动画：

child: RotationTransition(
    turns: turnsTween.animate(_controller),
    ...

要重现的示例结果和代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 4),
    vsync: this,
  )..repeat();

  final Tween<double> turnsTween = Tween<double>(
    begin: 1,
    end: 0,
  );

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RotationTransition(
          turns: turnsTween.animate(_controller),
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: FlutterLogo(size: 150.0),
          ),
        ),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

您可以添加 AnimationBuilder 和 Animation 对象并将 end Tween 属性设置为负数。

另外，您似乎试图在一个循环中完成后让小部件反向旋转？如果是这样，如果有帮助，我也添加了代码:)

例如：

 @override
  void initState() {
    _controller =
    AnimationController(vsync: this, duration: Duration(seconds: 3))
    
//To have the widget change rotation direction upon completion
..addStatusListener((status) {
      if(status == AnimationStatus.completed)
      _controller.reverse();
      if(status == AnimationStatus.dismissed){
        _controller.forward();
      }
    });


  _animTurn = Tween<double>(begin: 0.0, end: -1.0).animate(_controller);

    
    _controller.forward();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return
          RotationTransition(
            turns: _animTurn,
            child: Icon(Icons.settings_sharp,size: 100,),
            alignment: Alignment.center,
          );
        });
  }
}

【讨论】：