Fix Reduced Motion example (software-mansion#6288)

## Summary

Previously, animations were defined in the global scope, so if they were
run once, they couldn't be run again. I simply replaced static
animations with a lambda that creates a new animation every time.

| before | after |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/21de2620-24f2-4d27-8e82-3217ddeab07e"
/> | <video
src="https://github.com/user-attachments/assets/ac178ce6-c6d5-4cc0-9029-43341b20b278"
/> |

## Test plan

Run `ReducedMotion` example

apps/common-app/src/examples/ReducedMotionExample.tsx

@@ -24,82 +24,88 @@ const toValue = 100;
 const initialValue = -100;
 
 const SIMPLE_EXAMPLES = [
-  { animation: withTiming(toValue, { duration }), text: 'withTiming' },
-  { animation: withSpring(toValue, { duration }), text: 'withSpring' },
+  { animation: () => withTiming(toValue, { duration }), text: 'withTiming' },
+  { animation: () => withSpring(toValue, { duration }), text: 'withSpring' },
   {
-    animation: withDelay(1000, withTiming(toValue, { duration })),
+    animation: () => withDelay(1000, withTiming(toValue, { duration })),
     text: 'withDelay',
   },
   {
-    animation: withSequence(
-      withTiming((toValue + initialValue) / 2, { duration }),
-      withSpring(toValue, { duration })
-    ),
+    animation: () =>
+      withSequence(
+        withTiming((toValue + initialValue) / 2, { duration }),
+        withSpring(toValue, { duration })
+      ),
     text: 'withSequence',
   },
 ];
 
 const REPEAT_EXAMPLES = [
   {
-    animation: withRepeat(withTiming(toValue, { duration }), -1, true),
+    animation: () => withRepeat(withTiming(toValue, { duration }), -1, true),
     text: 'withRepeat (infinite)',
   },
   {
-    animation: withRepeat(withTiming(toValue, { duration }), 4, true),
+    animation: () => withRepeat(withTiming(toValue, { duration }), 4, true),
     text: 'withRepeat (even)',
   },
   {
-    animation: withRepeat(withTiming(toValue, { duration }), 3, true),
+    animation: () => withRepeat(withTiming(toValue, { duration }), 3, true),
     text: 'withRepeat (odd)',
   },
   {
-    animation: withRepeat(withTiming(toValue, { duration }), 4, false),
+    animation: () => withRepeat(withTiming(toValue, { duration }), 4, false),
     text: 'withRepeat\n(no reverse)',
   },
 ];
 
 const CONFIG_EXAMPLES = [
   {
-    animation: withTiming(toValue, {
-      reduceMotion: ReduceMotion.Always,
-      duration,
-    }),
+    animation: () =>
+      withTiming(toValue, {
+        reduceMotion: ReduceMotion.Always,
+        duration,
+      }),
     text: 'always\nreduce',
   },
   {
-    animation: withTiming(toValue, {
-      reduceMotion: ReduceMotion.Never,
-      duration,
-    }),
+    animation: () =>
+      withTiming(toValue, {
+        reduceMotion: ReduceMotion.Never,
+        duration,
+      }),
     text: 'never\nreduce',
   },
   {
-    animation: withTiming(toValue, {
-      reduceMotion: ReduceMotion.System,
-      duration,
-    }),
-    text: 'system\nreduce',
-  },
-  {
-    animation: withSequence(
-      ReduceMotion.Always,
-      withTiming(initialValue + (toValue - initialValue) / 3, { duration }),
-      withTiming(initialValue + (2 * (toValue - initialValue)) / 3, {
+    animation: () =>
+      withTiming(toValue, {
         reduceMotion: ReduceMotion.System,
         duration,
       }),
-      withTiming(toValue, { reduceMotion: ReduceMotion.Never, duration })
-    ),
+    text: 'system\nreduce',
+  },
+  {
+    animation: () =>
+      withSequence(
+        ReduceMotion.Always,
+        withTiming(initialValue + (toValue - initialValue) / 3, { duration }),
+        withTiming(initialValue + (2 * (toValue - initialValue)) / 3, {
+          reduceMotion: ReduceMotion.System,
+          duration,
+        }),
+        withTiming(toValue, { reduceMotion: ReduceMotion.Never, duration })
+      ),
     text: 'nested sequence',
   },
   {
-    animation: withRepeat(
-      withTiming(toValue, { duration }),
-      3,
-      true,
-      undefined,
-      ReduceMotion.Always
-    ),
+    animation: () =>
+      withRepeat(
+        withTiming(toValue, { duration }),
+        3,
+        true,
+        undefined,
+        ReduceMotion.Always
+      ),
     text: 'nested repeat',
   },
 ];
@@ -187,15 +193,15 @@ function HookExample() {
   );
 }
 
-function Example(props: { animation: number; text: string }) {
+function Example(props: { animation: () => number; text: string }) {
   const sv = useSharedValue(initialValue);
 
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: sv.value }],
   }));
 
   const handlePress = () => {
-    sv.value = props.animation;
+    sv.value = props.animation();
   };
 
   return (