Question

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

/// 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()，而无需重置或传入＆＃34;来自＆＃34;，因为您已经在maxvalue（uppebound）上，因此无法执行任何操作。

使用flutter_redux翻转动画

2 个答案: