同一属性上的颤动交错动画

问题描述

我想为小部件的比例设置动画。点击时，它应按比例缩小；点击时，应按比例放大。

问题是如何在同一属性上使用staggered animations？
SO（Chaining seperate animations that work on the same properties）上还有一个较旧的问题，但没有有效的答案。

我已经尝试调整其解决方案，但是问题是，即使未达到指定的Interval，每个动画侦听器也会被调用。

我添加了一个条件来检查是否设置了_animationFuture，但是使用这种模式，您必须为小部件中正在运行的任何动画保留一个值，这有点麻烦。

是否有不需要解决的“本机”解决方案，或者只是不支持具有相同值的多个动画？

我不想reverse()动画。每个补间必须能够具有自定义曲线，开始和结束值。

在这里放置我的小部件：


class AnimatedIconButton extends StatefulWidget {

  final Widget child;

  final Function onPress;

  AnimatedIconButton({@required this.child,this.onPress}): assert(child != null);

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

class _AnimatedIconButtonState extends State<AnimatedIconButton> with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  Animation<double> _animationIn;
  Animation<double> _animationOut;

  double _scale = 1;

  TickerFuture _animationFuture;


  Function get onPress => widget.onPress ?? () => null;

  _tapDown(TapDownDetails details) {
    print("_tapDown progress=${_animationController.value} scale=$_scale");
    _animationFuture = _animationController.animateto(0.5);
  }

  _tapUp(TapUpDetails details) {
    assert(_animationFuture != null);
    print("_tapUp progress=${_animationController.value} scale=$_scale");

    _animationFuture.then((_) {
      _animationFuture = null;
      _animationController.animateto(1);
    });

  }

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

    _animationController = AnimationController(value: 0,vsync: this,duration: const Duration(milliseconds: 1500),animationBehavior: AnimationBehavior.preserve);

    _animationIn = Tween<double>(begin: 1.0,end: 0.9).animate(CurvedAnimation(
      parent: _animationController,curve: Interval(
        0,0.5,curve: Curves.eaSEOut,),))..addListener(() {
      if (_animationFuture == null) return;
      print("_animationIn.value ${_animationOut.value}");
      _scale = _animationIn.value;
    });

    _animationOut = Tween<double>(begin: 0.9,end: 1).animate(CurvedAnimation(
      parent: _animationController,curve: Interval(
          0.5,1,curve: Curves.elasticOut,))..addListener(() {
      if (_animationFuture != null) return;
      print("_animationOut.value ${_animationOut.value}");
       _scale = _animationOut.value;
    });



  }

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

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return GestureDetector(
      onTapUp: _tapUp,onTapDown: _tapDown,child: AnimatedBuilder(
        animation: _animationController,child: widget.child,builder: (_,child) {
          return Transform.scale(
            scale: _scale,transformHitTests: false,child: child,);
        },);

  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animation animation dart flutter-animation