Flutter:如何从父级控制动画 [英] Flutter: how to control animation from parent

问题描述

我需要从父窗口小部件开始创建子窗口小部件的动画.我该怎么办?

I need to start an animation of a child widget from a parent widget. How can I do this?

我尝试给父级控制器，但是如何替换 vsync:this ?

I've tried giving the parent the controller, but then how do you replace vsync: this?

这是基本代码(我尚未实际测试此代码，但我已表明我的意思):

This is the basic code (I haven't actually tested this code yet, but I shows what I mean):

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

推荐答案

您可以尝试以下操作:

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

这篇关于Flutter:如何从父级控制动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！