flutter - 用于动画罗盘的 AnimatedRotation

Question

用于动画罗盘的 AnimatedRotation

我正在尝试将指南针添加到我的应用程序中。动画从 359 到 0 或 0 到 359 的旋转的最佳方法是什么？是否有更适合此类旋转的小部件？

AnimatedRotation(
      duration: const Duration(milliseconds: 250),
      turns: -heading / 360.0,
      curve: Curves.linear,

尝试通过添加差异而不是分配角度来做到这一点，但如果它在同一方向旋转，它可能会溢出。

if(previousHeading - heading > 180) {
  turns += ((360.0 - previousHeading) + heading) / 360.0;
}
else if(previousHeading - heading < -180) {
  turns -= ((360.0 - heading + previousHeading)) / 360.0;
}
else {
  turns += ((previousHeading - heading) / 360.0);
}

previousHeading = heading;

Answer 1

小部件:

AnimatedRotation(
  turns: turns,
  duration: const Duration(milliseconds: 250),
  child: const Icon(Icons.arrow_upward_outlined),
)

要获得正确的“转向”值，您应该这样做:

double prevValue = 0.0;

FlutterCompass.events?.listen((CompassEvent event) {
  double? direction = event.heading;
  direction = direction < 0 ? (360 + direction): direction;

  double diff = direction - prevValue;
  if(diff.abs() > 180) {
    if(prevValue > direction) {
      diff = 360 - (direction-prevValue).abs();
    } else {
      diff = 360 - (prevValue-direction).abs();
      diff = diff * -1;
    }
  }
  turns += (diff / 360);
  prevValue = direction;
});

我希望这可以为其他人节省一些时间；)