Natural progress animation

web-app/src/containers/Tutorial/components/ProgressPie.tsx

@@ -1,27 +1,14 @@
 import * as React from 'react'
 import { Progress, Icon } from '@alifd/next'
+import useNaturalProgress from 'services/hooks/useNaturalProgress'
 
 interface Props {
   current: number
   max: number
 }
 
 const ProgressPie = (props: Props) => {
-  const [progress, setProgress] = React.useState(0)
-
-  React.useEffect(() => {
-    let timeout: any
-    if (progress < props.current) {
-      timeout = setTimeout(() => {
-        setProgress(progress + 1)
-      }, 100)
-    }
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout)
-      }
-    }
-  }, [progress])
+  const progress = useNaturalProgress({ stop: props.current })
 
   const progressPercent = Math.floor((progress / props.max) * 100)
 

web-app/src/services/hooks/useNaturalProgress.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+
+interface ProgressConfig {
+  start?: number
+  stop: number
+  updateDuration?: number
+}
+
+const useNaturalProgress = (config: ProgressConfig): number => {
+  const { start, stop, updateDuration } = config
+  const [progress, setProgress] = useState(start || 0)
+  useEffect(() => {
+    let timeout: any
+    let difference = (stop - progress) / 4
+    // for difference>0.01 update progress or make it stop
+    let newProgress = difference > 0.01 ? progress + difference : stop
+    if (progress < stop) {
+      timeout = setTimeout(() => {
+        setProgress(newProgress)
+      }, updateDuration || 100)
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout)
+      }
+    }
+  }, [progress, stop, updateDuration])
+  return progress
+}
+
+export default useNaturalProgress