Rotation Transition 逆时针旋转颤动

Question

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

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

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

Answer 1

您可以添加一个 AnimationBuilder 和 Animation 对象并将结束 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,
          );
        });
  }
}

Answer 2

关于RotationTransition小部件旋转方向由turns属性操纵。

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

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

为此，您可以设置 Tween：

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

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

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),
          ),
        ),
      ),
    );
  }
}

Rotation Transition 逆时针旋转颤动

Rotation Transition to rotate anticlockwise flutter

dart

flutter

flutter-animation