Flutter：如何从父级控制动画答案

【问题标题】：Flutter: how to control animation from parentFlutter：如何从父级控制动画
【发布时间】：2019-10-21 16:23:05
【问题描述】：

我需要从父小部件启动子小部件的动画。我该怎么做？

我已尝试将控制器授予父级，但是您如何替换 vsync: this？

这是基本代码（我还没有实际测试过这段代码，但我说明了我的意思）：

import 'package:flutter/material.dart';

class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ChildText(),
        FlatButton(
          child: Text('start the animation'),
          onPressed: () {
            // start the animation!!!????????
          },
        )
      ],
    );
  }
}

class ChildText extends StatefulWidget {
  @override
  _ChildTextState createState() => _ChildTextState();
}

class _ChildTextState extends State<ChildText> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

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

    // actual animation is much more complex, this is just a random demo
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 2));

    _animation = Tween(begin: -1.0, end: 100.0).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.fastOutSlowIn,
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
        offset: Offset(0, _animation.value),
        child: Text('Text with fancy animation'));
  }
}

【问题讨论】：

标签： animation flutter

【解决方案1】：

你可以试试这个：

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidget createState() => _ParentWidget();
}

class _ParentWidget extends State<ParentWidget> with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 2));
  }

  @override
  void dispose() {
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ChildText(_controller),
        FlatButton(
          child: Text('start the animation'),
          onPressed: () {
            // start the animation!!!
            _controller.forward();
          },
        )
      ],
    );
  }
}

class ChildText extends StatefulWidget {
  ChildText(this._controller);

  final AnimationController _controller;

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

class _ChildTextState extends State<ChildText> with TickerProviderStateMixin {
  Animation _animation;

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

    _animation = Tween(begin: -1.0, end: 100.0).animate(CurvedAnimation(
      parent: widget._controller,
      curve: Curves.fastOutSlowIn,
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
        offset: Offset(0, _animation.value),
        child: Text('Text with fancy animation'));
  }
}

【讨论】：