完成大概流程
This commit is contained in:
梁泽军
@@ -12,7 +12,7 @@ const start = (event) => {
|
||||
gsap.to(".IndexPage", {
|
||||
duration: 0.5,
|
||||
autoAlpha: 0,
|
||||
onComplete: () => {
|
||||
onComplete: () => {
|
||||
emit("IndexPage", { action: "start" });
|
||||
},
|
||||
});
|
||||
@@ -36,15 +36,18 @@ const showRule = (event) => {
|
||||
|
||||
onMounted(() => {
|
||||
gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
|
||||
gsap.from(".index-bottom-bg", { duration: 1, y: 100, });
|
||||
gsap.from(".index-windows", { duration: 1, scale: 0.5,autoAlpha:0, });
|
||||
gsap.from(".index-pet", { duration: 1, y: -50,autoAlpha:0,delay:0.5 });
|
||||
gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0,delay:1 });
|
||||
gsap.from(".index-fan-1", { duration: 1, x: -220, autoAlpha: 0,delay:0.5 });
|
||||
gsap.from(".index-fan-3", { duration: 1, x: 220, autoAlpha: 0,delay:0.5 });
|
||||
gsap.from(".index-fan-2", { duration: 1, x: -220, autoAlpha: 0,delay:0.75 });
|
||||
gsap.from(".index-fan-4", { duration: 1, x: 220, autoAlpha: 0,delay:0.75 });
|
||||
gsap.from(".index-logo", { duration: 1, y: 20, autoAlpha: 0,delay:0.75 });
|
||||
gsap.from(".index-bottom-bg", { duration: 1, y: 100, });
|
||||
gsap.from(".index-windows", { duration: 1, scale: 0.5, autoAlpha: 0, });
|
||||
gsap.from(".index-pet", { duration: 1, y: -50, autoAlpha: 0, delay: 0.5 });
|
||||
gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0, delay: 1 });
|
||||
gsap.from(".index-sub-title", { duration: 1, scale: 0, autoAlpha: 0, delay: 1.2 });
|
||||
gsap.from(".index-fan-1", { duration: 1, x: -220, autoAlpha: 0, delay: 0.5 });
|
||||
gsap.from(".index-fan-3", { duration: 1, x: 220, autoAlpha: 0, delay: 0.5 });
|
||||
gsap.from(".index-firework", { duration: 1, scale: 0, autoAlpha: 0, delay: 0.3 });
|
||||
gsap.from(".index-fan-2", { duration: 1, x: -220, autoAlpha: 0, delay: 0.75 });
|
||||
gsap.from(".index-gift", { duration: 1, y: 50, autoAlpha: 0, delay: 0.75 });
|
||||
gsap.from(".index-fan-4", { duration: 1, x: 220, autoAlpha: 0, delay: 0.75 });
|
||||
gsap.from(".index-logo", { duration: 1, y: 20, autoAlpha: 0, delay: 0.75 });
|
||||
gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 });
|
||||
gsap.from(".index-prize-btn", {
|
||||
duration: 1,
|
||||
@@ -63,20 +66,19 @@ onMounted(() => {
|
||||
scale: 0.4,
|
||||
autoAlpha: 0,
|
||||
delay: 0.5,
|
||||
onComplete:()=>{
|
||||
onComplete: () => {
|
||||
// gsap.to('.index-cloud',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
|
||||
gsap.to('.index-fan-1',{duration:2,x:'-=30',repeat:-1,yoyo:true,ease:'none'})
|
||||
gsap.to('.index-fan-2',{duration:1.5,x:'-=20',repeat:-1,yoyo:true,ease:'none'})
|
||||
gsap.to('.index-fan-3',{duration:1.5,y:'+=20',repeat:-1,yoyo:true,ease:'none'})
|
||||
gsap.to('.index-fan-4',{duration:2,x:'+=20',repeat:-1,yoyo:true,ease:'none'})
|
||||
gsap.to('.index-pet',{duration:2,y:'-=10',repeat:-1,yoyo:true,ease:'none'})
|
||||
gsap.to('.index-fan-1', { duration: 2, x: '-=30', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.index-fan-2', { duration: 1.5, x: '-=20', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.index-fan-3', { duration: 1.5, y: '+=20', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.index-fan-4', { duration: 2, x: '+=20', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.index-pet', { duration: 2, y: '-=10', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.index-gift', { duration: 2, y: '-=10', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.index-start-btn', { duration: 1, scale: '0.85', repeat: -1, yoyo: true, ease: 'bounce.out' })
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
const vcNum = ref(false);
|
||||
@@ -97,12 +99,14 @@ const showVC = () => {
|
||||
<div class="index-fan-3"></div>
|
||||
<div class="index-fan-4"></div>
|
||||
<div class="index-logo"></div>
|
||||
<div class="index-gift"></div>
|
||||
<div class="index-firework"></div>
|
||||
<div class="index-bottom-bg"></div>
|
||||
<!-- <div class="index-cloud"></div> -->
|
||||
<div class="index-firework"></div>
|
||||
<div class="index-windows"></div>
|
||||
<div class="index-pet"></div>
|
||||
<div class="index-title" @click="showVC"></div>
|
||||
<div class="index-sub-title"></div>
|
||||
<div class="index-rule-btn" @click="showRule($event)"></div>
|
||||
<div class="index-prize-btn" v-if="userStore.hasPrize" @click="showMyPrize($event)"></div>
|
||||
<div class="index-start-btn" @click="start"></div>
|
||||
@@ -132,57 +136,61 @@ const showVC = () => {
|
||||
@include pos(750px, 1624px, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
|
||||
.index-bottom-bg{
|
||||
.index-bottom-bg {
|
||||
pointer-events: none;
|
||||
@include pos(750px, 549px, 0px, 1075px);
|
||||
@include bg_pos("index/bottom-bg.png");
|
||||
}
|
||||
|
||||
.index-fan-1{
|
||||
.index-fan-1 {
|
||||
pointer-events: none;
|
||||
@include pos(235px, 574px, 0px, 60px);
|
||||
@include bg_pos("index/fan-1.png");
|
||||
}
|
||||
.index-fan-2{
|
||||
|
||||
.index-fan-2 {
|
||||
pointer-events: none;
|
||||
@include pos(316px, 317px, -205px, 405px);
|
||||
@include bg_pos("index/fan-2.png");
|
||||
}
|
||||
.index-logo{
|
||||
|
||||
.index-logo {
|
||||
pointer-events: none;
|
||||
@include pos(632px, 94px, 59px, 180px);
|
||||
@include bg_pos("index/logo.png");
|
||||
}
|
||||
.index-fan-3{
|
||||
|
||||
.index-fan-3 {
|
||||
pointer-events: none;
|
||||
@include pos(370px, 334px, 545px, 910px);
|
||||
@include bg_pos("index/fan-3.png");
|
||||
}
|
||||
.index-fan-4{
|
||||
|
||||
.index-fan-4 {
|
||||
pointer-events: none;
|
||||
@include pos(350px, 205px, 494px, 1011px);
|
||||
@include bg_pos("index/fan-4.png");
|
||||
}
|
||||
|
||||
.index-cloud{
|
||||
.index-cloud {
|
||||
pointer-events: none;
|
||||
@include pos(88px, 46px, 621px, 253px);
|
||||
@include bg_pos("index/cloud.png");
|
||||
}
|
||||
|
||||
.index-firework{
|
||||
.index-gift {
|
||||
pointer-events: none;
|
||||
@include pos(120px, 120px, 651px, 474px);
|
||||
@include bg_pos("index/firework.png");
|
||||
@include pos(169px, 172px, 16px, 1004px);
|
||||
@include bg_pos("index/gift-icon.png");
|
||||
}
|
||||
|
||||
.index-windows{
|
||||
.index-windows {
|
||||
pointer-events: none;
|
||||
@include pos(743px, 744px, 3px, 440px);
|
||||
@include bg_pos("index/windows.png");
|
||||
}
|
||||
|
||||
.index-pet{
|
||||
.index-pet {
|
||||
pointer-events: none;
|
||||
@include pos(378px, 452px, 187px, 614px);
|
||||
@include bg_pos("index/pet-icon.png");
|
||||
@@ -190,10 +198,22 @@ const showVC = () => {
|
||||
|
||||
.index-title {
|
||||
// pointer-events: none;
|
||||
@include pos(631px, 115px, 57px, 291px);
|
||||
@include pos(528px, 198px, 111px, 231px);
|
||||
@include bg_pos("index/title.png");
|
||||
}
|
||||
|
||||
.index-sub-title {
|
||||
pointer-events: none;
|
||||
@include pos(200px, 130px, 517px, 472px);
|
||||
@include bg_pos("index/sub-title.png");
|
||||
}
|
||||
|
||||
.index-firework {
|
||||
pointer-events: none;
|
||||
@include pos(95px, 95px, -38px, 889px);
|
||||
@include bg_pos("index/firework.png");
|
||||
}
|
||||
|
||||
.index-rule-btn {
|
||||
@include pos(184px, 49px, -37px, 506px);
|
||||
@include bg_pos("index/rule-btn.png");
|
||||
|
||||
Reference in New Issue
Block a user