animation - 使用 Flutter 定位小部件动画

Question

我有以下代码，用于在平移结束时为 Positioned 小部件、位置设置动画。但是，它没有动画。

初始化AnimationController和变量:

  AnimationController nodesListAnimationController;
  Animation<double> nodesListAnimation;

  double nodesListOffsetY = 0.0; //widget default offset (will be large, but acts like 0.0)
  double nodesListDragOffsetY = 0.0; //how far we have moved the widget from default offset (nodesListOffsetY)
  double nodesListTouchOffset = 0.0; //the initial touch when drag begins
  final double nodesListHeight = 350.0; //widget height

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

    nodesListAnimationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 350),
    )
    ..addListener((){
      setState(() {

      });
    });

  }

构建函数；请参阅Positioned 小部件。我可以使用 GestureDetector 上的平移回调在创建的边界内上下拖动它。

当平移结束时，我想将 Positioned 小部件设置为动画回到给定位置。目前，没有动画发生。

@override
  Widget build(BuildContext context) {
    nodesListOffsetY = MediaQuery.of(context).size.width + 110.0;

    AppBar appBar = AppBar(
      ...
    );

    return Scaffold(
        appBar: appBar,
        backgroundColor: Colors.black,
        body: Stack(
          children: <Widget>[
            Column(
              children: <Widget>[
                cameraWidget(),
                cameraControls(),
              ],
            ),
            Positioned(
              left: 0.0,
              top: nodesListAnimationController.isAnimating ? nodesListAnimation.value : nodesListOffsetY + nodesListDragOffsetY,
              width: MediaQuery.of(context).size.width,
              height: nodesListHeight,
              child: GestureDetector(
                onPanStart: (dragDetails) {
                  nodesListTouchOffset = (dragDetails.globalPosition.dy - appBar.preferredSize.height) - nodesListOffsetY - nodesListDragOffsetY;
                },
                onPanUpdate: (dragDetails) {
                  setState(() {
                    double newDragOffset = (dragDetails.globalPosition.dy - nodesListOffsetY) - appBar.preferredSize.height - nodesListTouchOffset;

                    //allow it only to move up if is clips off screen, otherwise upper limit not needed
                    double nodesListVisible = ((MediaQuery.of(context).size.height - appBar.preferredSize.height) - nodesListOffsetY);
                    bool isClipping = nodesListVisible < nodesListHeight ? true : false;
                    double upperLimit = 0.0;
                    if (isClipping) upperLimit = -(nodesListHeight - nodesListVisible);

                    //limit drag bounds. don't drag too high or low.
                    if (newDragOffset < upperLimit) newDragOffset = upperLimit;
                    else if (newDragOffset > 0) newDragOffset = 0.0;
                    else nodesListDragOffsetY = newDragOffset;
                  });
                },
                onPanEnd: (dragDetails) {
                  double currentPos = (nodesListOffsetY + nodesListDragOffsetY);
                  nodesListAnimation = Tween(begin: currentPos, end: nodesListOffsetY).animate(nodesListAnimationController);
                  nodesListAnimationController.forward(from: currentPos);
                  nodesListAnimation.addStatusListener((state) {
                    print(nodesListAnimation.value);
                  });
                },
                child: nodesList(),
              ),
            ),
          ],
        ));
  }

Answer 1

聚会迟到了，但您的问题是因为:

nodesListAnimationController.forward(from: currentPos)

谁的from错误地接受 0.0-1.0 之外的值。所以你应该将其更改为 controller.forward()

这没有详细记录，但转发的 from旨在接受 0.0-1.0 之间的值，或更具体地说，如果设置，则为 lowerBound 提供的范围和upperBound (除了少数异常(exception))。 (您也可以将其视为 0-100%)。它并不意味着接受 Tween 的 begin 的值范围。和end ，也不知道该范围。

https://api.flutter.dev/flutter/animation/AnimationController-class.html

By default, an AnimationController linearly produces values that range from 0.0 to 1.0

https://flutter.dev/docs/development/ui/animations/overview#addstatuslistener

An animation might then run forward (e.g., from 0.0 to 1.0)

(我可以验证在我将代码更改为仅使用 .forward() 后，我能够看到它的动画)