Как замедлить AnimationController во Flutter

Question

Я просто пробую анимацию флаттера и знаю, что контроллеру анимации нужен vsyn c (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

Поскольку addListener вызывает метод сдвига каждый раз, когда данные изменяются, поэтому мы должны контролировать себя.

В следующем коде я добавляю задержку в одну секунду для изменения цвета, вы можете играть с ожиданием и изменять все вы найдете лучшее для себя.

Следующий код поможет вам понять больше.

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 2

Раскройте свойство timeDilation и установите для него более высокое значение для замедления

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

timeDilation = 2.0;

Я наткнулся на это на StackOverFlow некоторое время назад

Answer 3

Вы можете использовать Tween, чтобы контролировать, насколько быстро вы хотите замедлить анимацию.

В приведенном ниже коде показано, как использовать Tween, который отлично работает.

Проверьте код ниже, он работает хорошо.

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

Надеюсь, это помогает.