Style rotate from 0 to 360 degrees and vice versa

[JayNutZ]

The main goal is, to rotate components smoothly by a single integer (0-360°).
A simple withTiming setup, using easing, does the job fairly well. But this solution does not recongize that 360 and 0 being next to each other, closing the circle.
So instead of rotating via 0, lets say 300deg to 20deg, it will smoothly decrease the 300 via 200, 100 etc. down to 20. This is a way longer distance and feels very off.
I found many discussions stating, that the interpolate function is the right solution for this, but i think it is just transforming one scale to another. Like 0-360 (degrees) to 0-100 (percentage). So this seems to be a completely wrong path to me.

My Code (with redundant interpolate):

import { useEffect, useMemo } from "react";
import {
    Easing,
    Extrapolate,
    interpolate,
    useAnimatedStyle,
    useSharedValue,
    withTiming,
} from "react-native-reanimated";

export const useRotation = (degrees = 0, reversed = false) => {
    const optimizedDegrees = interpolate(reversed ? 360 - degrees : degrees, [0, 360], [0, 360], Extrapolate.CLAMP);
    const smoothDegrees = useSharedValue(optimizedDegrees);

    const rotationStyle = useAnimatedStyle(() => {
        return { transform: [{ rotate: `${smoothDegrees.value}deg` }] };
    });

    useEffect(() => {
        smoothDegrees.value = withTiming(
            optimizedDegrees,
            { duration: 300, easing: Easing.inOut(Easing.ease) }
        );
    }, [optimizedDegrees, reversed, smoothDegrees]);

    return useMemo(() => ({
        smoothDegrees: smoothDegrees.value,
        rotationStyle,
    }), [
        smoothDegrees,
        rotationStyle,
    ]);
};

TL;DR: How do i animate rotation degrees always using the closest direction? (via 360, 0... if optimal)

[tomekzaw]

How do i animate rotation degrees always using the closest direction? (via 360, 0... if optimal)

I'm afraid we don't have any built-in solution for this kind of animation but it sounds as it's fairly easy to implement on your own. Assuming that you always try to animate from $x$ deg to $y$ deg where $x, y \in [0, 360]$

• if $x \leq y$, simply animate from $x$ to $y$
• otherwise (i.e. $x > y$), animate from $x - 360$ (which is the same as $x$) to $y$

[JayNutZ]

Wow I didn't even think about except 0-360 being a possibility... Thank you for that hint!

[tran-simon]

@tomekzaw How can you retrieve the previous value?