feat. loopingAnimation

animatedRN/App.tsx

@@ -3,6 +3,7 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { StyleSheet, Text, View } from "react-native";
 import Accordion from "./src/Accordion";
+import LoopingAnimation from "./src/LoopingAnimation";
 
 const Stack = createStackNavigator();
 
@@ -15,6 +16,13 @@ const AppNavigator = () => (
                 title: "Accordion",
             }}
         />
+        <Stack.Screen
+            name='LoopingAnimation'
+            component={LoopingAnimation}
+            options={{
+                title: "LoopingAnimation",
+            }}
+        />
     </Stack.Navigator>
 );
 

animatedRN/package.json

@@ -34,7 +34,8 @@
         "react-native-web": "^0.18.7",
         "react-navigation-shared-element": "^3.1.3",
         "react-three-fiber": "^6.0.13",
-        "three": "^0.142.0"
+        "three": "^0.142.0",
+        "use-memo-one": "^1.1.2"
     },
     "devDependencies": {
         "@babel/core": "^7.12.9",

animatedRN/src/LoopingAnimation/LoopingAnimation.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { StyleSheet, View, TouchableWithoutFeedback } from "react-native";
+import Animated, { Easing, useSharedValue } from "react-native-reanimated";
+import { loop, bInterpolate } from "react-native-redash";
+import { useMemoOne } from "use-memo-one";
+
+const { Clock, useCode, set, block, cond, and, not, clockRunning, startClock, stopClock } = Animated;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#fff",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
+
+const LoopingAnimation = () => {
+    const [play, setPlay] = useState(false);
+    const { isPlaying, animation, clock } = useMemoOne(
+        () => ({
+            isPlaying: useSharedValue(0),
+            animation: useSharedValue(0),
+            clock: new Clock(),
+        }),
+        []
+    );
+    useCode(
+        block([
+            cond(and(not(clockRunning(clock)), isPlaying.value), startClock(clock)),
+            cond(and(clockRunning(clock), not(isPlaying.value)), stopClock(clock)),
+            set(
+                animation.value,
+                loop({
+                    clock,
+                    duration: 4000,
+                    easing: Easing.inOut(Easing.ease),
+                    boomerang: true,
+                    autoStart: false,
+                })
+            ),
+        ]),
+        []
+    );
+    const scale = bInterpolate(animation, 0.4, 1);
+    const rotate = bInterpolate(animation, 0, 2 * Math.PI * 5);
+    return (
+        <TouchableWithoutFeedback
+            onPress={() => {
+                setPlay(!play);
+                isPlaying.value = play ? 0 : 1;
+            }}
+        >
+            <View style={styles.container}>
+                <Animated.View style={{ transform: [{ scale }, { rotate }] }}>
+                    <View style={{ width: 100, height: 100, backgroundColor: "skyblue" }} />
+                </Animated.View>
+            </View>
+        </TouchableWithoutFeedback>
+    );
+};
+
+export default LoopingAnimation;

animatedRN/src/LoopingAnimation/index.ts

@@ -0,0 +1,3 @@
+import LoopingAnimation from "./LoopingAnimation";
+
+export default LoopingAnimation;

animatedRN/yarn.lock

@@ -7101,6 +7101,11 @@ url-parse@^1.5.9:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-memo-one@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
+  integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==
+
 "use-subscription@>=1.0.0 <1.6.0":
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"