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

Widget:

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;
});

我希望这可以节省一些时间给别人;)

Answer 2

变形的动画版本。旋转，当给定的旋转改变时，在给定的持续时间内自动转换子旋转。

清晰分析请点击这里:

Answer 3

使用圆规非常好用，点击这里查看https://pub.dev/packages/smooth_compass