@magmamath/students-features 1.2.0-rc-0000 → 1.2.0

package/src/features/endOfAssignment/components/CorrectAnswer/Spark.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import { COLORS } from '@magmamath/react-native-ui'
 import { SparkIcon } from '../../ui/SparkIcon'
 import { useSparkAnimation } from '../../hooks/useSparkAnimation'
@@ -25,23 +25,21 @@ const SPARKS_SPRING_CONFIG = {
 const HOLD_DELAY = 800
 const ROTATION_ANGLE = 90
 
-export const Spark = memo(
-  ({ id, x, y, size, initialDelay = 350, color = COLORS.GREEN_3 }: SparkProps) => {
-    const { staticStyle, animatedStyle } = useSparkAnimation({
-      id,
-      initialDelay,
-      rotationAngle: ROTATION_ANGLE,
-      holdDelay: HOLD_DELAY,
-      springConfig: SPARKS_SPRING_CONFIG,
-      x,
-      y,
-      size,
-    })
+export const Spark = ({ id, x, y, size, initialDelay = 350, color = COLORS.GREEN_3 }: SparkProps) => {
+  const { animatedStyle } = useSparkAnimation({
+    id,
+    initialDelay,
+    rotationAngle: ROTATION_ANGLE,
+    holdDelay: HOLD_DELAY,
+    springConfig: SPARKS_SPRING_CONFIG,
+    x,
+    y,
+    size,
+  })
 
-    return (
-      <Animated.View style={[staticStyle, animatedStyle]}>
-        <SparkIcon size={size} color={color} />
-      </Animated.View>
-    )
-  },
-)
+  return (
+    <Animated.View style={animatedStyle}>
+      <SparkIcon size={size} color={color} />
+    </Animated.View>
+  )
+}

package/src/features/endOfAssignment/constants.ts

@@ -11,10 +11,7 @@ export const MODALS_WITH_BACKGROUND = [
   EOAModalVariant.EXAM_FINISHED_HAS_CORRECT_ANSWERS,
 ]
 
-export const VARIANT_COLORS: Record<
-  AnimatedCardVariant,
-  { initial: string; final: string; primary: string }
-> = {
+export const VARIANT_COLORS: Record<AnimatedCardVariant, { initial: string; final: string; primary: string }> = {
   [AnimatedCardVariant.CORRECT_ANSWER]: {
     initial: COLORS.GREEN_2,
     final: COLORS.GREEN_4,
@@ -29,7 +26,7 @@ export const VARIANT_COLORS: Record<
 
 export const ANIMATION_DELAYS = {
   step3: 500,
-  celebrations: 140,
+  celebrations: 140
 }
 
 export const CARD_DIMENSIONS = {
@@ -52,5 +49,5 @@ export const BADGE_PARAMS = {
   initialScale: 0.5,
 }
 
-export const SPRING_CONFIG = { stiffness: 241, damping: 20, mass: 0.75 }
-export const SPRING_CONFIG_STEP_3 = { stiffness: 168.8, damping: 17, mass: 0.75 }
+export const SPRING_CONFIG = { stiffness: 241, damping: 18, mass: 0.75 }
+export const SPRING_CONFIG_STEP_3 = { stiffness: 168.8, damping: 15, mass: 0.75 }

package/src/features/endOfAssignment/hooks/useSparkAnimation.tsx

@@ -1,12 +1,13 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect } from 'react'
 import {
   useSharedValue,
   withDelay,
   withRepeat,
   withSequence,
   withSpring,
+  useAnimatedReaction,
   useAnimatedStyle,
-  cancelAnimation,
+  interpolate,
 } from 'react-native-reanimated'
 import { SpringConfig } from 'react-native-reanimated/lib/typescript/animation/springUtils'
 
@@ -21,9 +22,6 @@ type UseSparkAnimationProps = {
   size: number
 }
 
-const FADE_OUT_THRESHOLD = 1
-const CYCLE_RESET_THRESHOLD = 0.1
-
 export const useSparkAnimation = ({
   id,
   initialDelay,
@@ -35,44 +33,20 @@ export const useSparkAnimation = ({
   size,
 }: UseSparkAnimationProps) => {
   const progress = useSharedValue(0)
-  const prevProgress = useSharedValue(0)
-  const isFadingOut = useSharedValue(false)
-
-  const signedAngle = (id === '2' ? -1 : 1) * rotationAngle
+  const rotation = useSharedValue(0)
 
-  const staticStyle = useMemo(
-    () => ({
-      position: 'absolute' as const,
-      top: y,
-      left: x,
-      width: size,
-      height: size,
-      zIndex: 10,
-    }),
-    [x, y, size],
+  useAnimatedReaction(
+    () => progress.value,
+    (current, previous) => {
+      if (typeof previous === 'number' && current < previous * 0.95) {
+        rotation.value = id === '2' ? -rotationAngle : rotationAngle
+      } else {
+        rotation.value = current * (id === '2' ? -rotationAngle : rotationAngle)
+      }
+    },
+    [rotation, progress],
   )
 
-  const animatedStyle = useAnimatedStyle(() => {
-    const p = progress.value
-    const passedPeak = prevProgress.value >= FADE_OUT_THRESHOLD && p < FADE_OUT_THRESHOLD
-    const newCycleStarted = p < CYCLE_RESET_THRESHOLD
-
-    if (passedPeak) {
-      isFadingOut.value = true
-    } else if (newCycleStarted) {
-      isFadingOut.value = false
-    }
-    prevProgress.value = p
-
-    // When fading out, lock rotation at full angle so the star doesn't spin back
-    const rotation = isFadingOut.value ? signedAngle : p * signedAngle
-
-    return {
-      opacity: p,
-      transform: [{ rotate: `${rotation}deg` }],
-    }
-  }, [progress])
-
   useEffect(() => {
     progress.value = withDelay(
       initialDelay,
@@ -84,9 +58,21 @@ export const useSparkAnimation = ({
         -1,
       ),
     )
-
-    return () => cancelAnimation(progress)
   }, [])
 
-  return { staticStyle, animatedStyle }
+  const animatedStyle = useAnimatedStyle(() => {
+    const opacity = interpolate(progress.value, [0, 1], [0, 1])
+    return {
+      position: 'absolute',
+      top: y,
+      left: x,
+      width: size,
+      height: size,
+      opacity,
+      transform: [{ rotate: `${rotation.value}deg` }],
+      zIndex: 10,
+    }
+  }, [progress, rotation])
+
+  return { animatedStyle }
 }