Animating rotation over 360 degrees causes 'jump'

[lorissikora]

Hi!

I'm trying to implement a compass, that rotates against the device's heading such that the digital needle always points to north. Since the heading is only polled at around 4Hz it requires some smoothing, which I have done so far with react-native-reanimated, using some simple withTiming on a shared value containing the heading.

The problem now is, that the heading, once you turn the phone over the point facing north, will jump from 360° back to 0° (or vice versa) which promptly causes the compass to do a complete 360.

My current attempts all involve some way of knowing the interpolated value from the previous frame in order to detect a rotation change of >180° in order to compensate for it, but I have not yet found any way to do so...

Does someone have an idea of how to implement such behavior? Thanks!

[tomekzaw]

Hey, I'm afraid there's no out-of-the-box solution for this use case, see also #3918 (comment).

[lorissikora]

Thanks for your answer! I came across this comment already and thought it would not be applicable to my case since I'm updating the heading too fast. However, after reconsidering, I made it work. Here, for anyone in the future who wants to implement something similar:

I'm using Expo Location to get the heading and use that value to animate a compass to always point north. What I now do, is to keep track of a "delta" which increases/decreases each time we do a rotation larger than 180°, which occurs once we loop around via North.

const useCompass = () => {
    const headingRef = useRef({ current: 0, previous: 0, delta: 0 });
    const heading = useSharedValue({ heading: 0, rotatedHeading: 0 });

    Location.watchHeadingAsync(({ magHeading }) => {
        const headingRefValue = {
            current: magHeading,
            previous: headingRef.current.current,
            delta: headingRef.current.delta
        };

        const diff = headingRefValue.current - headingRefValue.previous;

        if (Math.abs(diff) > 180) headingRefValue.delta += Math.sign(diff) * -360; // This is where the magic happens
        /* Equivalent to:
        if (diff > 180) headingRefValue.delta -= 360;
        else if (diff < 180) headingRefValue.delta += 360;
        */

        if (Math.abs(diff) > 0) {
            headingRef.current = headingRefValue;
            heading.value = { heading: headingRefValue.current, rotatedHeading: headingRefValue.current + headingRefValue.delta };
        }
    });

    return heading;
};

After that we can use the rotatedHeading to animate it using react-native-reanimated:

// ...
// Sorry if this code is somewhat janky and could be done way more efficient... I've never used this library before. Feel free to improve and submit!
const compassAngle = useCompass();
const animatedRotation = useDerivedValue(() => withTiming(
    compassAngle.value.rotatedHeading,
    { duration: 200, easing: Easing.bezier(.27, .78, .27, 1) }
));
const compassStyle = useAnimatedStyle(() => {
    const angle = 360 - animatedRotation.value;
    return { transform: [{ rotate: `${angle}deg` }] };
});
// ...

I hope this can help someone in a similar situation.