提交静态资源
This commit is contained in:
zerosaturation
parent
21630016f5
commit
083f71b6e0
BIN
frontend/static/animation/animation1.mp4
Normal file
BIN
frontend/static/animation/animation1.mp4
Normal file
Binary file not shown.
BIN
frontend/static/animation/animation2.mp4
Normal file
BIN
frontend/static/animation/animation2.mp4
Normal file
Binary file not shown.
BIN
frontend/static/animation/animation3.mp4
Normal file
BIN
frontend/static/animation/animation3.mp4
Normal file
Binary file not shown.
1
frontend/static/uni.webview.1.5.5.js
Normal file
1
frontend/static/uni.webview.1.5.5.js
Normal file
File diff suppressed because one or more lines are too long
883
frontend/static/welcome-animation-app.html
Normal file
883
frontend/static/welcome-animation-app.html
Normal file
@ -0,0 +1,883 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
<!-- 引入 uni 的 JS bridge，让 HTML 能使用 uni.postMessage 与父 webview 通信 -->
|
||||||
|
<script src="uni.webview.1.5.5.js"></script>
|
||||||
|
<style>
|
||||||
|
@font-face {
|
||||||
|
font-family: "MyAnimFont";
|
||||||
|
src: url("fonts/animation.ttf") format("truetype");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: white;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
touch-action: manipulation;
|
||||||
|
position: relative;
|
||||||
|
isolation: isolate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 9999;
|
||||||
|
background: white;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
isolation: isolate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-text {
|
||||||
|
width: 20vw;
|
||||||
|
font-size: 9vw;
|
||||||
|
background: linear-gradient(45deg, #b52920 20%, #56c1ff, #86d9e0);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
position: absolute;
|
||||||
|
right: 10vw;
|
||||||
|
top: 3vh;
|
||||||
|
z-index: 100;
|
||||||
|
font-family: "MyAnimFont", sans-serif;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-text::first-letter {
|
||||||
|
font-size: 12vw;
|
||||||
|
margin-left: 0.67vw;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-layer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-media {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-role {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene1-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene1-dialog {
|
||||||
|
position: absolute;
|
||||||
|
width: 37.33vw;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(1.73vw);
|
||||||
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-bg.dialog-bg-oval-1 {
|
||||||
|
width: 60vw;
|
||||||
|
height: 22vh;
|
||||||
|
left: -7vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-bg.dialog-bg-oval-2 {
|
||||||
|
transform: scale(3);
|
||||||
|
width: 50vw;
|
||||||
|
height: 20vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-bg.dialog-bg-oval-3 {
|
||||||
|
transform: scale(4);
|
||||||
|
width: 25vw;
|
||||||
|
height: 12vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-bg.dialog-bg-oval-4 {
|
||||||
|
transform: scale(1.6);
|
||||||
|
width: 45vw;
|
||||||
|
height: 13vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-bg.dialog-bg-oval-5 {
|
||||||
|
transform: scale(1.6);
|
||||||
|
width: 45vw;
|
||||||
|
height: 13vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene1-dialog.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene2-layout {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene2-item {
|
||||||
|
position: absolute;
|
||||||
|
left: 1.47vw;
|
||||||
|
right: 1.47vw;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene2-item-1 {
|
||||||
|
top: 12vw;
|
||||||
|
height: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene2-item-2 {
|
||||||
|
top: calc(12vw + 25% + 1.47vw);
|
||||||
|
height: 30%;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene2-item-2.visible {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene2-item-3 {
|
||||||
|
bottom: 23.8vw;
|
||||||
|
height: 30%;
|
||||||
|
width: 75%;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene2-item-3.visible {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene2-video {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene2-video-right {
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
width: 80%;
|
||||||
|
height: 90%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene2-dialog-on-video3,
|
||||||
|
.scene2-dialog-on-video4 {
|
||||||
|
position: absolute;
|
||||||
|
width: 37.33vw;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(1.73vw);
|
||||||
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene2-dialog-on-video3.visible,
|
||||||
|
.scene2-dialog-on-video4.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-bg.dialog-bg-oval {
|
||||||
|
transform: scale(3);
|
||||||
|
width: 40vw;
|
||||||
|
height: 34vw;
|
||||||
|
left: 2vw;
|
||||||
|
top: -2vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-bg.dialog-bg-oval1 {
|
||||||
|
width: 45vw;
|
||||||
|
height: 18vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene3-layout {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene3-top {
|
||||||
|
height: 60%;
|
||||||
|
position: relative;
|
||||||
|
margin: 10vw 1.47vw 2.8vw 1.47vw;
|
||||||
|
border-radius: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene3-bottom {
|
||||||
|
height: 24%;
|
||||||
|
width: 80vw;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 1.47vw 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene3-video {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene4-layout {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene4-item {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene4-item-1 {
|
||||||
|
margin: 35vw 1.47vw 2.8vw 1.47vw;
|
||||||
|
height: 22%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene4-item-2 {
|
||||||
|
height: 35%;
|
||||||
|
width: 88%;
|
||||||
|
margin: 0 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene4-monster {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 27vh;
|
||||||
|
width: 20vw;
|
||||||
|
height: 20vw;
|
||||||
|
z-index: 1;
|
||||||
|
transform: scale(4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene4-video {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topfans-arrow-wrapper {
|
||||||
|
width: 90vw;
|
||||||
|
position: absolute;
|
||||||
|
left: 5vw;
|
||||||
|
bottom: 3.6vw;
|
||||||
|
transform: translateX(-4.4vw);
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
z-index: 50;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topfans-arrow-wrapper.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topfans-text {
|
||||||
|
width: 70vw;
|
||||||
|
font-size: 16vw;
|
||||||
|
background: linear-gradient(45deg, #b52920 10%, #56c1ff, #86d9e0);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
font-family: "MyAnimFont", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topfans-text::first-letter {
|
||||||
|
font-size: 18vw;
|
||||||
|
margin-left: 0.67vw;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10vw;
|
||||||
|
height: 10vw;
|
||||||
|
background: linear-gradient(35deg, rgba(255, 107, 157, 0.9) 35%, rgba(255, 177, 153, 0.9) 70%);
|
||||||
|
clip-path: polygon(0% 40%, 40% 40%, 40% 0%, 100% 50%, 40% 100%, 40% 60%, 0% 60%);
|
||||||
|
filter: drop-shadow(0.27vw 0.4vw 0.27vw rgba(0, 0, 0, 0.3));
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0 0.93vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.67vw;
|
||||||
|
left: 0;
|
||||||
|
width: 36vw;
|
||||||
|
height: 17.33vw;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-text-wrapper-vertical {
|
||||||
|
position: relative;
|
||||||
|
left: 6.67vw;
|
||||||
|
z-index: 1;
|
||||||
|
width: 23.67vw;
|
||||||
|
height: 17.73vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-text-wrapper-vertical.dialog-text-wrapper-vertical-on-video3 {
|
||||||
|
left: 0;
|
||||||
|
top: 1vh;
|
||||||
|
width: 44.4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-text-wrapper-vertical.dialog-text-wrapper-vertical-on-video4 {
|
||||||
|
left: -1vw;
|
||||||
|
top: 5vh;
|
||||||
|
width: 48.4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-text-wrapper-vertical.dialog-text-wrapper-vertical-on-video5 {
|
||||||
|
left: -6vw;
|
||||||
|
width: 58vw;
|
||||||
|
top: 6vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-text-wrapper-vertical.dialog-text-wrapper-vertical-on-video6 {
|
||||||
|
width: 35vw;
|
||||||
|
left: -7vw;
|
||||||
|
top: 2vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-text-wrapper-vertical.dialog-text-wrapper-vertical-on-video7 {
|
||||||
|
width: 51vw;
|
||||||
|
top: 2vh;
|
||||||
|
left: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-text-wrapper-vertical.dialog-text-wrapper-vertical-on-video8 {
|
||||||
|
width: 45vw;
|
||||||
|
left: 6vw;
|
||||||
|
top: 2.5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-text-vertical {
|
||||||
|
font-size: 2.5vw;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0.4vw;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-text-vertical.dialog-text-vertical-on-video3 {
|
||||||
|
font-size: 4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-text-vertical.dialog-text-vertical-on-video5 {
|
||||||
|
font-size: 4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene6-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene6-bg {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app" class="welcome-mask" ontouchstart="handleBodyClick(event)">
|
||||||
|
<div class="header-text">SKIP</div>
|
||||||
|
|
||||||
|
<div class="background-layer">
|
||||||
|
<!-- 场景1 -->
|
||||||
|
<div class="scene active" id="scene0">
|
||||||
|
<div class="scene1-wrapper">
|
||||||
|
<video class="bg-media" data-src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/animation1.mp4" loop autoplay muted playsinline
|
||||||
|
webkit-playsinline></video>
|
||||||
|
<div class="scene1-dialog visible" id="scene0-dialog" style="left:40vw;top:25vh;transform: scale(1.5);">
|
||||||
|
<img class="dialog-bg" src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/dialog-monster/dialog.png">
|
||||||
|
<div class="dialog-text-wrapper-vertical">
|
||||||
|
<span class="dialog-text-vertical">这些限量款徽章都没舍得用过……</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 场景2 -->
|
||||||
|
<div class="scene" id="scene1">
|
||||||
|
<div class="scene2-layout">
|
||||||
|
<div class="scene2-item scene2-item-1">
|
||||||
|
<video class="scene2-video" data-src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/animation3.mp4" loop muted playsinline
|
||||||
|
webkit-playsinline></video>
|
||||||
|
</div>
|
||||||
|
<div class="scene2-item scene2-item-2" id="scene2-video2">
|
||||||
|
<video class="scene2-video scene2-video-right" data-src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/animation4.mp4" loop
|
||||||
|
muted playsinline webkit-playsinline></video>
|
||||||
|
</div>
|
||||||
|
<div class="scene2-dialog-on-video3" id="scene2-dialog" style="left:11vw;top:30vh;">
|
||||||
|
<img class="dialog-bg dialog-bg-oval" src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/dialog-monster/oval-dialog1.png">
|
||||||
|
<div class="dialog-text-wrapper-vertical dialog-text-wrapper-vertical-on-video3">
|
||||||
|
<span class="dialog-text-vertical dialog-text-vertical-on-video3">啊啊啊，这张小卡怎么褪色了555</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scene2-item scene2-item-3" id="scene2-video3">
|
||||||
|
<video class="scene2-video" data-src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/animation5.mp4" loop muted playsinline
|
||||||
|
webkit-playsinline></video>
|
||||||
|
</div>
|
||||||
|
<div class="scene2-dialog-on-video4" id="scene2-dialog2" style="left:37vw;top:60vh;">
|
||||||
|
<img class="dialog-bg dialog-bg-oval1" src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/dialog-monster/dialog2.png">
|
||||||
|
<div class="dialog-text-wrapper-vertical" style="width: 36vw;top: 3.5vh;left: 5vw;">
|
||||||
|
<span class="dialog-text-vertical" style="font-size: 4vw;">当时可是排好久才买到的。。。。</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 场景3 -->
|
||||||
|
<div class="scene" id="scene2">
|
||||||
|
<div class="scene3-layout">
|
||||||
|
<div class="scene3-top">
|
||||||
|
<video class="scene3-video" data-src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/animation2.mp4" loop muted playsinline
|
||||||
|
webkit-playsinline></video>
|
||||||
|
<div class="scene1-dialog visible" id="scene3-dialog" style="left:44vw;top:9vh;">
|
||||||
|
<img class="dialog-bg dialog-bg-oval-1" src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/dialog-monster/dialog2.png">
|
||||||
|
<div class="dialog-text-wrapper-vertical dialog-text-wrapper-vertical-on-video4">
|
||||||
|
<span class="dialog-text-vertical" style="font-size: 4vw;">这些都是我的宝贝，难道都会悄悄褪色吗?</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scene3-bottom" id="scene3-bottom" style="display:none;">
|
||||||
|
<video class="scene3-video" data-src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/animation6.mp4" loop muted playsinline
|
||||||
|
webkit-playsinline></video>
|
||||||
|
<div class="scene1-dialog visible" id="scene3-dialog2" style="left:-4vw;top:6vh;">
|
||||||
|
<img class="dialog-bg dialog-bg-oval-2"
|
||||||
|
src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/dialog-monster/rounded-corner-dialog1.png">
|
||||||
|
<div class="dialog-text-wrapper-vertical dialog-text-wrapper-vertical-on-video5">
|
||||||
|
<span class="dialog-text-vertical" style="font-size: 4vw;">当然不会！角角我能让这些，铸造成永久的藏品。</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 场景4 -->
|
||||||
|
<div class="scene" id="scene3">
|
||||||
|
<div class="scene4-layout">
|
||||||
|
<div class="scene4-item scene4-item-1">
|
||||||
|
<video class="scene4-video" data-src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/animation7.mp4" loop muted playsinline
|
||||||
|
webkit-playsinline></video>
|
||||||
|
<div class="scene1-dialog visible" id="scene4-dialog" style="left:55vw;top:-8vh;">
|
||||||
|
<img class="dialog-bg dialog-bg-oval-3"
|
||||||
|
src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/dialog-monster/rounded-corner-dialog1.png">
|
||||||
|
<div class="dialog-text-wrapper-vertical dialog-text-wrapper-vertical-on-video6">
|
||||||
|
<span class="dialog-text-vertical" style="font-size: 5vw;">真的吗，我要怎么做?</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scene4-item scene4-item-2" id="scene4-video2" style="display:none;">
|
||||||
|
<video class="scene4-video" data-src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/animation8.mp4" loop muted playsinline
|
||||||
|
webkit-playsinline></video>
|
||||||
|
<div class="scene1-dialog visible" id="scene4-dialog2" style="left:13vw;top:33vh;">
|
||||||
|
<img class="dialog-bg dialog-bg-oval-4" src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/dialog-monster/dialog3.png">
|
||||||
|
<div class="dialog-text-wrapper-vertical dialog-text-wrapper-vertical-on-video7">
|
||||||
|
<span class="dialog-text-vertical" style="font-size: 4vw;">只需要告诉我Ta的名字，我就能带你去Ta的TopFans。</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img class="scene4-monster" id="scene4-monster"
|
||||||
|
src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/dialog-monster/monster.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 场景5 -->
|
||||||
|
<div class="scene" id="scene4">
|
||||||
|
<div class="scene-role"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 场景6 -->
|
||||||
|
<div class="scene" id="scene5">
|
||||||
|
<div class="scene6-wrapper">
|
||||||
|
<div class="scene6-bg">
|
||||||
|
<video class="bg-media" data-src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/animation9.mp4" loop muted playsinline
|
||||||
|
webkit-playsinline></video>
|
||||||
|
<div class="scene1-dialog visible" id="scene6-dialog" style="left:30vw;top:17vh;">
|
||||||
|
<img class="dialog-bg dialog-bg-oval-5" src="https://top-fans-test.oss-cn-shanghai.aliyuncs.com/openscreen/animation/dialog-monster/dialog3.png">
|
||||||
|
<div class="dialog-text-wrapper-vertical dialog-text-wrapper-vertical-on-video8">
|
||||||
|
<span class="dialog-text-vertical" style="font-size: 4.5vw;">好，传送门打开了，我们出发吧</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="topfans-arrow-wrapper" id="topfans-wrapper">
|
||||||
|
<span class="topfans-text">TOPFANS</span>
|
||||||
|
<span class="arrow-icon" id="btn" onclick="handleNextScene(event)"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 全局变量
|
||||||
|
var currentScene = 0;
|
||||||
|
var contentVisible = false;
|
||||||
|
var dialogVisible = false;
|
||||||
|
var scene2SubPhase = 0;
|
||||||
|
var scene3SubPhase = 0;
|
||||||
|
var scene4SubPhase = 0;
|
||||||
|
var autoShowTimer = null;
|
||||||
|
var lastBodyClickTime = 0;
|
||||||
|
var lastNextSceneTime = 0;
|
||||||
|
|
||||||
|
// DOM 缓存 & 视频按场景分组
|
||||||
|
var domCache = {};
|
||||||
|
var sceneVideos = {};
|
||||||
|
var activeSceneEl = null;
|
||||||
|
|
||||||
|
function initDomCache() {
|
||||||
|
domCache.scene2Dialog = document.getElementById('scene2-dialog');
|
||||||
|
domCache.scene2Dialog2 = document.getElementById('scene2-dialog2');
|
||||||
|
domCache.scene2Video2 = document.getElementById('scene2-video2');
|
||||||
|
domCache.scene2Video3 = document.getElementById('scene2-video3');
|
||||||
|
domCache.scene3Bottom = document.getElementById('scene3-bottom');
|
||||||
|
domCache.scene4Video2 = document.getElementById('scene4-video2');
|
||||||
|
domCache.topfansWrapper = document.getElementById('topfans-wrapper');
|
||||||
|
domCache.allScene1Dialogs = document.querySelectorAll('.scene1-dialog');
|
||||||
|
domCache.allDialogs = document.querySelectorAll('.scene1-dialog, .scene2-dialog-on-video3, .scene2-dialog-on-video4');
|
||||||
|
for (var i = 0; i <= 5; i++) {
|
||||||
|
var sceneEl = document.getElementById('scene' + i);
|
||||||
|
sceneVideos[i] = sceneEl ? Array.prototype.slice.call(sceneEl.querySelectorAll('video')) : [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按需加载视频 src 并播放（只播放当前可见的视频）
|
||||||
|
function loadAndPlaySceneVideos(n) {
|
||||||
|
var videos = sceneVideos[n] || [];
|
||||||
|
for (var i = 0; i < videos.length; i++) {
|
||||||
|
var v = videos[i];
|
||||||
|
// 跳过隐藏容器内的视频（由 subPhase 推进时单独处理）
|
||||||
|
if (v.closest && v.closest('[style*="display: none"], [style*="display:none"]')) continue;
|
||||||
|
if (!v.src && v.dataset.src) { v.src = v.dataset.src; }
|
||||||
|
v.play().catch(function () { });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暂停场景所有视频
|
||||||
|
function pauseSceneVideos(n) {
|
||||||
|
var videos = sceneVideos[n] || [];
|
||||||
|
for (var i = 0; i < videos.length; i++) { videos[i].pause(); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 对话框位置已直接写在 HTML style 属性中，无需 JS 计算
|
||||||
|
|
||||||
|
function showScene(n) {
|
||||||
|
if (activeSceneEl) {
|
||||||
|
pauseSceneVideos(currentScene);
|
||||||
|
activeSceneEl.classList.remove('active');
|
||||||
|
}
|
||||||
|
var nextEl = document.getElementById('scene' + n);
|
||||||
|
nextEl.classList.add('active');
|
||||||
|
activeSceneEl = nextEl;
|
||||||
|
currentScene = n;
|
||||||
|
loadAndPlaySceneVideos(n);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showDialog() {
|
||||||
|
dialogVisible = true;
|
||||||
|
if (currentScene === 1) {
|
||||||
|
if (scene2SubPhase >= 1 && domCache.scene2Dialog) domCache.scene2Dialog.classList.add('visible');
|
||||||
|
if (scene2SubPhase >= 2 && domCache.scene2Dialog2) domCache.scene2Dialog2.classList.add('visible');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var dialogs = domCache.allScene1Dialogs;
|
||||||
|
for (var i = 0; i < dialogs.length; i++) { dialogs[i].classList.add('visible'); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideDialog() {
|
||||||
|
dialogVisible = false;
|
||||||
|
var dialogs = domCache.allDialogs;
|
||||||
|
for (var i = 0; i < dialogs.length; i++) { dialogs[i].classList.remove('visible'); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateTopfans() {
|
||||||
|
if (!domCache.topfansWrapper) return;
|
||||||
|
if (currentScene <= 3 && contentVisible) {
|
||||||
|
domCache.topfansWrapper.classList.add('visible');
|
||||||
|
} else {
|
||||||
|
domCache.topfansWrapper.classList.remove('visible');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 等待 uni bridge 就绪
|
||||||
|
document.addEventListener('UniAppJSBridgeReady', function () {
|
||||||
|
console.log('[APP] UniAppJSBridgeReady fired');
|
||||||
|
});
|
||||||
|
|
||||||
|
// App端消息发送
|
||||||
|
function postMessage(action) {
|
||||||
|
console.log('[APP] postMessage:', action, 'currentScene:', currentScene);
|
||||||
|
if (window.parent && window.parent !== window) {
|
||||||
|
window.parent.postMessage({ action: action, scene: currentScene }, '*');
|
||||||
|
}
|
||||||
|
if (typeof uni !== 'undefined' && uni.postMessage) {
|
||||||
|
uni.postMessage({ data: { action: action, scene: currentScene } });
|
||||||
|
} else {
|
||||||
|
setTimeout(function () {
|
||||||
|
if (typeof uni !== 'undefined' && uni.postMessage) {
|
||||||
|
uni.postMessage({ data: { action: action, scene: currentScene } });
|
||||||
|
} else {
|
||||||
|
console.log('[APP] uni.postMessage still not available');
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleNextScene(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
var now = Date.now();
|
||||||
|
if (now - lastNextSceneTime < 400) return;
|
||||||
|
lastNextSceneTime = now;
|
||||||
|
|
||||||
|
if (currentScene === 0) { showScene(1); resetScene(); }
|
||||||
|
else if (currentScene === 1) { showScene(2); resetScene(); }
|
||||||
|
else if (currentScene === 2) { showScene(3); resetScene(); }
|
||||||
|
else if (currentScene === 3) { showScene(4); postMessage('selectRole'); }
|
||||||
|
else if (currentScene === 5) { postMessage('complete'); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleBodyClick(e) {
|
||||||
|
var now = Date.now();
|
||||||
|
if (now - lastBodyClickTime < 400) return;
|
||||||
|
lastBodyClickTime = now;
|
||||||
|
if (currentScene === 1) {
|
||||||
|
if (scene2SubPhase === 0) {
|
||||||
|
scene2SubPhase = 1;
|
||||||
|
if (autoShowTimer) { clearTimeout(autoShowTimer); autoShowTimer = null; }
|
||||||
|
domCache.scene2Video2.classList.add('visible');
|
||||||
|
var v2 = domCache.scene2Video2.querySelector('video');
|
||||||
|
if (v2 && !v2.src && v2.dataset.src) { v2.src = v2.dataset.src; }
|
||||||
|
if (v2) v2.play().catch(function () { });
|
||||||
|
setTimeout(function () { domCache.scene2Dialog.classList.add('visible'); }, 300);
|
||||||
|
autoShowTimer = setTimeout(function () {
|
||||||
|
if (scene2SubPhase === 1) {
|
||||||
|
scene2SubPhase = 2;
|
||||||
|
domCache.scene2Video3.classList.add('visible');
|
||||||
|
var v3 = domCache.scene2Video3.querySelector('video');
|
||||||
|
if (v3 && !v3.src && v3.dataset.src) { v3.src = v3.dataset.src; }
|
||||||
|
if (v3) v3.play().catch(function () { });
|
||||||
|
setTimeout(function () { domCache.scene2Dialog2.classList.add('visible'); }, 300);
|
||||||
|
autoShowTimer = setTimeout(function () {
|
||||||
|
if (!contentVisible) { contentVisible = true; updateTopfans(); }
|
||||||
|
}, 4800);
|
||||||
|
}
|
||||||
|
}, 4800);
|
||||||
|
} else if (scene2SubPhase === 1) {
|
||||||
|
scene2SubPhase = 2;
|
||||||
|
if (autoShowTimer) { clearTimeout(autoShowTimer); autoShowTimer = null; }
|
||||||
|
domCache.scene2Video3.classList.add('visible');
|
||||||
|
var v3b = domCache.scene2Video3.querySelector('video');
|
||||||
|
if (v3b && !v3b.src && v3b.dataset.src) { v3b.src = v3b.dataset.src; }
|
||||||
|
if (v3b) v3b.play().catch(function () { });
|
||||||
|
setTimeout(function () { domCache.scene2Dialog2.classList.add('visible'); }, 300);
|
||||||
|
autoShowTimer = setTimeout(function () {
|
||||||
|
if (!contentVisible) { contentVisible = true; updateTopfans(); }
|
||||||
|
}, 4800);
|
||||||
|
} else if (scene2SubPhase === 2) {
|
||||||
|
if (!contentVisible) { contentVisible = true; updateTopfans(); }
|
||||||
|
}
|
||||||
|
} else if (currentScene === 2) {
|
||||||
|
if (scene3SubPhase === 0) {
|
||||||
|
scene3SubPhase = 1;
|
||||||
|
domCache.scene3Bottom.style.display = 'block';
|
||||||
|
var vb = domCache.scene3Bottom.querySelector('video');
|
||||||
|
if (vb && !vb.src && vb.dataset.src) { vb.src = vb.dataset.src; }
|
||||||
|
if (vb) vb.play().catch(function () { });
|
||||||
|
setTimeout(showDialog, 300);
|
||||||
|
} else if (scene3SubPhase === 1) { if (!contentVisible) { contentVisible = true; updateTopfans(); } }
|
||||||
|
} else if (currentScene === 3) {
|
||||||
|
if (scene4SubPhase === 0) {
|
||||||
|
scene4SubPhase = 1;
|
||||||
|
domCache.scene4Video2.style.display = 'block';
|
||||||
|
var v4 = domCache.scene4Video2.querySelector('video');
|
||||||
|
if (v4 && !v4.src && v4.dataset.src) { v4.src = v4.dataset.src; }
|
||||||
|
if (v4) v4.play().catch(function () { });
|
||||||
|
setTimeout(showDialog, 300);
|
||||||
|
} else if (scene4SubPhase === 1) { if (!contentVisible) { contentVisible = true; updateTopfans(); } }
|
||||||
|
} else {
|
||||||
|
if (currentScene <= 3 && !contentVisible) { contentVisible = true; updateTopfans(); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetScene() {
|
||||||
|
if (autoShowTimer) clearTimeout(autoShowTimer);
|
||||||
|
contentVisible = false;
|
||||||
|
dialogVisible = false;
|
||||||
|
scene2SubPhase = 0; scene3SubPhase = 0; scene4SubPhase = 0;
|
||||||
|
if (domCache.scene2Video2) domCache.scene2Video2.classList.remove('visible');
|
||||||
|
if (domCache.scene2Video3) domCache.scene2Video3.classList.remove('visible');
|
||||||
|
if (domCache.scene3Bottom) domCache.scene3Bottom.style.display = 'none';
|
||||||
|
if (domCache.scene4Video2) domCache.scene4Video2.style.display = 'none';
|
||||||
|
hideDialog();
|
||||||
|
updateTopfans();
|
||||||
|
if (currentScene !== 1) { setTimeout(showDialog, 300); }
|
||||||
|
|
||||||
|
if (currentScene === 0) {
|
||||||
|
autoShowTimer = setTimeout(function () { contentVisible = true; updateTopfans(); }, 4800);
|
||||||
|
} else if (currentScene === 1) {
|
||||||
|
autoShowTimer = setTimeout(function () {
|
||||||
|
if (scene2SubPhase === 0) {
|
||||||
|
scene2SubPhase = 1;
|
||||||
|
domCache.scene2Video2.classList.add('visible');
|
||||||
|
var v2 = domCache.scene2Video2.querySelector('video');
|
||||||
|
if (v2 && !v2.src && v2.dataset.src) { v2.src = v2.dataset.src; }
|
||||||
|
if (v2) v2.play().catch(function () { });
|
||||||
|
setTimeout(function () { domCache.scene2Dialog.classList.add('visible'); }, 300);
|
||||||
|
autoShowTimer = setTimeout(function () {
|
||||||
|
if (scene2SubPhase === 1) {
|
||||||
|
scene2SubPhase = 2;
|
||||||
|
domCache.scene2Video3.classList.add('visible');
|
||||||
|
var v3 = domCache.scene2Video3.querySelector('video');
|
||||||
|
if (v3 && !v3.src && v3.dataset.src) { v3.src = v3.dataset.src; }
|
||||||
|
if (v3) v3.play().catch(function () { });
|
||||||
|
setTimeout(function () { domCache.scene2Dialog2.classList.add('visible'); }, 300);
|
||||||
|
autoShowTimer = setTimeout(function () {
|
||||||
|
if (!contentVisible) { contentVisible = true; updateTopfans(); }
|
||||||
|
}, 4800);
|
||||||
|
}
|
||||||
|
}, 4800);
|
||||||
|
}
|
||||||
|
}, 3800);
|
||||||
|
} else if (currentScene === 2) {
|
||||||
|
autoShowTimer = setTimeout(function () {
|
||||||
|
if (scene3SubPhase === 0) {
|
||||||
|
scene3SubPhase = 1;
|
||||||
|
domCache.scene3Bottom.style.display = 'block';
|
||||||
|
var vb = domCache.scene3Bottom.querySelector('video');
|
||||||
|
if (vb && !vb.src && vb.dataset.src) { vb.src = vb.dataset.src; }
|
||||||
|
if (vb) vb.play().catch(function () { });
|
||||||
|
setTimeout(showDialog, 300);
|
||||||
|
}
|
||||||
|
}, 8800);
|
||||||
|
} else if (currentScene === 3) {
|
||||||
|
autoShowTimer = setTimeout(function () {
|
||||||
|
if (scene4SubPhase === 0) {
|
||||||
|
scene4SubPhase = 1;
|
||||||
|
domCache.scene4Video2.style.display = 'block';
|
||||||
|
var v4 = domCache.scene4Video2.querySelector('video');
|
||||||
|
if (v4 && !v4.src && v4.dataset.src) { v4.src = v4.dataset.src; }
|
||||||
|
if (v4) v4.play().catch(function () { });
|
||||||
|
setTimeout(showDialog, 300);
|
||||||
|
}
|
||||||
|
}, 3800);
|
||||||
|
}
|
||||||
|
// 场景5(scene index 5): 无需自动定时，等待 complete 消息
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
window.onload = function () {
|
||||||
|
console.log('[APP] welcome-animation-app loaded, uni type:', typeof uni);
|
||||||
|
initDomCache();
|
||||||
|
activeSceneEl = document.getElementById('scene0');
|
||||||
|
|
||||||
|
// 读取 URL 参数，支持直接跳到指定场景
|
||||||
|
var urlParams = new URLSearchParams(window.location.search);
|
||||||
|
var startScene = parseInt(urlParams.get('scene') || '0');
|
||||||
|
|
||||||
|
if (startScene > 0) {
|
||||||
|
showScene(startScene);
|
||||||
|
setTimeout(showDialog, 500);
|
||||||
|
} else {
|
||||||
|
loadAndPlaySceneVideos(0);
|
||||||
|
setTimeout(showDialog, 500);
|
||||||
|
autoShowTimer = setTimeout(function () { contentVisible = true; updateTopfans(); }, 5000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user