使用 flutter_redux 翻转动画

Question

我有一个时间显示应用程序，每次时间更改时都会更改时间。我真的很想知道如何为数字添加“文本翻转”动画。当应用程序启动时，数字立即翻转到位，但每次发生变化时都无法翻转。这是我的代码：

/// Flutter Packages
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';


class ListTimeWidget extends StatefulWidget { ... }


class _ListTimeWidgetState extends State<ListTimeWidget> with SingleTickerProviderStateMixin {

  Animation<double> _animation;
  AnimationController _controller;

  /// Methods
  String _selectCorrectTime(Store<DateTime> store) {
    Map<String, int> timeDelta = {
      'years': store.state.year,
      'months': store.state.month,
      'days': store.state.day,
      'hours': store.state.hour,
      'minutes': store.state.minute,
    };

    if (timeDelta.containsKey(widget.timeUnit))
      return timeDelta[widget.timeUnit].toString().padLeft(2, '0');
    else
      return '##';
  }

  /// Widgets
  @override
  void initState() {
    super.initState();

    this._controller = new AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    this._animation = new Tween(
        begin: 0.0,
        end: 1.0,
    ).animate(this._controller);

  }

  @override
  Widget build(BuildContext context) {
    return new AnimatedBuilder(
        animation: this._animation,

        builder: (BuildContext context, Widget child) {
          final Matrix4 transform = new Matrix4.identity()
            ..scale(1.0, this._animation.value, 1.0);

          return new Transform(
            transform: transform,
            alignment: FractionalOffset.center,
            child: child,
          );
        },

        child: new StoreConnector<DateTime, String>(
          converter: (store) => this._selectCorrectTime(store),
          builder: (context, time) {
            this._controller.forward();
            return new Text(
              time,
              textAlign: TextAlign.left,
              style: new TextStyle(fontSize: 100.0),
            );
            },
        )

    );
  }

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

我得到的结果是一开始的动画，当数字从屏幕外重新出现时，而不是在时间改变时：

我是 Flutter 动画的新手，任何建议都会有所帮助。

Answer 1

我已经想出了如何结合flutter_redux来完成一个定时动画。通过将StoreConnector 拆分为它自己的Stateless Widget，以及它自己的Stateful Widget 中的动画，forward 方法不再引发问题。

这是我的示例代码：

/// Flutter Packages
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';

/// Dart Packages
import 'dart:async';

class ListTimeWidget extends StatelessWidget {
  /// Attributes
  final String timeUnit;

  /// Constructors
  const ListTimeWidget({
    this.timeUnit,
  });

  /// Methods
  String _selectCorrectTime(Store<DateTime> store) {
    Map<String, int> timeDelta = {
      'years': store.state.year,
      'months': store.state.month,
      'days': store.state.day,
      'hours': store.state.hour,
      'minutes': store.state.minute,
    };

    if (timeDelta.containsKey(this.timeUnit))
      return timeDelta[this.timeUnit].toString().padLeft(2, '0');
    else
      return '##';
  }

  @override
  Widget build(BuildContext context) =>
      new StoreConnector<DateTime, String>(
          converter: (store) => this._selectCorrectTime(store),
          builder: (context, time) => new ListTimeWidgetAnimation(amountOfTime: time),
      );
}

class ListTimeWidgetAnimation extends StatefulWidget { ... }


class _ListTimeWidgetAnimationState extends State<ListTimeWidgetAnimation> with SingleTickerProviderStateMixin {

  /// Attributes
  Animation<double> _animation;
  AnimationController _controller;
  String _currentTime;

  /// Methods
  Future<Null> _changeTimeAnimation() async {
    await this._controller.reverse();

    setState(() {
      this._currentTime = widget.amountOfTime;
    });

    await this._controller.forward();
  }

  /// Widgets
  @override
  void initState() {
    super.initState();

    this._controller = new AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    this._animation = new Tween(
        begin: 0.0,
        end: 1.0,
    ).animate(this._controller);

    this._currentTime = widget.amountOfTime;
    this._controller.forward();
  }

  @override
  Widget build(BuildContext context) {

    if (this._currentTime != widget.amountOfTime) {
      this._changeTimeAnimation();
    }

    return new AnimatedBuilder(
      animation: this._animation,
      builder: (BuildContext context, Widget child) {
        final Matrix4 transform = new Matrix4.identity()
          ..scale(1.0, this._animation.value, 1.0);
        return new Transform(
          transform: transform,
          alignment: FractionalOffset.center,
          child: child,
        );
      },
      child: new Text(
        this._currentTime,
        textAlign: TextAlign.left,
        style: new TextStyle(fontSize: 100.0),
      ),
    );
  }

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

在时间变化期间产生以下效果：

Answer 2

您应该在 AnimationController 上调用 .reset()，或者在构建方法中调用 .forward() change into .forward(from: 0.0)) 时传入 from 参数。在 Animationcontroller 上调用 .forward() 会将其移动到上限。再次调用.forward()，而不重置或传入“from”，会导致它什么也不做，因为您已经处于最大值（uppebound）。