flutter - 如何将自拍动画添加到CustomPainter？

Question

我有一个用于检测手势的容器，以便可以滚动浏览使用自定义画笔创建的图像，如下所示

class CustomScroller extends StatefulWidget {
  @override
  _CustomScrollerState createState() => _CustomScrollerState();
}

class _CustomScrollerState extends State<CustomScroller>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  double dx = 0;
  Offset velocity = Offset(0, 0);
  double currentLocation = 0;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));

    super.initState();
  }

  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    double width = MediaQuery.of(context).size.width;
    return GestureDetector(
      onHorizontalDragUpdate: (DragUpdateDetails dragUpdate) {
        dx = dragUpdate.delta.dx;
        currentLocation =
            currentLocation + (dx * 10000) / (width * _absoluteRatio);
        setState(() {});
      },
      onHorizontalDragEnd: (DragEndDetails dragUpdate) {
        velocity = dragUpdate.velocity.pixelsPerSecond;
        //_runAnimation(velocity, size);
      },
      child: Container(
        width: width,
        height: 50,
        child: Stack(
          children: <Widget>[
            CustomPaint(
                painter: NewScrollerPainter(1, true, currentLocation),
                size: Size.fromWidth(width)),

          ],
        ),
      ),
    );
  }
}

我已经编写了一些代码，以便在拖动时使用指针的dx值来计算currentLocation，customPainter'NewScrollerPaint'会使用currentLocation来确定它需要绘制的区域。
我本质上是想要一种动画效果，从而使自定义画家“NewScrollerPainter”从速度拖动中释放出来，将继续滚动直到没有动量。我相信这需要从速度计算出currentLocation的值，然后返回以更新NewScrollerPainter，但是我花了几个小时浏览Flutter的动画文档并使用开放源代码，但我仍然没有确定我将如何去做。有人可以阐明这个问题吗？

Answer 1

class CustomScroller extends StatefulWidget {
  @override
  _CustomScrollerState createState() => _CustomScrollerState();
}

class _CustomScrollerState extends State<CustomScroller>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));

    super.initState();
  }

  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return GestureDetector(
      onHorizontalDragUpdate: (DragUpdateDetails dragUpdate) {
        _controller.value += dragUpdate.primaryDelta / width;
      },
      onHorizontalDragEnd: (DragEndDetails dragEnd) {
        final double flingVelocity = dragEnd.primaryVelocity / width;
        const spring = SpringDescription(
          mass: 30,
          stiffness: 1,
          damping: 1,
        );
        final simulation = SpringSimulation(spring, _controller.value, 0, flingVelocity); //if you want to use a spring simulation returning to the origin
        final friction = FrictionSimulation(1.5, _controller.value, -(flingVelocity.abs())); //if you want to use a friction simulation returning to the origin
        //_controller.animateWith(friction);
        //_controller.animateWith(simulation);
        _controller.fling(velocity: -(flingVelocity.abs())); //a regular fling based on the velocity you were dragging your widget
      },
      child: Stack(
          children: [
            SlideTransition(
              position: Tween<Offset>(begin: Offset.zero, end: const Offset(1, 0))
          .animate(_controller),
              child: Align(
                alignment: Alignment.centerLeft,
                child: CustomPaint(
                  painter: NewScrollerPainter(),
                  size: Size.fromWidth(width),
                  child: SizedBox(width: width, height: 50)
                ),
              )
            )
          ]
        )
    );
  }
}

我看到您正在尝试仅沿X轴移动(在onHorizo​​ntalDragUpdate和End上使用)，因此您可以使用值primaryDelta和primaryVelocity，它们已经为您提供了沿主轴的位置和速度的计算(在此为水平案件)。
在onHorizo​​ntalDragUpdate中，您可以通过添加 Controller 的值来添加拖动的位置(正数表示您正离开第一次轻按的位置；负数表示您正向后移动； 0表示您尚未移动或拖动)。
在onHorizo​​ntalDragEnd中，您可以使用primaryVelocity和相同的逻辑来计算速度(正数表示您要移开，负数表示要返回，0表示没有速度，基本上是在拖动结束之前停止了移动)。您可以使用模拟，也可以仅使用fling方法，并传递您具有的速度(正值您要结束动画，负值您要取消动画的速度，以及0位您不想移动的速度)。
最后，您唯一需要做的就是将您无法与 Controller 一起移动的小部件包装在SlideTransition中，其中带有由 Controller 动画的Tween动画开始为零，然后在您要结束的位置结束(在我的情况下，我想移动从左到右)