feats

config/index.js

@@ -17,6 +17,7 @@ const config = {
   alias: {
     '@/': path.resolve(__dirname, '..', 'src/'),
     '@/components': path.resolve(__dirname, '..', 'src/components'),
+    '@/hooks': path.resolve(__dirname, '..', 'src/hooks'),
     '@/utils': path.resolve(__dirname, '..', 'src/utils'),
   },
   copy: {

jsconfig.json

@@ -8,6 +8,7 @@
     "paths": {      
       "@/assets/*": ["./src/assets/*"],
       "@/components/*": ["./src/components/*"],
+      "@/hooks/*": ["./src/hooks/*"],
       "@/utils/*": ["./src/utils/*"],
     }
   }

src/components/Counter/index.jsx

@@ -25,6 +25,7 @@ const ShakeCount = (props) => {
       })
 
       isReady.current = true
+      S.performAction(value)
     }
   }, [])
 

src/components/Shake/index.jsx

@@ -1,53 +0,0 @@
-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'
-
-import './style.less'
-
-const { onShake } = newShake()
-
-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(times)
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const handleShake = useCallback(throttle((times) => {
-    setTimes(times)
-
-    if (onTimes) {
-      onTimes(times)
-    }
-  }, 500, { trailing: true, immediate: true }), [])
-
-  useDidShow(() => {
-    Taro.startAccelerometer()
-
-    Taro.onAccelerometerChange((e) => {
-      onShake(e, () => {
-        timesRef.current += 1
-        console.log('---times: ', timesRef.current)
-        handleShake(timesRef.current)
-        // S.performAction(timesRef.current)
-      })
-    })
-  })
-
-  useDidHide(() => {
-    Taro.startAccelerometer()
-  })
-
-  return (
-    <View className={classNames}>
-      <Counter value={times} />
-    </View>
-  )
-}
-
-export default ShakeCount;

src/components/Shake/style.less

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

src/hooks/useInterval.jsx

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useRef } from "react"
+
+/**
+ * 定时器
+ * 执行一系列的函数
+ * @param {*} interval 
+ * @returns
+ */
+export default function useInterval(interval) {
+
+  // 待执行函数列表
+  const fnListRef = useRef([])
+
+  // 暴露出一个方法来添加待执行函数
+  const push = useCallback((fn) => {
+    fnListRef.current.push(fn)
+
+    return () => {
+      const inx = fnListRef.current.indexOf(fn)
+      fnListRef.current.splice(inx)
+    }
+  }, [])
+
+  useEffect(() => {
+    const ticker = setInterval(() => {
+      console.log('-----------interval---------')
+      fnListRef.current.forEach(fn => fn())
+    }, interval)
+    return () => clearInterval(ticker)
+  }, [])
+
+  return [push]
+}

src/pages/index/hooks/useCountDown.js

@@ -0,0 +1,22 @@
+import { useCallback, useRef, useState } from "react";
+
+export default function useCountDown() {
+
+  const [val, setVal] = useState()
+  const numRef = useRef()
+
+  const countDown = useCallback(() => {
+    if (numRef.current <= 0) {
+      return
+    }
+    numRef.current -= 1
+    setVal(numRef.current)
+  }, [])
+
+  const start = useCallback((startNum) => {
+    numRef.current = startNum
+    setVal(startNum)
+  }, [])
+
+  return [val, countDown, start]
+}

src/pages/index/hooks/useShake.js

@@ -0,0 +1,69 @@
+
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react'
+import Taro, { useDidHide, useDidShow } from '@tarojs/taro'
+import { throttle } from '@/utils'
+import newShake from '@/utils/shake'
+
+export default function useShake() {
+  const [times, setTimes] = useState(0)
+  const timesRef = useRef(times)
+  const isReadyRef = useRef(false)
+  const lastTimeRef = useRef()
+
+  const onShake = useMemo(() => newShake().onShake, [])
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleShake = useCallback(throttle((val) => {
+    setTimes(val)
+  }, 1000, { trailing: true, immediate: true }), [])
+
+  const start = useCallback(() => {
+    isReadyRef.current = true
+    timesRef.current = 0
+    setTimes(0)
+  }, [])
+
+  const handleEndRef = useRef()
+  const onEnd = useCallback(callback => handleEndRef.current = callback, []) 
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (isReadyRef.current) {
+        const now = new Date()
+
+        // 超过 1s 就算停止摇动了
+        if (lastTimeRef.current && now - lastTimeRef.current >= 1000) {
+          if (handleEndRef.current) {
+            setTimes(timesRef.current)
+            handleEndRef.current()
+            lastTimeRef.current = undefined
+          }
+          isReadyRef.current = false
+        }
+      }
+    }, 1000)
+
+    return () => clearInterval(interval)
+  },[])
+  
+  useDidShow(() => {
+    Taro.startAccelerometer()
+
+    Taro.onAccelerometerChange((e) => {
+      if (isReadyRef.current) {
+        onShake(e, () => {
+          timesRef.current += 1
+          console.log('--->times: ', timesRef.current)
+          handleShake(timesRef.current)
+          lastTimeRef.current = new Date()
+        })
+      }
+    })
+  })
+
+  useDidHide(() => {
+    Taro.startAccelerometer()
+  })
+
+  return [times, start, onEnd]
+}

src/pages/index/index.jsx

@@ -1,18 +1,70 @@
+
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { View } from '@tarojs/components'
-import ShakeCount from '@/components/Shake'
+import Counter from '@/components/Counter'
 import { Button } from '@antmjs/vantui';
+import useInterval from '@/hooks/useInterval';
 import TopBar from './components/TopBar'
-
+import useCountDown from './hooks/useCountDown';
+import useShake from './hooks/useShake';
 import './index.less'
 
 const IndexPage = (props) => {
+  const modRef = useRef('ready')
+  const [num, setNum] = useState(0)
+  const [btnDisable, setBtnDisable] = useState(false)
+
+  // 定时器
+  const [add2TickerList] = useInterval(1000)
+
+  // 倒计时
+  const [count, countFn, startCount] = useCountDown();
+  useMemo(() => add2TickerList(countFn), [])
+
+  // 摇一摇
+  const [times, startShake, onShakeEnd] = useShake()
+  onShakeEnd(() => {
+    // 摇一摇结束
+    modRef.current = 'ready'
+    setBtnDisable(false)
+    // do something
+  })
+
+  const handleStart = () => {
+    modRef.current = 'countdown'
+    startCount(3)
+    setBtnDisable(true)
+  }
+
+  useEffect(() => {
+    if (modRef.current === 'countdown') {
+      setNum(count)
+    } else {
+      setNum(times)
+    }
+  }, [count, times])
+
+  useEffect(() => {
+    if (modRef.current === 'countdown') {
+      if (count === 0) {
+        modRef.current = 'shake'
+        startShake()
+      }
+    }
+  }, [count])
 
   return (
     <View className='page-wrapper page-index'>
-      <ShakeCount className='shake-bg' />
+      <Counter className='shake-bg' value={num} />
       <TopBar />
       <View style={{ width: '80vw', position: 'fixed', bottom: '2em', left: '10vw' }} >
-        <Button block round color='linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36))'>开 始</Button>
+        <Button
+          block
+          round
+          color='linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36))'
+          onClick={handleStart}
+          disabled={btnDisable}
+        >开 始</Button>
       </View>      
     </View>
   )