simplify animated example

Author: Andrzej Antoni Kwaśniewski

apps/common-app/src/new_api/showcase/animated/index.tsx

@@ -12,18 +12,12 @@ export default function MinimalCard() {
   const rotation = useRef(new Animated.Value(0)).current;
   const colorProgress = useRef(new Animated.Value(0)).current;
   const normalisedRotation = useRef(new Animated.Value(1)).current;
+  const opacity = useRef(new Animated.Value(1)).current;
+
   let offsetX = 0;
   let offsetY = 0;
 
   const panGesture = usePanGesture({
-    onBegin: () => {
-      normalisedRotation.setValue(1);
-      Animated.timing(colorProgress, {
-        toValue: 1,
-        duration: 200,
-        useNativeDriver: true,
-      }).start();
-    },
     onActivate: () => {
       Animated.spring(scale, {
         toValue: 1.05,
@@ -33,10 +27,8 @@ export default function MinimalCard() {
     onUpdate: (e) => {
       translateX.setValue(e.translationX + offsetX);
       translateY.setValue(e.translationY + offsetY);
-
       const rotationValue = ((e.translationX + offsetX) / width) * 20;
       rotation.setValue(rotationValue);
-
       normalisedRotation.setValue(
         rotationValue < 0 ? rotationValue - 1 : rotationValue + 1
       );
@@ -50,14 +42,37 @@ export default function MinimalCard() {
       if (Math.abs(e.translationX + offsetX) > width * 0.3) {
         const direction = e.translationX + offsetX > 0 ? 1 : -1;
 
-        Animated.timing(translateX, {
-          toValue: direction * width,
-          duration: 200,
-          useNativeDriver: true,
-        }).start(() => {
+        Animated.parallel([
+          Animated.timing(translateX, {
+            toValue: direction * width * 1.5,
+            duration: 300,
+            useNativeDriver: true,
+          }),
+          Animated.timing(opacity, {
+            toValue: 0,
+            duration: 300,
+            useNativeDriver: true,
+          }),
+        ]).start(() => {
           translateX.setValue(0);
           translateY.setValue(0);
           rotation.setValue(0);
+          normalisedRotation.setValue(1);
+
+          Animated.parallel([
+            Animated.spring(scale, {
+              toValue: 1,
+              friction: 8,
+              tension: 40,
+              useNativeDriver: true,
+            }),
+            Animated.timing(opacity, {
+              toValue: 1,
+              duration: 300,
+              useNativeDriver: true,
+            }),
+          ]).start();
+
           offsetX = 0;
           offsetY = 0;
         });
@@ -66,29 +81,26 @@ export default function MinimalCard() {
           toValue: 0,
           useNativeDriver: true,
         }).start();
-
         Animated.spring(translateY, {
           toValue: 0,
           useNativeDriver: true,
         }).start();
-
         Animated.spring(rotation, {
           toValue: 0,
           useNativeDriver: true,
         }).start();
-
-        const normalisedRotationValue = e.absoluteX < 0 ? -1 : 1;
-
-        Animated.timing(normalisedRotation, {
-          toValue: normalisedRotationValue,
-          duration: 500,
-          useNativeDriver: true,
-        }).start();
       }
+
       offsetX = 0;
       offsetY = 0;
     },
-    onFinalize: () => {
+    onFinalize: (e) => {
+      const normalisedRotationValue = e.absoluteX < 0 ? -1 : 1;
+      Animated.timing(normalisedRotation, {
+        toValue: normalisedRotationValue,
+        duration: 500,
+        useNativeDriver: true,
+      }).start();
       Animated.timing(colorProgress, {
         toValue: 0,
         duration: 500,
@@ -102,18 +114,10 @@ export default function MinimalCard() {
     inputRange: [-20, 20],
     outputRange: ['-20deg', '20deg'],
   });
-  const finalBackgroundColor = Animated.multiply(
-    colorProgress,
-    normalisedRotation
-  ).interpolate({
-    inputRange: [-10, -1, 0, 1, 10],
-    outputRange: [
-      COLORS.RED,
-      COLORS.PURPLE,
-      COLORS.NAVY,
-      COLORS.PURPLE,
-      COLORS.GREEN,
-    ],
+
+  const finalBackgroundColor = normalisedRotation.interpolate({
+    inputRange: [-10, 0, 10],
+    outputRange: [COLORS.RED, COLORS.NAVY, COLORS.GREEN],
     extrapolate: 'clamp',
   });
 
@@ -125,6 +129,7 @@ export default function MinimalCard() {
             styles.card,
             {
               backgroundColor: finalBackgroundColor,
+              opacity,
               transform: [
                 { translateX },
                 { translateY },