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 Class

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();
  }
}

定期使色彩动起来

2 个答案: