Improve transition animation performance

[LucasPennice]

This discussion corresponds to this (https://twitter.com/LucasPennice/status/1721899082221003027) tweet

"
Hello @wcandillon

Would you mind sharing some advice?

I have a deterministic animation where I need to animate transitions for a lot of elements

Is there something I can do to improve performance?

I'm getting 40fps average and constant high CPU usage
"

function Home() {
    const { width, height } = Dimensions.get("window");

    const fontManager = useContext(SkiaFontContext);

    if (!fontManager) return <></>;

    const labelFont = matchFont({ fontFamily: "helvetica", fontSize: 12 }, fontManager);

    return (
        <Canvas style={{ width, height }}>
            {Array.from(Array(43).keys()).map((_, idx) => (
                <Element key={idx} idx={idx} labelFont={labelFont} />
            ))}
        </Canvas>
    );
}

const Element = ({ labelFont, idx }: { idx: number; labelFont: SkFont }) => {
    const { width, height } = Dimensions.get("window");

    const initialX = width / 4;
    const initialY = height / 4;

    const x = useSharedValue(initialX);
    const y = useSharedValue(initialY);

    useEffect(() => {
        const radius = (idx / 10 + 1) * 30;
        const angle = idx;

        const coordX = radius * Math.cos(angle);
        const coordY = radius * Math.sin(angle);

        x.value = withRepeat(withSpring(initialX + coordX, { dampingRatio: 0.7 }), -1, true);
        y.value = withRepeat(withSpring(initialY + coordY, { dampingRatio: 0.7 }), -1, true);
    }, []);

    const transformMatrix = useDerivedValue(() => {
        const matrix = Skia.Matrix();
        matrix.translate(x.value, y.value);
        return matrix;
    });

    const path = Skia.Path.Make();
    path.moveTo(initialX, initialY);
    path.addCircle(initialX, initialY, 15);
    path.simplify();

    return (
        <Group matrix={transformMatrix}>
            <Circle cx={initialX} cy={initialY} r={15} color={"gray"} />
            <Path path={path} style="stroke" strokeWidth={2} color={"pink"} />
            <Path path={path} style="stroke" strokeWidth={2} color={"yellow"} end={0.5} />
            <Text x={initialX} y={initialY} text={"text"} font={labelFont} color={"#515053"} />
        </Group>
    );
};

[wcandillon]

A first step here would be to avoid creating a SkMatrix for each frame/component: https://shopify.github.io/react-native-skia/docs/animations/animations#performance

Now if you have a lot of repeating patterns you want to animated, you might want to looking to having them as a texture: https://shopify.github.io/react-native-skia/docs/animations/textures

[LucasPennice]

Thanks for taking the time to answer!

I tried following the "Mutate the value and notify Reanimated" pattern but I'm getting an error saying:
"[Reanimated] Setting _value directly is only possible on the UI runtime."

Which is weird because I thought the callback passed to useDerivedValue runs on the UI thread (link to docs: https://docs.swmansion.com/react-native-reanimated/docs/core/useDerivedValue/)

The only changes made were chaning this

const transformMatrix = useDerivedValue(() => {
        const matrix = Skia.Matrix();
        matrix.translate(x.value, y.value);
        return matrix;
    });

to this

  const transformMatrix = useSharedValue(Skia.Matrix());

   useDerivedValue(() => {
       transformMatrix.value.translate(x.value, y.value);
       notifyChange(transformMatrix);
   });

Updated code snippet below

const Element = ({ labelFont, idx }: { idx: number; labelFont: SkFont }) => {
    const { width, height } = Dimensions.get("window");

    const initialX = width / 4;
    const initialY = height / 4;

    const x = useSharedValue(initialX);
    const y = useSharedValue(initialY);

    useEffect(() => {
        const radius = (idx / 10 + 1) * 30;
        const angle = idx;

        const coordX = radius * Math.cos(angle);
        const coordY = radius * Math.sin(angle);

        x.value = withRepeat(withSpring(initialX + coordX, { dampingRatio: 0.7 }), -1, true);
        y.value = withRepeat(withSpring(initialY + coordY, { dampingRatio: 0.7 }), -1, true);
    }, []);

    const transformMatrix = useSharedValue(Skia.Matrix());

    useDerivedValue(() => {
        transformMatrix.value.translate(x.value, y.value);
        notifyChange(transformMatrix);
    });

    const path = Skia.Path.Make();
    path.moveTo(initialX, initialY);
    path.addCircle(initialX, initialY, 15);
    path.simplify();

    return (
        <Group matrix={transformMatrix}>
            <Circle cx={initialX} cy={initialY} r={15} color={"gray"} />
            <Path path={path} style="stroke" strokeWidth={2} color={"pink"} />
            <Path path={path} style="stroke" strokeWidth={2} color={"yellow"} end={0.5} />
            <Text x={initialX} y={initialY} text={"text"} font={labelFont} color={"#515053"} />
        </Group>
    );
};

[wcandillon]

and this is with Reanimated 3 and the latest version of Skia? If you could make a small repo with your example, it would allow me to play with it and bit more efficient to dive down into it.

[LucasPennice]

I would love to make a repo to make thing easier. I've been trying for almost the past 2 hours to get one working with Expo Go so you don't have to build the project locally but I couldn't find a way to avoid errors (everything works fine on my project with a dev build)
Apologies for the inconvenience

Here's what my dependencies look like

"@shopify/react-native-skia": "^0.1.216",
"react-native-reanimated": "^3.5.4",
"react-native": "0.72.6",

Are these the package versions I should be using?

[wcandillon]

expo go won't work with these versions, you would need to use react native cli for this.

…

On Tue, Nov 7, 2023 at 10:19 PM LucasPennice ***@***.***> wrote: I would love to make a repo to make thing easier. I've been trying for almost the past 2 hours to get one working with Expo Go so you don't have to build the project locally but I couldn't find a way to avoid errors (everything works fine on my project with a dev build) Apologies for the inconvenience Here's what my dependencies look like ***@***.***/react-native-skia": "^0.1.216", "react-native-reanimated": "^3.5.4", "react-native": "0.72.6", Are these the package versions I should be using? — Reply to this email directly, view it on GitHub <#1964 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVRNFTPNC3STFF4IQ73YDKQU3AVCNFSM6AAAAAA7BUQE52VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TKMBTGUZDG> . You are receiving this because you commented.Message ID: ***@***.*** com>

[LucasPennice]

Got it, let me figure that out and I'll get back to you 🙌

Thanks for taking the time to explain

[LucasPennice]

Here it is 🙌

https://github.com/LucasPennice/skiaPerformanceDiscussion