如何在Flutter中的“长按”中为大圆圈设置动画，使其大小缩小为小圆圈？

Question

我想使用Flutter为大圆圈/图像设置动画，使其缩小为小圆圈/图像。

小圆圈将直接在指针/我的手指上调整大小，并随着指针的移动而跟随指针。

我的第一个直觉是使用GestureDetector的onLongPress但是我不确定如何告诉圆调整半径并使其跟随指针。

Answer 1

您可以使用LongPressDraggable小部件 。 这是一个示例（假设已经定义了currentHeight / currentWidth / circkeDiameter）：

import 'dart:ui' show lerpDouble;
Animation animation = new AnimationController();
new AnimatedBuilder(
 controller: animation,
 child: new Container(),
 builder: (_, Widget child) {
   return new Container(
     width: lerpDouble(currentWidth, circleDiameter, animation.value),
     height: lerpDouble(currentHeight, circleDiameter, animation.value),
     child: new ClipRRect(
       borderRadius: new BorderRadius.circular(
         (circleDiameter / 2.0) * animation.value,
       ),
       child: child,
     ),
   );
 });

这是一个例子： https : //github.com/fuchsia-mirror/modules-video/blob/master/modules/video/lib/src/widgets/screen.dart#L87

如果您不在乎拖动时指针后面的小圆圈（即，您只想查看调整大小的动画），则可以使用AnimatedCrossFade小部件，该控件的crossFadeState使用由GestureDetector的onLongPress设置的标志。 例如：

bool didLongPress = false;
return new GestureDetector(
    onLongPress: setDidLongPressToTrue(),
    child: new AnimatedCrossFade(
      duration: someAnimationTime,
      firstChild: largeCircle,
      secondChild: smallCircle,
      crossFadeState: didLongPressed
          ? CrossFadeState.showFirst
          : CrossFadeState.showSecond,
    ),
);