Как добавить инерцию в виджет, повернутый смещением смахивания? (добавить импульс) - PullRequest
1 голос
/ 29 апреля 2020

Например, у меня есть виджет, который вращается по пользовательскому свайпу с использованием переменной 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

1 Ответ

2 голосов
/ 29 апреля 2020

Спасибо @ 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

...