feats

src/components/Counter/index.jsx

@@ -0,0 +1,85 @@
+import { View, Canvas } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import S from '@/utils/shape-shifter'
+
+import './style.less'
+
+const ShakeCount = (props) => {
+  const { className, value } = props
+  const classNames = useMemo(() => [className, 'canvas-counter'].filter(Boolean).join(' '), [className])
+
+  const canvasId = useMemo(() => `f-${Math.random().toString(36).substring(2)}`, [])
+  const canvasRef = useRef()
+  const canvasShapeRef = useRef()
+  const isReady = useRef(false)
+
+  const initS = useCallback(() => {
+    if (canvasRef.current && canvasShapeRef.current) {
+
+      S.init({
+        canvas: canvasRef.current,
+        shape: canvasShapeRef.current,
+        width: canvasRef.current.width,
+        height: canvasRef.current.height
+      })
+
+      isReady.current = true
+    }
+  }, [])
+
+  useEffect(() => {
+    if (isReady.current) {
+      S.performAction(value)
+    }
+  }, [value])
+
+  useEffect(() => {
+    Taro.nextTick(() => {
+      Taro.createSelectorQuery()
+        .select(`#${canvasId}`)
+        .fields({ node: true, size: true })
+        .exec((res) => {
+          const canvas = res[0].node
+          const ctx = canvas.getContext('2d')
+
+          const dpr = Taro.getSystemInfoSync().pixelRatio
+          const width = res[0].width * dpr
+          const height = res[0].height * dpr
+          canvas.width = width
+          canvas.height = height
+          ctx.scale(dpr, dpr)
+          
+          canvasRef.current = canvas
+          initS()
+        })
+
+      Taro.createSelectorQuery()
+        .select(`#${canvasId}-canvas-shape`)
+        .fields({ node: true, size: true })
+        .exec((res) => {
+          const canvas = res[0].node
+          const ctx = canvas.getContext('2d')
+
+          const dpr = Taro.getSystemInfoSync().pixelRatio
+          const width = res[0].width * dpr
+          const height = res[0].height * dpr
+          canvas.width = width
+          canvas.height = height
+          ctx.scale(dpr, dpr)
+          
+          canvasShapeRef.current = canvas
+          initS()
+        })
+    })
+  }, [canvasId, initS])
+
+  return (
+    <View className={classNames}>
+      <Canvas id={`${canvasId}-canvas-shape`} className='canvas-shape' type='2d'></Canvas>
+      <Canvas id={canvasId} type='2d'></Canvas>
+    </View>
+  )
+}
+
+export default ShakeCount;

src/components/Counter/style.less

@@ -0,0 +1,17 @@
+.canvas-counter {
+  width: 100%;
+  height: 100%;
+
+  canvas {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    &.canvas-shape {
+      top: -200vw;
+      left: -200vh;
+    }
+  }
+}

src/components/Shake/index.jsx

@@ -1,6 +1,7 @@
 import { View, Canvas } from '@tarojs/components'
 import Taro, { useDidHide, useDidShow } from '@tarojs/taro'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import Counter from '@/components/Counter'
 import { throttle } from '@/utils'
 import newShake from '@/utils/shake'
 import S from '@/utils/shape-shifter'
@@ -13,37 +14,18 @@ const ShakeCount = (props) => {
   const { className, onTimes } = props
   const classNames = useMemo(() => [className, 'shake-count'].filter(Boolean).join(' '), [className])
 
-  // const [times, setTimes] = useState(0)
-  const timesRef = useRef(0)
-  // timesRef.current = times
-
-  const canvasId = useMemo(() => `f-${Math.random().toString(36).substring(2)}`, [])
-  const canvasRef = useRef()
-  const canvasShapeRef = useRef()
+  const [times, setTimes] = useState(0)
+  const timesRef = useRef(times)
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const handleShake = useCallback(throttle((times) => {
-    S.performAction(times)
+    setTimes(times)
 
     if (onTimes) {
       onTimes(times)
     }
   }, 500, { trailing: true, immediate: true }), [])
 
-  const initS = useCallback(() => {
-    if (canvasRef.current && canvasShapeRef.current) {
-
-      S.init({
-        canvas: canvasRef.current,
-        shape: canvasShapeRef.current,
-        width: canvasRef.current.width,
-        height: canvasRef.current.height
-      })
-
-      S.performAction(0)
-    }
-  }, [])
-
   useDidShow(() => {
     Taro.startAccelerometer()
 
@@ -61,50 +43,9 @@ const ShakeCount = (props) => {
     Taro.startAccelerometer()
   })
 
-  useEffect(() => {
-    Taro.nextTick(() => {
-      Taro.createSelectorQuery()
-        .select(`#${canvasId}`)
-        .fields({ node: true, size: true })
-        .exec((res) => {
-          const canvas = res[0].node
-          const ctx = canvas.getContext('2d')
-
-          const dpr = Taro.getSystemInfoSync().pixelRatio
-          const width = res[0].width * dpr
-          const height = res[0].height * dpr
-          canvas.width = width
-          canvas.height = height
-          ctx.scale(dpr, dpr)
-          
-          canvasRef.current = canvas
-          initS()
-        })
-
-      Taro.createSelectorQuery()
-        .select(`#${canvasId}-canvas-shape`)
-        .fields({ node: true, size: true })
-        .exec((res) => {
-          const canvas = res[0].node
-          const ctx = canvas.getContext('2d')
-
-          const dpr = Taro.getSystemInfoSync().pixelRatio
-          const width = res[0].width * dpr
-          const height = res[0].height * dpr
-          canvas.width = width
-          canvas.height = height
-          ctx.scale(dpr, dpr)
-          
-          canvasShapeRef.current = canvas
-          initS()
-        })
-    })
-  }, [canvasId, initS])
-
   return (
     <View className={classNames}>
-      <Canvas id={`${canvasId}-canvas-shape`} className='canvas-shape' type='2d'></Canvas>
-      <Canvas id={canvasId} type='2d'></Canvas>
+      <Counter value={times} />
     </View>
   )
 }

src/pages/index/index.jsx

@@ -12,7 +12,7 @@ const IndexPage = (props) => {
       <ShakeCount className='shake-bg' />
       <TopBar />
       <View style={{ width: '80vw', position: 'fixed', bottom: '2em', left: '10vw' }} >
-        <Button block round color='linear-gradient(to right, #4bb0ff, #6149f6)'>开 始</Button>
+        <Button block round color='linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36))'>开 始</Button>
       </View>      
     </View>
   )