两个动画同时没有setstate

米哈尔·日德克

所以我正在努力解决烦人的问题。我想同时运行 2 个动画,并且在没有以下情况下它不起作用:

animationController.addListener(() {
  setState(() {});
});

这使一切变得波涛汹涌,我想根除这种情况。

当我删除setState两个动画控制器并运行此函数时:

 void animateButton() {
    if (_forward) {
      animationController.reverse();
      animationController2.reverse();
      _forward = false;
    } else {
      animationController.forward();
      animationController2.forward();
      _forward = true;
    }
  }

它只运行第一个动画控制器,没有第二个。动画是彼此相对的简单补间,所以我正在考虑做一些会使用一个补间的事情,对于第二个属性我会做一些反函数,但我想不出任何解决方案,所以它实际上会工作。也许我错过了一些简单的东西。

这是我的完整代码:

class _DetailScreenState extends State<DetailScreenWidget>
    with TickerProviderStateMixin {
  final GlobalKey<SendWidgetState> _key = GlobalKey();

  AnimationController animationController;
  Animation<double> tween;
  AnimationController animationController2;
  Animation<double> tween2;

  @override
  void initState() {
    super.initState();
    // FocusScope.of(context).unfocus();
    animationController = AnimationController(
        vsync: this, duration: Duration(milliseconds: 800));
    tween = Tween<double>(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(parent: animationController, curve: Curves.easeOut));
    animationController.addListener(() {
      setState(() {});
    });

    animationController2 = AnimationController(
        vsync: this, duration: Duration(milliseconds: 800));
    tween2 = Tween<double>(begin: 1.0, end: 0.0).animate(
        CurvedAnimation(parent: animationController2, curve: Curves.easeOut));
    animationController2.addListener(() {
      setState(() {});
    });
  }
  void showHideSendView() {
    if (_forward) {
      animationController.reverse();
      animationController2.reverse();
      _forward = false;
    } else {
      animationController.forward();
      animationController2.forward();
      _key.currentState.initView();
      _forward = true;
    }
  }

  void showTransactions() {
    setState(() {
      showHideSendView();
    });
  }

  Widget build(BuildContext context) {
    return Stack(children: [
      
      SafeArea(
        child: Stack(children: [
          TransactionWidget(
            opacity: tween2,
            getTransactions: _getTransactions,
          ),
          SizeTransition(
            sizeFactor: tween,
            axis: Axis.vertical,
            axisAlignment: -1,
            child: SendWidget(
              key:_key,
              func: shrinkSendView,
              height: tween,
            ),
          ),
          BalanceCard(
              getBalanceFuture: _getBalanceFuture,
              onPressSend: showTransactions),
        ]),
      ),
    ]);
  }
}

staggered animation在颤振中学习了,但是我需要2 个动画同时运行而没有setState. 为此我在互联网上没有找到任何东西,所以我在这里提问。

米哈尔·日德克

好吧,我解决了它,我想statefulWidget动画的每一步都需要更新,或者我想象的东西,现在是工作代码,没有口吃。

我使用了@Simon Pot 的建议,最重要的是我将小部件包装成 FadeTransition

这是代码:

class _DetailScreenState extends State<DetailScreenWidget>
    with TickerProviderStateMixin {
  final GlobalKey<SendWidgetState> _key = GlobalKey();

  AnimationController animationController;
  Animation<double> tween;
  Animation<double> tween2;

  Future _getBalanceFuture;
  Future _getTransactions;

  bool _forward = false;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
        vsync: this, duration: Duration(milliseconds: 800));
    tween2 = Tween<double>(begin: 1.0, end: 0.0).animate(
        CurvedAnimation(parent: animationController, curve: Curves.easeOut));
    tween = Tween<double>(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(parent: animationController, curve: Curves.easeOut));

    _getBalanceFuture = getBalance();
    _getTransactions = _getTranData();
  }

 
  void animateButton() {
    if (_forward) {
      animationController.reverse();
      _forward = false;
    } else {
      animationController.forward();
      _key.currentState.initView();
      _forward = true;
    }
  }

  void showTransactions() {
      animateButton();
  }


  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return Stack(children: [
      SafeArea(
        child: Stack(children: [
          FadeTransition(
            opacity: tween2,
            child: TransactionWidget(
            getTransactions: _getTransactions,
          ),
            ),
          SizeTransition(
            sizeFactor: tween,
            axis: Axis.vertical,
            axisAlignment: -1,
            child: SendWidget(
              key:_key,
              func: shrinkSendView,
              height: tween,
            ),
          ),
          BalanceCard(
              getBalanceFuture: _getBalanceFuture,
              onPressSend: showTransactions),
        ]),
      ),
    ]);
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

同时运行两个动画

我可以同时没有两个ssh吗?

两个独立的进程没有同时运行

是否可以同时播放两个具有不同速率功能的动画?

如何同时运行两个带有链接的 Jquery 动画?

当两个状态相同时运行setState

如何同时运行两个jQuery动画?

如何在JQuery中同时制作两个动画?

用 Manim 同时显示两个动画

SurfaceView中同时显示两个动画

有没有办法同时实现两个 server.listen?

有没有更好的方法来同时解析两个列表?

有没有办法使用LINQ同时订购两个属性

两个setIntervals没有按顺序激活并在不同时间触发

如何验证我没有同时收到@JsonProperty和@JsonAlias中定义的两个值?

如何同时执行两个方法以确保没有延迟?

即使我没有同时使用两个界面,名称也会发生冲突

如何在每次迭代中错开动画并同时触发两个动画

AngularJS CSS动画-同时为两个元素制作动画

有人可以解释为什么我的打印语句没有同时打印两个变量吗?

ffmpeg:几秒钟后的新文本,一帧没有同时有两个文本

有没有办法将两个数据集同时连接到第三个?

jQuery动画方法无法在Chrome和IE中同时为两个div边距动画(在FF中有效)

有没有办法在两个不同页面之间进行动画向上滚动过渡?

Android Studio:ADB没有响应错误,并且两个adb.exe实例同时运行

当同时发生两个并发更改时,为什么RowVersion属性没有引发乐观并发异常?

领域查询同时具有两个条件

同时具有两个值的 Winforms Tag 属性

合并两个查询,同时保留所有结果