Skip to content

M
mini-program-wepy
Commit fcd7cf84 authored by 郝聪敏's avatar 郝聪敏
Browse files
Options

新增签到动画；新增开奖动画

parent bddcdc91
Show whitespace changes
Inline Side-by-side
Showing with 194 additions and 115 deletions
package.json
View file @ fcd7cf84
......@@ -4,7 +4,7 @@
"description": "一个基于wepy的小程序项目",
"main": "weapp/app.js",
"scripts": {
"dev": "./node_modules/.bin/wepy build --watch",
"dev": "./node_modules/.bin/wepy build --watch --log trace",
"build": "cross-env NODE_ENV=production ./node_modules/.bin/wepy build --no-cache",
"clean": "rm -rf weapp",
"lint": "eslint --fix --cache --ext .js,.wpy src",
......
src/components/custom/openAnimation.wpy
View file @ fcd7cf84
<template>
<div class="loading-container" :class="{'opened': opened}">
<div class="open-container" :class="{'opened': opened}" v-if="showAnimation">
<div class="bg rotate"></div>
<div class="mod-chest" @tap="click">
<div class="chest-close" :class="{'shake': shake, 'show': showChest}">
<div class="gift"></div>
</div>
<div class="chest-open" :class="{'show': show, 'blur': blur}">
<div class="mod-chest-cont open-cont">
<div class="mod-chest-cont">
<div class="content">
<div class="gift">
x 500
感谢您的参与
</div>
</div>
<div class="func">
<van-button custom-class="chest-btn" round type="info" @tap="go">再次挑战</van-button>
<van-button custom-class="chest-btn" round type="info" @tap="go">查看</van-button>
</div>
</div>
</div>
</div>
......@@ -22,6 +26,7 @@
wepy.component({
data: {
showAnimation: false,
showChest: true,
shake: false,
opened: false,
......@@ -30,7 +35,6 @@
},
methods: {
click: function() {
console.log('click');
this.shake = true;
setTimeout(() => {
this.opened = true;
......@@ -42,23 +46,36 @@
}, 500);
}, 200);
}, 1200);
},
go() {
this.showAnimation = false;
}
},
created() {
setTimeout(() => {
this.showAnimation = true;
this.click();
}, 2000);
}
});
</script>
<style lang="less">
.loading-container {
.open-container {
position: absolute;
width: 100%;
height: 100%;
background: grey;
background: rgba(112,112,112, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
z-index: 10;
}
.bg{position: absolute;z-index: 1;background:url('http://activitystatic.xyqb.com/light.png') 0px 0px no-repeat;background-size:452px auto;width:452px;height:510px; max-height:100%; left:50%;margin-left:-226px;top:-25px;}
.func{padding:18px 35px 30px;display: flex;justify-content: space-between;}
.chest-btn{width:90px;display: inline-block;color:#fff;background-image: -webkit-gradient(linear, left top, left bottom, from(#ffa200), to(#ffa200));height:44px;line-height: 44px;border-radius: 3px;font-size: 17px;}
.chest-btn:active{background-image: -webkit-gradient(linear, left top, left bottom, from(#f09902), to(#f09902));}
.bg{position: absolute;z-index: 1;background:url('http://activitystatic.xyqb.com/light.png') center center/100% no-repeat;width:452px;height:510px; max-height:100%; left:45%;top: 50%; margin-left:-226px;margin-top:-255px;}
.bg.rotate{-webkit-animation: rotate 10s infinite linear;}
.mod-chest .chest-close:after{width: 320px;height:300px;position: absolute;top:-100px;left:-61px;content:"";display: block;}
......@@ -67,24 +84,24 @@
.mod-chest .chest-open{}
.mod-chest .chest-open.blur:after{width: 320px;height: 68px;background: url('http://activitystatic.xyqb.com/chest-open-blur.png') no-repeat 0px 0px;background-size: 320px auto;position: relative;z-index: 1;position: absolute;left: 0px;top: -5px;content:"";display: block;}
.mod-chest-cont{background: url('http://activitystatic.xyqb.com/open-bg-top.png') center top no-repeat, url('http://activitystatic.xyqb.com/open-bg-bottom.png') center bottom no-repeat;background-size: 276px auto;width:276px;margin:27px auto 118px;position: relative;}
.mod-chest-cont{background: url('http://activitystatic.xyqb.com/open-bg-top.png') center top no-repeat, url('http://activitystatic.xyqb.com/open-bg-bottom.png') center bottom no-repeat;background-size: 276px auto;width:276px;margin:27px auto 118px;position: relative;z-index: 2;}
.mod-chest-cont:before{width:100%;position: absolute;top:12px;bottom:80px;left:0px;content:"";background:#fff;border-left:#e59c00 1px solid;border-right:#e59c00 1px solid;box-sizing:border-box;}
.mod-chest-cont .content{position: relative;z-index: 2;padding:13px;}
.mod-chest-cont .content{position: relative;z-index: 2;padding:13px;text-align: center;}
.mod-chest-cont h3{color:#865500;font-size: 15px;}
.mod-chest{position: relative;width: 100%;}
.mod-chest .chest-close{width: 320px;height:135px;opacity: 0;position: relative;z-index: 1;position: absolute;left:50%;top:0px;margin-left:-160px;}
.mod-chest .chest-close .gift{width: 320px;height:135px;background:url('http://activitystatic.xyqb.com/chest.png') no-repeat 0px 0px;background-size: 320px auto;position: absolute;left:0;top:-147px;}
.mod-chest .chest-close .gift{width: 320px;height:135px;background:url('http://activitystatic.xyqb.com/chest.png') no-repeat 0px 0px;background-size: 320px auto;position: absolute;left:0;top:-85px;}
.mod-chest .chest-open{width: 320px;height:150px;background:url('http://activitystatic.xyqb.com/chest.png') no-repeat 0px -137px;background-size: 320px auto;opacity: 0;position: relative;z-index: 1;position: absolute;left:0px;top:-147px;}
.mod-chest .chest-open{width: 320px;height:150px;background:url('http://activitystatic.xyqb.com/chest.png') no-repeat 0px -137px;background-size: 320px auto;opacity: 0;position: relative;z-index: 1;position: absolute;left:50%;top:-24px;margin-left: -160px;}
.mod-chest .chest-open .mod-chest-cont{position: absolute;bottom:-27px;left:50%;margin-left:-138px;}
.mod-chest .show{z-index: 2;opacity: 1;}
.loading-container.opened .mod-chest .chest-open{-webkit-transform:translate(0px,61px);}
.loading-container .mod-chest-cont{padding:30px 0px 50px;text-align: center;overflow: hidden;opacity: 0;-webkit-transform:translate(0px,30px);/*-webkit-transition:all .3s .3s;-webkit-transition:all .3s .3s cubic-bezier(.53,1.5,.69,1.81);*/z-index: 9;-webkit-animation-fill-mode: forwards;}
.loading-container .chest-open.show .mod-chest-cont{/*-webkit-transform:translate(0px,0px);opacity: 1;*/-webkit-animation:move2 .2s .0s linear;-webkit-animation-fill-mode: forwards;}
.loading-container .mod-chest-cont .gift{color:#ff6000;font-size: 24px;line-height: 30px;padding-bottom:30px;}
.loading-container .mod-chest-cont .gift{color:#ff6000;font-size: 24px;line-height: 30px;}
.loading-container .mod-chest-cont .gift .icon{width: 58px;height:0px;position:relative;display: inline-block;vertical-align: middle;}
.loading-container .mod-chest-cont .gift img{width: 75px;height:50px;position: absolute;top:-28px;left:-5px;}
......@@ -177,7 +194,7 @@
<config>
{
usingComponents: {
'van-loading': '~@/components/vant/loading/index'
'van-button': '~@/components/vant/button/index'
}
}
</config>
src/components/custom/sign.wpy
View file @ fcd7cf84
<template>
<div class="container">
<cover-view class="circle" :style="{ background: bgColor }" @tap="handleTaps">
<div class="icon-container">
<!-- <cover-view class="circle" :style="{ background: bgColor }" @tap="handleTaps">
<cover-view class="title" :style="{ color: fontColor }">{{title}}</cover-view>
</cover-view>
<cover-view class="tips tips_animate" v-if="showAnimation">+1克币</cover-view>
<cover-view class="tips tips_animate" v-if="showAnimation">+1克币</cover-view> -->
<image v-if="type === 'sign'" class="sign" :src="signUrl" @tap="signIn"></image>
<div v-if="type === 'gold'" class="gold">
<image class="gold-image" :src="goldUrl"></image>
</div>
</div>
</template>
<script>
import wepy from '@wepy/core';
const images = {
sign: {
notComplete: '/static/images/sign@2x-76_74px.png',
completed: '/static/images/sign-completed@2x-70_70px.png'
},
gold: {
graterThan5k: '/static/images/graterThen2.5k@2x-68_86px.png'
}
};
wepy.component({
data: {
showAnimation: false
},
props: {
title: '',
sign: {
type: Boolean,
default: false
},
type: {
type: String,
default: ''
},
bgColor: {
type: String,
default: '#FFF'
......@@ -24,23 +45,31 @@
default: '#FF0000'
}
},
computed: {
signUrl() {
return this.sign ? images['sign'].completed : images['sign'].notComplete;
},
goldUrl() {
return images['gold'].graterThan5k;
}
},
methods: {
handleTaps: function() {
this.showAnimation = !this.showAnimation;
[this.bgColor, this.fontColor] = [this.fontColor, this.bgColor];
},
signIn: function() {
console.log(this.sign);
this.$emit('sign-in', !this.sign);
}
},
created() {
console.log(this.type);
}
});
</script>
<style lang="less">
.container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -8px;
left: 200px;
width: 150rpx;
.icon-container {
.tips {
flex: 1;
color: #FF0000;
......@@ -49,7 +78,6 @@
overflow: visible;
top: -40rpx;
width: 150rpx;
}
.tips_animate {
animation:mymove 2s ease forwards;
......@@ -59,14 +87,28 @@
from { font-size:10px;opacity: 1.0; top: -20px;}
to { font-size:20px;opacity: 0; top: -80px;}
}
.circle {
.sign {
position: absolute;
top: 374rpx;
right: 30rpx;
width: 70rpx;
height: 70rpx;
z-index: 2;
}
.gold {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 100rpx;
height: 100rpx;
background: #fff;
flex-direction: column;
position: absolute;
top: 340rpx;
left: 39rpx;
.gold-image {
width: 68rpx;
height: 86rpx;
z-index: 2;
}
.title {
color: #FF0000;
}
......
src/components/custom/starAnimation1.wpy
View file @ fcd7cf84
<template>
<div class="loading-container">
<!-- <div class="loading-container"> -->
<!-- <van-loading size="24px" vertical>加载中...</van-loading> -->
<div class="meteor">
<div class="star"></div>
</div>
</div>
<!-- </div> -->
</template>
<script>
import wepy from '@wepy/core';
......@@ -14,51 +14,54 @@
});
</script>
<style lang="less">
.loading-container {
position: absolute;
width: 100%;
height: 100%;
background: grey;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
// .loading-container {
// position: absolute;
// width: 100%;
// height: 100%;
// display: flex;
// justify-content: center;
// align-items: center;
// z-index: 1;
.meteor {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
top: 396rpx;
left: 44rpx;
width: calc(100% - 120rpx);;
height: 0;
// border: 2rpx solid #000;
z-index: 1;
transform: rotateZ(45deg);
transform: -webkit-rotateZ(45deg);
transform: rotateZ(3deg)
}
.star {
position: absolute;
top: 38%;
left: -43%;
height: 2px;
width: 100px;
background: linear-gradient(45deg,rgba(255,255,255,0),yellow);
background: -webkit-linear-gradient(45deg,rgba(255,255,255,0),yellow);
left: -3rpx;
// bottom: -220rpx;
top: -3rpx;
// left: -43%;
height: 10rpx;
background: linear-gradient(-45deg,rgba(255,255,255,0),yellow);
transform: translateX(300rpx);
// background: -webkit-linear-gradient(-45deg,rgba(255,255,255,0),yellow);
/*此处为下一步的添加动画*/
-webkit-animation: tail 3s ease-in-out infinite,shooting 3s ease-in-out infinite;
-o-animation: tail 3s ease-in-out infinite,shooting 3s ease-in-out infinite;
animation: tail 3s ease-in-out infinite,shooting 3s ease-in-out infinite;
-webkit-animation: tail 1s ease-in forwards, shooting 1s ease-in forwards;
-o-animation: tail 1s ease-in forwards, shooting 1s ease-in forwards;
animation: tail 1s ease-in forwards, shooting 1s ease-in forwards;
}
.star::before,
.star::after{
.star::before{
content: "";
position: absolute;
top: calc(100% - 1px);
left: 100%;
height: 2px;
background: linear-gradient(45deg,rgba(255,255,255,0),yellow,rgba(255,255,255,0));
background: -webkit-linear-gradient(45deg,rgba(255,255,255,0),yellow,rgba(255,255,255,0));
top: -15rpx;
left: 6rpx;
// top: calc(100% - 1px);
// left: 100%;
height: 40rpx;
width: 40rpx;
background: url('http://activitystatic.xyqb.com/sign@2x-76_74px.png') 0 0/contain no-repeat;
// background: -webkit-linear-gradient(45deg,rgba(255,255,255,0),yellow,rgba(255,255,255,0));
/*此处为下一步的添加动画*/
-webkit-animation: shining 3s ease-in-out infinite;
-o-animation: shining 3s ease-in-out infinite;
animation: shining 3s ease-in-out infinite;
// -webkit-animation: shining 3s ease-in-out infinite;
// -o-animation: shining 3s ease-in-out infinite;
// animation: shining 3s ease-in-out infinite;
}
.star:before {
transform: translateX(-50%) rotateZ(-45deg);
......@@ -69,47 +72,47 @@
transform: -webkit-translateX(-50%) -webkit-rotateZ(45deg);
}
@-webkit-keyframes shining {
0% {width: 0;}
50% {width: 30px;}
100% {width: 0;}
}
// @-webkit-keyframes shining {
// 0% {width: 0;}
// 50% {width: 30px;}
// 100% {width: 0;}
// }
@keyframes shining {
0% {width: 0;}
50% {width: 30px;}
100% {width: 0;}
}
@-webkit-keyframes tail {
0% {width: 0;}
30% {width: 50px;}
50% {width: 60rpx;}
100% {width: 0;}
}
// @-webkit-keyframes tail {
// 0% {width: 0;}
// 30% {width: 50px;}
// 100% {width: 0;}
// }
@keyframes tail {
0% {width: 0;}
30% {width: 100px;}
30% {width: 150rpx;}
100% {width: 0;}
}
@-webkit-keyframes shooting {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(350px);
transform: translateX(350px);
}
}
// @-webkit-keyframes shooting {
// 0% {
// -webkit-transform: translateX(0);
// transform: translateX(0);
// }
// 100% {
// -webkit-transform: translateX(350px);
// transform: translateX(350px);
// }
// }
@keyframes shooting {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
// -webkit-transform: translateX(0);
transform: translateX(630rpx);
}
100% {
-webkit-transform: translateX(350px);
transform: translateX(350px);
}
// -webkit-transform: translateX(350px);
transform: translateX(20rpx);
}
}
// }
</style>
<config>
{
......
src/components/custom/videolist.wpy
View file @ fcd7cf84
......@@ -65,6 +65,10 @@
type: Array,
value: []
},
loading: {
type: Boolean,
default: false
},
duration: {
type: Number,
value: 800
......@@ -111,7 +115,10 @@
const current = e.$wx.detail.current;
console.log(current);
const diff = current - this._last;
if (diff === 0) return;
if (diff === 0) {
console.log(this.nextQueue.length);
return;
}
this._last = current;
// this.playCurrent(current);
this.$emit('change', { activeId: this.curQueue[current].id });
......@@ -185,13 +192,6 @@
playCurrent(current) {
this._videoContexts.forEach((ctx, index) => {
console.log('playCurrent', current, index);
if (index !== current) {
setTimeout(() => {
ctx.pause();
}, 300);
} else {
ctx.play();
}
});
},
trigger(e, type) {
......
src/pages/index.wpy
View file @ fcd7cf84
......@@ -160,8 +160,9 @@
<view class="userInfo">
<image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image>
</view>
<video-gold type="gold"></video-gold>
<video-sign type="sign" :sign="sign" @sign-in="signIn"></video-sign>
<view class="content">
<!-- <video-sign title="签"></video-sign> -->
<view class="leftcont">
<view>零售价：￥190003.00元</view>
<view>开奖时间：15：20</view>
......@@ -205,9 +206,10 @@
</swiper-item>
</swiper>
</view>
<!-- <network v-if="!isConnected"></network> -->
<network v-if="!isConnected"></network>
<!-- <star-animation></star-animation> -->
<!-- <open-animation></open-animation> -->
<star-animation1 v-if="sign && showAnimation"></star-animation1>
<open-animation></open-animation>
</view>
</template>
......@@ -216,6 +218,7 @@
import store from '../store';
import { mapState, mapActions } from '@wepy/x';
import wepy from '@wepy/core';
wepy.page({
store,
hooks: {
......@@ -234,6 +237,8 @@
topPage:0,
lastPage:0,
currentIndex:5,
sign: false,
showAnimation: false,
},
computed: {
......@@ -363,12 +368,14 @@
},
changeVideo(e) {
this.setIsConnected();
// setTimeout(() => {
console.log(this.length, e.activeId);
if (this.length - e.activeId === 1) {
this.videoList = [{id: e.activeId + 2, url: 'https://ip1707952229.mobgslb.tbcache.com/youku/6974c3708c0337150e1743b1c/03000801005EA2A6C8FB4C2003E8807282A547-8207-4F52-9663-969096765248.mp4?sid=158960247500010009412_00_Bac09720260d484f23ac2ccebe5206930&sign=b76f4099e108fc306d3db993d1bec0a8&ctype=50&ali_redirect_domain=vali.cp31.ott.cibntv.net&ali_redirect_ex_ftag=5898cd25832bbff232de6d9fa668e8ddf8bacc5fef3f2e7b&ali_redirect_ex_tmining_ts=1589602477&ali_redirect_ex_tmining_expire=3600&ali_redirect_ex_hot=111'}];
this.length += 1;
console.log('add video');
}
// }, 3000)
},
deleteAnimation: function(current) {
if (current && current.itemid != undefined) {
......@@ -391,6 +398,15 @@
that.list = newlist;
}, 500);
}
},
signIn: function(v) {
this.sign = v;
this.showAnimation = this.sign;
// if (timeout) timeout = null;
// timeout = setTimeout(() => {
// this.showAnimation = false;
// }, 1000);
// console.log(this.sign);
}
},
......@@ -454,6 +470,7 @@
'video-list': '~@/components/custom/videolist',
'van-icon': '../components/vant/icon/index',
'video-sign': '~@/components/custom/sign',
'video-gold': '~@/components/custom/sign',
'network': '~@/components/custom/network',
'star-animation': '~@/components/custom/starAnimation',
'star-animation1': '~@/components/custom/starAnimation1',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment