如何在 Flutter 的长按上将大圆调整为小圆的动画？

Question

我想使用 Flutter 将大的 circle/image 调整为小的 circle/image 动画。

小圆圈的大小会直接调整到 pointer/my 手指上，并随着指针移动。

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

Answer 1

您可以使用 LongPressDraggable widget。这是一个示例（假设 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,
    ),
);

如何在 Flutter 的长按上将大圆调整为小圆的动画？

How do I animate a large circle resizing down to a small circle on Long Press in Flutter?

animation

resize

flutter