旋转过渡以逆时针旋转颤动

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

关于小部件的旋转方向由TurnsRotationTransition属性控制。

当小部件顺时针旋转时，控制器值从 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),
          ),
        ),
      ),
    );
  }
}