如何减慢 Flutter 中的 AnimationController答案

【问题标题】：How to slow down AnimationController in Flutter如何减慢 Flutter 中的 AnimationController
【发布时间】：2020-08-20 00:29:19
【问题描述】：

我只是在尝试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)),
      ),
    );
  }
}

基本上，我想要实现的是一些具有渐变的文本，并且随着时间的推移会改变渐变。但是动画太快了，插值不流畅。

任何有关实现此目的的更简单方法的建议也会有所帮助。感谢您的宝贵时间！

【问题讨论】：

您是否尝试过更改duration: Duration(seconds: 5)？

标签： flutter dart flutter-animation

【解决方案1】：

公开 timeDilation 属性并将其设置为更高的值以降低速度

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

timeDilation = 2.0;

前段时间我在 StackOverFlow 上遇到过这个

【讨论】：

【解决方案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)),
      ),
    );
  }
}

【讨论】：

【解决方案3】：

您可以使用Tween 来控制您想要动画的速度。

下面的代码向您展示了如何使用运行良好的Tween。

检查下面的代码，它运行良好。

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

我希望这会有所帮助。

【讨论】：