小鸟飞 动画效果

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

@@ -0,0 +1,9 @@
+.brid{
+    width: 100%;
+}
+.note{
+    position: absolute;
+    width: 40Px;
+    top: -16Px;
+    left: -28Px;
+}

src/page-instrument/view-detail/smoothAnimation/bird/index.tsx

@@ -0,0 +1,25 @@
+import { defineComponent } from "vue"
+import { Vue3Lottie } from "vue3-lottie";
+import styles from "./index.module.less"
+import state from "/src/state"
+import fly from "./imgs/fly.json"
+import stilln from "./imgs/stilln.json"
+import note from "./imgs/note.json"
+
+export default defineComponent({
+    name: "Bird",
+    setup() {
+        return () => <>
+                {
+                    state.playState === "paused" ?
+                        <Vue3Lottie key={1} class={styles.brid} animationData={stilln} autoPlay={true} loop={true}></Vue3Lottie>
+                        :
+                        <>
+                            <Vue3Lottie key={2} class={styles.brid} animationData={fly} autoPlay={true} loop={true}></Vue3Lottie>
+                            <Vue3Lottie key={2} class={styles.note} animationData={note} autoPlay={true} loop={true}></Vue3Lottie>
+                        </>
+                }
+            
+        </>
+    }
+})

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

@@ -11,8 +11,6 @@
         position: relative;
         .smoothBot{
             position: absolute;
-            background: url("./bird.png") no-repeat;
-            background-size: 100% 100%;
             width: 40Px;
             height: 50Px;
             left: 0;

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

@@ -1,10 +1,11 @@
 /**
  * 一行谱动画
  */
-import { watch, ref, Ref } from "vue"
+import { watch, ref, Ref, h, render } from "vue"
 import { getAudioCurrentTime } from "/src/view/audio-list"
 import state from "/src/state"
 import "./index.less"
+import Bird from "./bird"
 
 type pointsPosType = { x: number; y: number; MeasureNumberXML: number }[]
 type smoothAnimationType = {
@@ -301,6 +302,8 @@ function createSmoothAnimation() {
    const smoothBotDom = document.createElement("div")
    smoothBotDom.className = "smoothBot"
    smoothAnimationState.smoothBotDom = smoothBotDom
+   // 添加小鸟
+   render(h(Bird), smoothBotDom)
    smoothAnimationConDom.appendChild(smoothCanvasDom)
    smoothAnimationConDom.appendChild(smoothBotDom)
    smoothAnimationBoxDom.appendChild(smoothAnimationConDom)