评测开始倒计时

src/page-instrument/evaluat-model/countdown/index.module.less

@@ -0,0 +1,25 @@
+.countdown {
+    position: fixed;
+    left: calc(50% - 66px);
+    top: calc(50% - 66px);
+    width: 132px;
+    height: 132px;
+    z-index: 200;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    opacity: 1;
+    &.step1{
+        background-image: url("./imgs/step1.png");
+    }
+    &.step2{
+        background-image: url("./imgs/step2.png");
+    }
+    &.step3{
+        background-image: url("./imgs/step3.png");
+    }
+    &.isAnimating {
+        transform: scale(0.5);
+        opacity: 0;
+    }
+}

src/page-instrument/evaluat-model/countdown/index.tsx

@@ -0,0 +1,57 @@
+import { defineComponent, reactive, onMounted} from "vue"
+import styles from "./index.module.less"
+import soundWav from './timer.mp3';
+
+let soundVIdeo: HTMLAudioElement | undefined;
+
+const countdownData = reactive({
+	isShow: false,
+	step: 3,
+	isAnimating: false
+})
+let _countdownTIme: NodeJS.Timer
+
+export function startCountdown() {
+	Object.assign(countdownData, {
+		isShow: true,
+		step: 3,
+		isAnimating: false
+	})
+	soundVIdeo?.play()
+	let resolveFun: (value: boolean) => void
+	_countdownTIme = setInterval(() => {
+		if (countdownData.step <= 0) {
+			clearInterval(_countdownTIme)
+			countdownData.isShow = false
+			resolveFun(true)
+			soundVIdeo?.pause()
+		} else {
+			countdownData.isAnimating = true
+			const _time = setTimeout(() => {
+				clearTimeout(_time)
+				countdownData.isAnimating = false
+				countdownData.step--
+			}, 300)
+		}
+	}, 1000)
+	return new Promise( resolve => {
+		resolveFun = resolve
+	})
+}
+export default defineComponent({
+	name: "countdown",
+	setup() {
+		if(!soundVIdeo) {
+			soundVIdeo = new Audio(soundWav)
+			soundVIdeo.load();
+		}
+		onMounted(()=>{
+			soundVIdeo?.pause();
+		})
+		return () => (
+			<>
+				{countdownData.isShow && <div class={[styles.countdown,countdownData.isAnimating&&styles.isAnimating, styles[`step${countdownData.step}`]]}></div>}
+			</>
+		)
+	}
+})

src/page-instrument/evaluat-model/index.tsx

@@ -21,6 +21,7 @@ import { api_musicPracticeRecordVideoUpload } from "../api";
 // import DelayCheck from "./delay-check";
 import { headTopData } from "../header-top/index";
 import { getQuery } from "/src/utils/queryString";
+import Countdown from "./countdown"
 
 const DelayCheck = defineAsyncComponent(() =>
   import('./delay-check')
@@ -400,7 +401,8 @@ export default defineComponent({
             onBack={() => handleDelayBack()}
           />
         )}
-
+        {/* 倒计时 */}
+        <Countdown />
         {/* 预加载延迟检测组建 */}
         {/* {evaluatingData.preloadJson && !evaluatingData.jsonLoadDone && (
             <div class={styles.preJson}>

src/page-instrument/view-detail/index.module.less

@@ -20,6 +20,14 @@
     &.practise{
         background: url("./images/bg1.png") no-repeat;
         background-size: 100% 100%;
+    }    
+    &.follow{
+        background: url("./images/bg3.png") no-repeat;
+        background-size: 100% 100%;
+    }    
+    &.evaluating{
+        background: url("./images/bg2.png") no-repeat;
+        background-size: 100% 100%;
     }
 
     .headHeight {

src/page-instrument/view-detail/smoothAnimation/index.ts

@@ -321,8 +321,8 @@ function getPointsPosByBatePos(): pointsPosType {
             x: item.bbox.x,
             // 当为休止符的时候 取最下面的位置*0.9，确保能显示完整
             y:
-               ((((item.frequency === -1 ? 2 * totalAv * 0.9 : item.frequency) - totalAv) / totalAv) * smoothAnimationState.canvasDomHeight) / 2 +
-               smoothAnimationState.canvasDomHeight / 2 // cavans 高度为160 所以基准为80
+               smoothAnimationState.canvasDomHeight / 2 -
+               ((((item.frequency === -1 ? 2 * totalAv * 0.1 : item.frequency) - totalAv) / totalAv) * smoothAnimationState.canvasDomHeight) / 2
          })
       }
       return posArr

src/view/evaluating/index.tsx

@@ -53,6 +53,7 @@ import icon_close from '../abnormal-pop/icon_close.svg'
 import icon_btn from '../abnormal-pop/icon_btn.svg'
 import icon_success from '../abnormal-pop/icon_success.svg'
 import { data } from '../../page-instrument/custom-plugins/work-index'
+import { startCountdown } from "/src/page-instrument/evaluat-model/countdown"
 
 const browserInfo = browser();
 
@@ -363,6 +364,8 @@ export const handleStartBegin = async (preTimes?: number) => {
 	}
 	evaluatingData.startBegin = true;
 	if (evaluatingData.isDisabledPlayMusic) {
+		// 先播放倒计时
+		await startCountdown()
 		state.playState = state.playState === "paused" ? "play" : "paused";
 		// 设置为开始播放时, 如果需要节拍,先播放节拍器
 		if (state.playState === "play" && (state.playType==="play"&&state.needTick)||(state.playType==="sing"&&state.needSingTick)) {