feature: 动画

components/Live2D.js

@@ -1,39 +1,20 @@
 /* eslint-disable no-undef */
 import { useEffect } from 'react'
 
+let hasLoad = false
 export default function Live2D () {
   useEffect(() => {
-    if (window) {
+    if (window && !hasLoad) {
       initLive2D()
+      hasLoad = true
     }
   })
   return <div className='fixed left-0 bottom-0 hidden md:block lg:ml-24 2xl:ml-36'>
-    <canvas id="live2d" width="280" height="250"></canvas>
+    <canvas id="live2d"className='animate__slideInLeft animate__animated' width="280" height="250"></canvas>
   </div>
 }
 
 function initLive2D () {
-  // 封装异步加载资源的方法
-  function loadExternalResource (url, type) {
-    return new Promise((resolve, reject) => {
-      let tag
-
-      if (type === 'css') {
-        tag = document.createElement('link')
-        tag.rel = 'stylesheet'
-        tag.href = url
-      } else if (type === 'js') {
-        tag = document.createElement('script')
-        tag.src = url
-      }
-      if (tag) {
-        tag.onload = () => resolve(url)
-        tag.onerror = () => reject(url)
-        document.head.appendChild(tag)
-      }
-    })
-  }
-
   // 加载 waifu.css live2d.min.js waifu-tips.js
   if (screen.width >= 768) {
     Promise.all([
@@ -45,3 +26,24 @@ function initLive2D () {
     })
   }
 }
+
+// 封装异步加载资源的方法
+function loadExternalResource (url, type) {
+  return new Promise((resolve, reject) => {
+    let tag
+
+    if (type === 'css') {
+      tag = document.createElement('link')
+      tag.rel = 'stylesheet'
+      tag.href = url
+    } else if (type === 'js') {
+      tag = document.createElement('script')
+      tag.src = url
+    }
+    if (tag) {
+      tag.onload = () => resolve(url)
+      tag.onerror = () => reject(url)
+      document.head.appendChild(tag)
+    }
+  })
+}