enableTransition prop (for initial animation)

ruucm · Mar 31, 2024 · e9b6ed3 · e9b6ed3
1 parent e2d3445
commit e9b6ed3
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 24 deletions.
diff --git a/packages/shadergradient-v2/src/ShaderGradient/ShaderGradient.tsx b/packages/shadergradient-v2/src/ShaderGradient/ShaderGradient.tsx
@@ -17,6 +17,7 @@ export function ShaderGradient({
   rotSpringOption,
   posSpringOption,
   isFigmaPlugin = false,
+  enableTransition = true,
   ...props
 }: GradientT) {
   let controlProps = { ...defaultProps, ...props }
@@ -45,7 +46,11 @@ export function ShaderGradient({
         posSpringOption={posSpringOption}
       />
       {toggleAxis && <Axis isFigmaPlugin={isFigmaPlugin} />}
-      <CameraControl dampingFactor={dampingFactor} {...others} />
+      <CameraControl
+        dampingFactor={dampingFactor}
+        enableTransition={enableTransition}
+        {...others}
+      />
     </>
   )
 }
diff --git a/...dergradient-v2/src/ShaderGradient/comps-without-store/CameraControl/useCameraAnimation.ts b/...dergradient-v2/src/ShaderGradient/comps-without-store/CameraControl/useCameraAnimation.ts
@@ -15,6 +15,7 @@ export function useCameraAnimation({
   cDistance,
   cameraZoom,
   zoomOut,
+  enableTransition,
 }) {
   const ref: any = useRef()
   const control = ref.current
@@ -23,28 +24,28 @@ export function useCameraAnimation({
 
   // rorate the camera
   useEffect(() => {
-    control?.rotateTo(dToR(cAzimuthAngle), dToR(cPolarAngle), true)
+    control?.rotateTo(dToR(cAzimuthAngle), dToR(cPolarAngle), enableTransition)
   }, [control, cAzimuthAngle, cPolarAngle])
 
   // zoom-out tool
   useEffect(() => {
     if (zoomOut) {
       // fixed distance & zoom
       if (type === 'sphere') {
-        control?.dollyTo(zoomOutSphere.distance, true)
-        control?.zoomTo(zoomOutSphere.zoom, true)
+        control?.dollyTo(zoomOutSphere.distance, enableTransition)
+        control?.zoomTo(zoomOutSphere.zoom, enableTransition)
       } else {
-        control?.dollyTo(zoomOutPlanes.distance, true)
-        control?.zoomTo(zoomOutPlanes.zoom, true)
+        control?.dollyTo(zoomOutPlanes.distance, enableTransition)
+        control?.zoomTo(zoomOutPlanes.zoom, enableTransition)
       }
     } else {
       // control distance for planes & zoom for sphere
       if (type === 'sphere') {
-        control?.zoomTo(cameraZoom, true)
-        control?.dollyTo(defaultSphereDistance, true)
+        control?.zoomTo(cameraZoom, enableTransition)
+        control?.dollyTo(defaultSphereDistance, enableTransition)
       } else {
-        control?.dollyTo(cDistance, true)
-        control?.zoomTo(defaultPlanesZoom, true)
+        control?.dollyTo(cDistance, enableTransition)
+        control?.zoomTo(defaultPlanesZoom, enableTransition)
       }
     }
   }, [control, zoomOut, type, cameraZoom, cDistance])

diff --git a/packages/shadergradient-v2/src/types.ts b/packages/shadergradient-v2/src/types.ts
@@ -49,4 +49,6 @@ export type GradientT = MeshT & {
   zoomOut?: boolean
   toggleAxis?: boolean
   hoverState?: string
+
+  enableTransition?: boolean
 }
diff --git a/packages/shadergradient/src/Gradient/ShaderGradient.tsx b/packages/shadergradient/src/Gradient/ShaderGradient.tsx
@@ -17,6 +17,7 @@ export function ShaderGradient({
   rotSpringOption,
   posSpringOption,
   isFigmaPlugin = false,
+  enableTransition = true,
   ...props
 }: GradientT) {
   let controlProps = { ...defaultProps, ...props }
@@ -45,7 +46,11 @@ export function ShaderGradient({
         posSpringOption={posSpringOption}
       />
       {toggleAxis && <Axis isFigmaPlugin={isFigmaPlugin} />}
-      <CameraControl dampingFactor={dampingFactor} {...others} />
+      <CameraControl
+        dampingFactor={dampingFactor}
+        {...others}
+        enableTransition={enableTransition}
+      />
     </>
   )
 }
diff --git a/packages/shadergradient/src/Gradient/comps/CameraControl/useCameraAnimation.ts b/packages/shadergradient/src/Gradient/comps/CameraControl/useCameraAnimation.ts
@@ -7,7 +7,6 @@ import {
 } from '@/consts'
 import { dToR } from '@/utils'
 import { useFrame } from '@react-three/fiber'
-import { useCursorStore } from '@/store'
 
 export function useCameraAnimation({
   type,
@@ -16,6 +15,7 @@ export function useCameraAnimation({
   cDistance,
   cameraZoom,
   zoomOut,
+  enableTransition,
 }) {
   const ref: any = useRef()
   const control = ref.current
@@ -24,32 +24,31 @@ export function useCameraAnimation({
 
   // rorate the camera
   useEffect(() => {
-    control?.rotateTo(dToR(cAzimuthAngle), dToR(cPolarAngle), true)
+    control?.rotateTo(dToR(cAzimuthAngle), dToR(cPolarAngle), enableTransition)
   }, [control, cAzimuthAngle, cPolarAngle])
 
   // zoom-out tool
-  const hoverState = useCursorStore((state: any) => state.hoverState)
   useEffect(() => {
-    if (zoomOut || hoverState !== 0) {
+    if (zoomOut) {
       // fixed distance & zoom
       if (type === 'sphere') {
-        control?.dollyTo(zoomOutSphere.distance, true)
-        control?.zoomTo(zoomOutSphere.zoom, true)
+        control?.dollyTo(zoomOutSphere.distance, enableTransition)
+        control?.zoomTo(zoomOutSphere.zoom, enableTransition)
       } else {
-        control?.dollyTo(zoomOutPlanes.distance, true)
-        control?.zoomTo(zoomOutPlanes.zoom, true)
+        control?.dollyTo(zoomOutPlanes.distance, enableTransition)
+        control?.zoomTo(zoomOutPlanes.zoom, enableTransition)
       }
     } else {
       // control distance for planes & zoom for sphere
       if (type === 'sphere') {
-        control?.zoomTo(cameraZoom, true)
-        control?.dollyTo(defaultSphereDistance, true)
+        control?.zoomTo(cameraZoom, enableTransition)
+        control?.dollyTo(defaultSphereDistance, enableTransition)
       } else {
-        control?.dollyTo(cDistance, true)
-        control?.zoomTo(defaultPlanesZoom, true)
+        control?.dollyTo(cDistance, enableTransition)
+        control?.zoomTo(defaultPlanesZoom, enableTransition)
       }
     }
-  }, [control, zoomOut, hoverState, type, cameraZoom, cDistance])
+  }, [control, zoomOut, type, cameraZoom, cDistance])
 
   return ref
 }
diff --git a/packages/shadergradient/src/types.ts b/packages/shadergradient/src/types.ts
@@ -49,4 +49,6 @@ export type GradientT = MeshT & {
   zoomOut?: boolean
   toggleAxis?: boolean
   hoverState?: string
+
+  enableTransition?: boolean
 }