如何减缓Flutter中AnimationController的速度？

Question

我只是在尝试flutter动画，我知道动画控制器需要vsync（TickerProvider），所以我使用了SingleTickerProviertateMixin。现在我想放慢下面这个动画。

class AnimatedGradientText extends StatefulWidget {

  final String data;
  final double size;

  AnimatedGradientText(this.data, {this.size});

  @override
  _AnimatedGradientTextState createState() => _AnimatedGradientTextState();
}

class _AnimatedGradientTextState extends State<AnimatedGradientText> with SingleTickerProviderStateMixin {

  List listOfColors = <Color>[
    Colors.red[200],
    Colors.blue[200],
    Colors.green[200],
    Colors.yellow[200],
//    Colors.orange[200],
//    Colors.teal[200],
//    Colors.cyan[200],
//    Colors.purple[200],
//    Colors.brown[200],
//    Colors.amber[200],
//    Colors.pink[200],
  ];
  AnimationController _controller;
  void shift(){
    Color color = listOfColors.removeAt(Random().nextInt(listOfColors.length));
    listOfColors.add(color);
  }

  @override
  void initState() {
    _controller = AnimationController(vsync: this , duration: Duration(seconds: 5),upperBound: 10,lowerBound: 0);
    _controller.forward(from: 0);
    _controller.addListener((){
      setState(() {
        shift();
      });
    });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Text(
      widget.data,
      style: TextStyle(
        fontSize: widget.size*10,
        fontFamily: 'AudioWide',
        foreground: Paint()..shader = LinearGradient(
          colors: listOfColors
        ).createShader(Rect.fromLTWH(0.0, 0.0, 200.0, 70.0)),
      ),
    );
  }
}

基本上我想实现的是一些有渐变的文本，并且随着时间的推移而改变渐变。但是动画的速度太快了，以至于它不能平滑地插值。

任何关于实现这个目标的简单方法的建议也将是有帮助的。谢谢你的时间 !

Answer 1

你可以使用一个 Tween 来控制你想要的动画速度有多慢。

下面的代码告诉你如何使用 Tween 运作得很好。

看看下面的代码，很好用。

  Tween<Int>(
    begin:0,
    end: 255,
);

希望对大家有所帮助。

Answer 2

由于addListener每次改变数据时都会调用shift方法，所以我们必须自己控制。

在下面的代码中，我添加了一秒钟的延时来改变颜色，你可以玩玩 await，改变任何你认为对你最好的东西。

下面的代码将帮助你了解更多。

class AnimatedGradientText extends StatefulWidget {
  final String data;
  final double size;

  AnimatedGradientText(this.data, {this.size});

  @override
  _AnimatedGradientTextState createState() => _AnimatedGradientTextState();
}

class _AnimatedGradientTextState extends State<AnimatedGradientText>
    with SingleTickerProviderStateMixin {
  List listOfColors = <Color>[
    Colors.red[200],
    Colors.blue[200],
    Colors.green[200],
    Colors.yellow[200],
//    Colors.orange[200],
//    Colors.teal[200],
//    Colors.cyan[200],
//    Colors.purple[200],
//    Colors.brown[200],
//    Colors.amber[200],
//    Colors.pink[200],
  ];
  AnimationController _controller;
  bool canCall = true;
  void shift() async {
    await Future.delayed(Duration(seconds: 1));
    Color color = listOfColors.removeAt(Random().nextInt(listOfColors.length));
    listOfColors.add(color);
    canCall = !canCall;
  }

  callme() {
    if (canCall) {
      canCall = !canCall;
      shift();
    }
  }

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
      upperBound: 10,
      lowerBound: 0,
    );
    _controller.forward(from: 0);
    _controller.addListener(() {
      setState(() {
        // shift();
        callme();
      });
    });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Text(
      widget.data,
      style: TextStyle(
        fontSize: widget.size * 10,
        fontFamily: 'AudioWide',
        foreground: Paint()
          ..shader = LinearGradient(colors: listOfColors)
              .createShader(Rect.fromLTWH(0.0, 0.0, 200.0, 70.0)),
      ),
    );
  }
}

Answer 3

暴露timeDilation属性，并将其设置为较高的值以减慢速度。

import 'package:flutter/scheduler.dart' show timeDilation;

timeDilation = 2.0;

前段时间我在StackOverFlow上看到了这样的内容