chenkainan
/
shanjuandong
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

动画

master
chenkainan 4 months ago
parent
79cb2b3a50
commit
97074ba1bb
1 changed files with 238 additions and 193 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 431
      pages/index/index.vue

431
pages/index/index.vue
View File

@ -1,200 +1,245 @@
<template>
<view class="bg">
<!-- <view class="content" :style="{backgroundImage: 'url('+imgSrc+')'}" @click="click"
@touchstart="touchStart" @touchend="touchEnd"></view> -->
<view class="content" v-show="number == 0">
<image class="bg-image" src="/static/1/1.png" mode="widthFix"></image>
<image src="/static/1/1btn.png" class="btn_1" @click="click"></image>
</view>
<view class="content content_2" v-show="number == 1">
<image class="title_2" src="/static/1/2title.png" ></image>
<view class="progress-container">
<view class="progress" :style="{'width':progressNum+'%'}">
<image class="dongxiao" src="/static/1/loading.png"></image>
</view>
</view>
<view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressNum}}%</view>
</view>
<view class="content" v-show="number == 2" @click="click"
@touchstart="touchStart" @touchend="touchEnd">
<image class="bg-image" style="opacity: 0;" src="/static/1/2.png" mode="widthFix"></image>
<swiper class="swiper-box" :vertical="true">
<swiper-item >
<image class="bg-image" src="/static/1/2.png" mode="widthFix"></image>
</swiper-item>
</swiper>
</view>
<!-- 天生有善 后生友善 按钮 -->
<view class="content" v-show="number == 3">
<image class="bg-image" src="/static/1/3.png" mode="widthFix"></image>
<view class="btn-box" >
<image src="/static/1/btn1.png" mode="" class="btn1"></image>
<image src="/static/1/btn2.png" mode="" class="btn2" @click="gotoPath('/pages/index/tiansheng')"></image>
<image src="/static/1/btn3.png" mode="" class="btn2" @click="gotoPath('/pages/index/dongLing')" style="left: 449rpx;"></image>
</view>
</view>
</view>
<view class="bg">
<!-- 第一页 -->
<view :class="['content', {'content-first': isFlipFade}]" v-show="currentPage === 0">
<image class="bg-image" src="/static/1/1.png" mode="widthFix"></image>
<image src="/static/1/1btn.png" class="btn_1" @click="handleFirstPageClick"></image>
</view>
<!-- 加载页 -->
<view class="content content_2" v-show="currentPage === 1">
<image class="title_2" src="/static/1/2title.png"></image>
<view class="progress-container">
<view class="progress" :style="{'width': progressPercentage + '%'}">
<image class="dongxiao" src="/static/1/loading.png"></image>
</view>
</view>
<view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressPercentage}}%</view>
</view>
<!-- 第二页 -->
<view class="content" v-show="currentPage === 2" @click="handlePageClick" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
<image class="bg-image" style="opacity: 0;" src="/static/1/2.png" mode="widthFix"></image>
<swiper class="swiper-box" :vertical="true">
<swiper-item>
<image class="bg-image" src="/static/1/2.png" mode="widthFix"></image>
</swiper-item>
</swiper>
</view>
<!-- 第三页 -->
<view class="content" v-show="currentPage === 3">
<image class="bg-image" src="/static/1/3.png" mode="widthFix"></image>
<view class="btn-box">
<image src="/static/1/btn1.png" mode="" class="btn1"></image>
<image src="/static/1/btn2.png" mode="" class="btn2" @click="navigateToPage('/pages/index/tiansheng')"></image>
<image src="/static/1/btn3.png" mode="" class="btn2" @click="navigateToPage('/pages/index/dongLing')" style="left: 449rpx;"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imgSrc: require('static/1/1.png'),
progressNum: 0,
number: 0,
startY: 0,
}
},
onLoad() {
},
methods: {
gotoPath(url) {
uni.navigateTo({
url: url
})
},
click() {
this.number += 1
switch (this.number){
case 1:
this.startProgress()
break;
case 2:
this.imgSrc = require('static/1/2.png')
break;
case 3:
this.imgSrc = require('static/1/3.png')
break;
default:
break;
}
},
startProgress() {
let timer = setInterval(()=>{
this.progressNum++
if (this.progressNum>=100) {
this.progressNum = 100
clearInterval(timer)
this.number = 2
}
},10)
},
touchStart(e) {
this.startY = e.changedTouches[0].clientY;
},
touchEnd(e) {
const endY = e.changedTouches[0].clientY;
const distanceY = this.startY - endY;
if (distanceY > 50 && this.number == 2) {
console.log('上滑操作触发');
setTimeout(()=>{this.click()},100)
// 在此处编写上滑操作执行的逻辑
}
},
}
}
export default {
data() {
return {
progressPercentage: 0,
currentPage: 0,
startTouchY: 0,
isFlipFade: false,
progressTimer: null
};
},
onLoad() {
// 页面加载时的逻辑
},
methods: {
// 跳转到指定页面
navigateToPage(url) {
uni.navigateTo({
url
});
},
// 处理第一页按钮点击事件
handleFirstPageClick() {
this.isFlipFade = true;
setTimeout(() => {
this.handlePageClick();
}, 1500);
},
// 处理页面点击事件
handlePageClick() {
this.currentPage++;
this.updatePageContent();
},
// 根据当前页面更新内容
updatePageContent() {
switch (this.currentPage) {
case 1:
this.startProgress();
break;
case 2:
// 这里可以添加第二页的特殊逻辑
break;
case 3:
// 这里可以添加第三页的特殊逻辑
break;
default:
break;
}
},
// 开始加载进度条
startProgress() {
this.progressTimer = setInterval(() => {
this.progressPercentage++;
if (this.progressPercentage >= 100) {
this.progressPercentage = 100;
clearInterval(this.progressTimer);
this.currentPage = 2;
}
}, 10);
},
// 处理触摸开始事件
handleTouchStart(e) {
this.startTouchY = e.changedTouches[0].clientY;
},
// 处理触摸结束事件
handleTouchEnd(e) {
const endY = e.changedTouches[0].clientY;
const distanceY = this.startTouchY - endY;
if (distanceY > 50 && this.currentPage === 2) {
console.log('上滑操作触发');
setTimeout(() => {
this.handlePageClick();
}, 100);
}
}
},
beforeDestroy() {
// 组件销毁前清除定时器
if (this.progressTimer) {
clearInterval(this.progressTimer);
}
}
};
</script>
<style lang="scss" scoped>
.bg{
width: 100%;
min-height: 100vh;
font-size: 0;
background: black;
}
.content {
width: 100%;
min-height: 100vh;
position: relative;
.bg-image{
width: 100%;
min-height: 100vh;
height: auto;
}
.btn_1{
width: 569rpx;
height: 74rpx;
position: absolute;
bottom: 68rpx;
left: 95rpx;
}
&.content_2{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.title_2{
width: 65rpx;
height: 76rpx;
}
.progress-container{
width: 387rpx;
height: 24rpx;
border-radius: 20rpx;
border: 2px solid #8F76EE;
margin: 26rpx 0;
.progress{
height: 100%;
background: rgba(143,118,238,0.3);
border-radius: 20rpx;
width: 0;
overflow: hidden;
position: relative;
}
}
}
}
.btn-box {
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
image {
position: absolute;
}
.btn1 {
width: 298rpx;
height: 62rpx;
top: 810rpx;
left: 229rpx;
}
.btn2 {
width: 243rpx;
height: 74rpx;
bottom: 223rpx;
left: 78rpx;
}
}
.dongxiao{
position: absolute;
right: 0;
height: 100%;
width: 158rpx;
}
.swiper-box{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
.bg {
width: 100%;
min-height: 100vh;
font-size: 0;
background: black;
}
.content {
width: 100%;
min-height: 100vh;
position: relative;
.bg-image {
width: 100%;
min-height: 100vh;
height: auto;
}
.btn_1 {
width: 569rpx;
height: 74rpx;
position: absolute;
bottom: 68rpx;
left: 95rpx;
}
&.content_2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.title_2 {
width: 65rpx;
height: 76rpx;
}
.progress-container {
width: 387rpx;
height: 24rpx;
border-radius: 20rpx;
border: 2px solid #8F76EE;
margin: 26rpx 0;
.progress {
height: 100%;
background: rgba(143, 118, 238, 0.3);
border-radius: 20rpx;
width: 0;
overflow: hidden;
position: relative;
}
}
}
}
.btn-box {
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
image {
position: absolute;
}
.btn1 {
width: 298rpx;
height: 62rpx;
top: 810rpx;
left: 229rpx;
}
.btn2 {
width: 243rpx;
height: 74rpx;
bottom: 223rpx;
left: 78rpx;
}
}
.dongxiao {
position: absolute;
right: 0;
height: 100%;
width: 158rpx;
}
.swiper-box {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
}
.content-first {
animation: flipFade 2s forwards;
opacity: 1;
transform: rotateY(0deg);
}
/* 定义动画 */
@keyframes flipFade {
0% {
opacity: 1;
transform: rotateY(0deg);
}
100% {
opacity: 0;
transform: rotateY(180deg);
}
}
</style>
Write Preview
Loading…
Cancel
Save