如何给通过滑动偏移旋转的widget添加惯性?(增加动量)

问题描述 投票:0回答:1

例如,我有一个widget,它在用户滑动时使用可变的 dragoffset += details.offset.dx;

当滑动结束时,如何给旋转添加惯性?例如,当你松开手指时,对象继续以下降的速度旋转--就像ListView通常的行为一样。

这里有一些模板代码作为例子。

Widget rotatedWidget() {
    double fingerOffset = 0.0;
    return GestureDetector(
        onHorizontalDragUpdate: (details) {
          setState((){ 
             fingerOffset += details.delta.dx; 
          });
        },
        onHorizontalDragEnd: (details) {
           /// some code to add inertia
        },
        child: Transform.rotate(
          angle: offset,
          child: Container(width: 100, height: 100, color: Colors.blue),
        ));
  }

illustration

flutter flutter-animation
1个回答
2
投票

谢谢 @pskink 对于这个解决方案。

 AnimationController ctrl;

  @override
  void initState() {
    super.initState();
    ctrl = AnimationController.unbounded(vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (d) => ctrl.value += d.delta.dx / 100,
      onPanEnd: (d) {
        ctrl.animateWith(
          FrictionSimulation(
              0.05, // <- the bigger this value, the less friction is applied
              ctrl.value,
              d.velocity.pixelsPerSecond.dx / 100 // <- Velocity of inertia
          ));
        },
      child: Scaffold(
        appBar: AppBar(
          title: Text('RotatedBox'),
        ),
        body: AnimatedBuilder(
          animation: ctrl,
          builder: (ctx, w) {
            return Center(
              child: Transform.rotate(
                angle: ctrl.value,
                child: Container(width: 100, height: 100, color: Colors.blue),
              ),
            );
          },
        ),
      ),
    );
  }

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.