在颤动中定期为颜色设置动画

Question

我有一个容器小部件，我尝试从 Colors.blue 到 Colors.blueGrey 设置动画，然后每隔 2 秒定期返回。

如何在 Flutter 中最轻松地解决这个问题？

Answer 1

您可以使用无限 while 循环，不要认为这是执行此操作的最佳方法，但它可以完成工作。

我有一个变色课

class ColorChanger extends StatefulWidget {


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

class _ColorChangerState extends State<ColorChanger>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _colorTween;

  @override
  void initState() {
    _animationController = AnimationController(
        vsync: this, duration: Duration(milliseconds: 1999));
    _colorTween = ColorTween(begin: Colors.blue, end: Colors.blueGrey)
        .animate(_animationController);
    changeColors();
    super.initState();
  }

  Future changeColors() async {
    while (true) {
      await new Future.delayed(const Duration(seconds: 2), () {
        if (_animationController.status == AnimationStatus.completed) {
          _animationController.reverse();
        } else {
          _animationController.forward();
        }
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _colorTween,
      builder: (context, child) => Container(
            color: _colorTween.value,
          ),
    );
  }
}

这是一个粗略的例子，但应该会引导你走向正确的方向。

请参阅ColorTween 类

Answer 2

我建议使用AnimatedContainer。此小部件允许您使用特定属性（如颜色）构建它，当您使用不同的值构建它时，它会在这些值之间执行线性插值。

@override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      width: 100,
      height: 100,
      duration: _animationDuration,
      color: _color,
    );
  }

然后你只需要用不同的颜色重建小部件：

void _changeColor() {
    final newColor = _color == Colors.blue ? Colors.blueGrey : Colors.blue;
    setState(() {
      _color = newColor;
    });
  }

定期制作它我会使用一个计时器类：

_timer = Timer.periodic(_animationDuration, (timer) => _changeColor());

整个代码：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class AnimationTest extends StatefulWidget {
  @override
  _AnimationTestState createState() => _AnimationTestState();
}

class _AnimationTestState extends State<AnimationTest> {
  final _animationDuration = Duration(seconds: 2);
  Timer _timer;
  Color _color;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(_animationDuration, (timer) => _changeColor());
    _color = Colors.blue;
  }

  void _changeColor() {
    final newColor = _color == Colors.blue ? Colors.blueGrey : Colors.blue;
    setState(() {
      _color = newColor;
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      width: 100,
      height: 100,
      duration: _animationDuration,
      color: _color,
    );
  }

  @override
  void dispose() {
    super.dispose();
    _timer.cancel();
  }
}