feat: 在第一屏增加波浪动画 (#462)

* feat: 在第一屏增加波浪动画

* feat: 默认隐藏波浪动画并使其适配视频模式

settings.yaml

@@ -182,6 +182,18 @@ spec:
               label: 开启
             - value: false
               label: 关闭
+        - $formkit: radio
+          name: focus_wave
+          id: focus_wave
+          key: focus_wave
+          if: "$get(head_focus).value == true && $get(focus_height).value == true"
+          label: 波浪效果
+          value: false
+          options:
+            - value: true
+              label: 开启
+            - value: false
+              label: 关闭
         - $formkit: attachment
           if: "$get(head_focus).value == true"
           name: focus_img_1

src/css/common/components/screen/index.css

@@ -2,4 +2,6 @@
 
 @import "video-box";
 
+@import "wave.css";
+
 @import "top-down.css";

src/css/common/components/screen/wave.css

@@ -0,0 +1,33 @@
+.home-wave {
+  z-index: 1;
+  position: relative;
+  width: 400%;
+  transition: 0.4s ease all;
+
+  & > div {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+
+  & .wave-1 {
+    height: 65px;
+    left: -236px;
+    animation: wave 100s linear 0s infinite;
+  }
+
+  & .wave-2 {
+    height: 80px;
+    left: 0px;
+    animation: wave 240s linear 0s infinite;
+  }
+}
+
+@keyframes wave {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-50.5%);
+  }
+}

src/page/index.ts

@@ -69,6 +69,7 @@ export default class Index {
     videoContainerElement.insertAdjacentElement("afterbegin", document.createElement("video"));
     const videoStatusElement = videoContainerElement.querySelector(".video-status") as HTMLDivElement;
     const focusInfoElement = document.querySelector(".focusinfo") as HTMLDivElement;
+    const homeWaveElement = document.querySelector(".home-wave") as HTMLDivElement;
     const videoPlayButtonElement = videoContainerElement.querySelector(".video-play") as HTMLDivElement;
     const videoPauseButtonElement = videoContainerElement.querySelector(".video-pause") as HTMLDivElement;
 
@@ -99,6 +100,7 @@ export default class Index {
 
           videoPlayer.on("loadeddata", () => {
             videoStatusElement.style.bottom = "-100px";
+            homeWaveElement.style.bottom = "-100px";
             focusInfoElement.style.top = "-999px";
             videoPlayButtonElement.style.display = "none";
             videoPauseButtonElement.style.display = "block";
@@ -107,6 +109,7 @@ export default class Index {
 
           videoPlayer.on("play", () => {
             videoStatusElement.style.bottom = "-100px";
+            homeWaveElement.style.bottom = "-100px";
             focusInfoElement.style.top = "-999px";
             videoPlayButtonElement.style.display = "none";
             videoPauseButtonElement.style.display = "block";
@@ -115,6 +118,7 @@ export default class Index {
           videoPlayer.on("pause", () => {
             videoStatusElement.innerHTML = sakura.translate("home.video.statu_pause", "已暂停 ...");
             videoStatusElement.style.bottom = "0";
+            homeWaveElement.style.bottom = "0";
             focusInfoElement.style.top = "0";
             videoPlayButtonElement.style.display = "block";
             videoPauseButtonElement.style.display = "none";
@@ -133,6 +137,7 @@ export default class Index {
             videoStatusElement.innerHTML = sakura.translate("home.video.statu_error", "视频播放错误");
             setTimeout(() => {
               focusInfoElement.style.top = "0";
+              homeWaveElement.style.bottom = "0";
               videoStatusElement.style.bottom = "-100px";
               videoPlayButtonElement.style.display = "block";
               videoPauseButtonElement.style.display = "none";
@@ -144,6 +149,7 @@ export default class Index {
 
           videoPlayer.on("ended", () => {
             focusInfoElement.style.top = "0";
+            homeWaveElement.style.bottom = "0";
             videoStatusElement.style.bottom = "-100px";
             videoPlayButtonElement.style.display = "block";
             videoPauseButtonElement.style.display = "none";

templates/module/home/index.html

@@ -4,6 +4,9 @@
   <th:block th:if="${theme.config.mainScreen.bgvideo}">
     <th:block th:replace="~{module/home/video_box}"></th:block>
   </th:block>
+  <th:block th:if="${theme.config.mainScreen.focus_wave}">
+    <th:block th:replace="~{module/home/wave}"></th:block>
+  </th:block>
   <th:block th:if="${theme.config.mainScreen.focus_godown}">
     <th:block th:replace="~{module/home/go_down}"></th:block>
   </th:block>

templates/module/home/wave.html

@@ -0,0 +1,8 @@
+<th:block
+  th:if="${theme.config.mainScreen.focus_height}"
+>
+  <div class="home-wave">
+    <div class="wave-1" th:style="|background: url(${#theme.assets('/images/wave/wave1.png')}) repeat-x|"></div>
+    <div class="wave-2" th:style="|background: url(${#theme.assets('/images/wave/wave2.png')}) repeat-x|"></div>
+  </div>
+</th:block>