Skip to content

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

新增签到动画；新增克币掉落动画

parent 373350bd
Hide whitespace changes
Inline Side-by-side
Showing with 308 additions and 61 deletions
src/components/custom/sign.wpy
View file @ 69b9a4a5
...@@ -4,27 +4,48 @@ ...@@ -4,27 +4,48 @@
<cover-view class="title" :style="{ color: fontColor }">{{title}}</cover-view> <cover-view class="title" :style="{ color: fontColor }">{{title}}</cover-view>
</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 class="sign" v-if="type === 'sign'" @tap="signIn">
<image class="sign-in" :src="signNotCompletedUrl" v-if="!signComplete" :class="{'jump': !signing, 'fly': signing}" ></image>
<image class="sign-comlete" :src="signCompletedUrl" v-if="sign"></image>
<div class="sign-shine" v-if="!sign"></div>
<div class="sign-shadow" v-if="!signComplete"></div>
</div>
<div v-if="type === 'gold'" class="gold"> <div v-if="type === 'gold'" class="gold">
<image class="gold-image" :src="goldUrl"></image> <div class="add-gold" v-if="addGold">
<image class="add-gold-image" :src="addGoldUrl"></image>
<span class="add-gold-num">+1</span>
</div>
<div class="show-gold" @tap="showAnimation">
<div class="sunshine" v-if="addsunshine"></div>
<image class="show-gold-image" :class="{'gold-scale': addsunshine}" :src="goldUrl"></image>
<span class="show-gold-num">5001</span>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import wepy from '@wepy/core'; import wepy from '@wepy/core';
let timeout = null;
const images = { const images = {
sign: { sign: {
notComplete: '/static/images/sign@2x-76_74px.png', notComplete: '/static/images/sign@2x-76_74px.png',
completed: '/static/images/sign-completed@2x-70_70px.png' completed: '/static/images/sign-completed@2x-70_70px.png'
}, },
gold: { gold: {
addGoldUrl: '/static/images/sign@2x.png',
graterThan5k: '/static/images/graterThen2.5k@2x-68_86px.png' graterThan5k: '/static/images/5000@2x-68_86px.png'
} }
}; };
wepy.component({ wepy.component({
data: { data: {
showAnimation: false showAnimation: false,
addGold: false,
addsunshine: false,
signNot: true,
signing: false,
signComplete: false,
signNotCompletedUrl: '/static/images/sign@2x-76_74px.png',
signCompletedUrl: '/static/images/sign-completed@2x-70_70px.png'
}, },
props: { props: {
title: '', title: '',
...@@ -32,6 +53,10 @@ ...@@ -32,6 +53,10 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
gold: {
type: Boolean,
default: false
},
type: { type: {
type: String, type: String,
default: '' default: ''
...@@ -51,6 +76,34 @@ ...@@ -51,6 +76,34 @@
}, },
goldUrl() { goldUrl() {
return images['gold'].graterThan5k; return images['gold'].graterThan5k;
},
addGoldUrl: function() {
return images['gold'].addGoldUrl;
}
},
watch: {
gold(v) {
console.log('gold', v, this.addsunshine);
this.addsunshine = false;
if (v) {
setTimeout(() => {
this.addsunshine = true;
console.log('addsunshine', this.addsunshine);
// this.$apply();
}, 1500);
}
},
sign(v) {
this.signNot = false;
this.signing = v;
if (!v) {
this.signComplete = false;
timeout = null;
} else {
timeout = setTimeout(() => {
this.signComplete = true;
}, 1300);
}
} }
}, },
methods: { methods: {
...@@ -59,8 +112,11 @@ ...@@ -59,8 +112,11 @@
[this.bgColor, this.fontColor] = [this.fontColor, this.bgColor]; [this.bgColor, this.fontColor] = [this.fontColor, this.bgColor];
}, },
signIn: function() { signIn: function() {
console.log(this.sign);
this.$emit('sign-in', !this.sign); this.$emit('sign-in', !this.sign);
},
showAnimation: function() {
this.addGold = !this.addGold;
// this.addsunshine = !this.addsunshine;
} }
}, },
created() { created() {
...@@ -93,25 +149,200 @@ ...@@ -93,25 +149,200 @@
right: 30rpx; right: 30rpx;
width: 70rpx; width: 70rpx;
height: 70rpx; height: 70rpx;
z-index: 2; z-index: 2;
.sign-comlete {
position: absolute;
width: 70rpx;
height: 70rpx;
}
.sign-in {
position: absolute;
width: 70rpx;
height: 70rpx;
z-index: 1;
}
.jump {
animation: jump 1.2s infinite ease;
}
.fly {
animation: fly1 1.2s forwards linear;
}
.sign-shine {
overflow: hidden;
position: absolute;
// background: #000;
left: 5rpx;
width: 60rpx;
height: 60rpx;
// left: -200px;
text-align: center;
z-index: 3;
border-radius: 50%;
transform: rotate(-50deg);
animation: jump1 1.2s infinite ease;
&::before {
content: "";
// background: red;
position: absolute;
width: 30rpx;
height: 138rpx;
margin: -40rpx -100rpx;
box-shadow: 50rpx -23rpx 0 -8rpx rgba(255, 255, 255, 0.18), 75rpx -10rpx 0 -12rpx rgba(255, 255, 255, 0.15);
animation: shine1 1.2s infinite ease;
}
}
.sign-shadow {
position: absolute;
width: 100%;
height: 10rpx;
background: rgba(0, 0, 0, 0.4);
top: 80rpx;
border-radius: 50%;
z-index: -1;
animation: swift 1.2s infinite ease;
}
@keyframes swift {
0% {
opacity: 0.8;
}
50% {
opacity: 0.4;
transform: scale(0.8);
}
100% {
opacity: 0.8;
}
}
@keyframes shine1 {
0% {
// margin: -40rpx -80rpx;
transform: translateX(40rpx);
}
50% {
// margin: -80rpx -30rpx;
transform: translateX(0);
}
100% {
// margin: -40rpx -80rpx;
transform: translateX(40rpx);
}
}
} }
@keyframes jump {
0% {
top: 0rpx;
}
50% {
top: -25rpx;
}
100% {
top: 0rpx;
}
}
@keyframes jump1 {
0% {
top: 5rpx;
}
50% {
top: -20rpx;
}
100% {
top: 5rpx;
}
}
@keyframes fly1 {
0% {top: 0;transform: rotateY(0);}
10% {top: -20rpx;transform: rotateY(0);}
// 10% {top: -10rpx;transform: rotateY(360deg);}
// 20% {top: -20rpx;transform: rotateY(0);}
// 30% {top: -30rpx;transform: rotateY(360deg);}
// 40% {top: -40rpx;transform: rotateY(0);}
50% {top: -100rpx;transform: rotateY(360deg);}
100% {top: -200rpx;transform: rotateY(0);}
}
.gold { .gold {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute; position: absolute;
top: 340rpx; top: 320rpx;
left: 39rpx; left: 39rpx;
.gold-image { // width: 100rpx;
// height: 100rpx;
.add-gold{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 68rpx; width: 68rpx;
height: 86rpx; // transform: translateY(-50rpx);
z-index: 2; animation:addGold .6s ease-in forwards;
.add-gold-image {
width: 35rpx;
height: 35rpx;
animation:addGoldRotate .6s linear infinite;
}
.add-gold-num {
color: #fff;
font-size: 24rpx;
}
}
@keyframes addGold {
0% { transform: translateY(-120rpx);}
99% { transform: translateY(-40rpx);opacity: 1;}
100% { opacity: 0; }
}
@keyframes addGoldRotate {
from {transform: rotateY(0);}
to {transform: rotateY(360deg);
}
}
.show-gold {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.show-gold-image {
width: 68rpx;
height: 86rpx;
z-index: 2;
}
.show-gold-num {
color: #fff;
font-size: 24rpx;
}
}
.sunshine {
position: absolute;
box-shadow: 0 0 30rpx 66rpx yellow;
border-radius: 50%;
width: 10rpx;
height: 15rpx;
z-index: 2;
animation: addsunshine 2s linear forwards;
}
@keyframes addsunshine {
0% { box-shadow: 0 0 30rpx 66rpx transparent;}
50% { box-shadow: 0 0 30rpx 66rpx yellow; }
100% { box-shadow: 0 0 30rpx 66rpx transparent;}
}
.gold-scale {
animation: scaleGold 2s linear forwards;
}
@keyframes scaleGold {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
} }
.title {
color: #FF0000;
}
} }
} }
</style> </style>
......
src/components/custom/starAnimation1.wpy
View file @ 69b9a4a5
...@@ -24,52 +24,53 @@ ...@@ -24,52 +24,53 @@
// z-index: 1; // z-index: 1;
.meteor { .meteor {
position: fixed; position: fixed;
top: 396rpx; top: 289rpx;
left: 44rpx; left: 104rpx;
width: calc(100% - 120rpx);; width: calc(100% - 170rpx);;
height: 0; height: 0;
// border: 2rpx solid #000; // border: 2rpx solid #000;
z-index: 1; z-index: 10;
transform: rotateZ(3deg) transform: rotateZ(-15deg)
} }
.star { .star {
position: absolute; position: absolute;
left: -3rpx; left: -3rpx;
// bottom: -220rpx; // bottom: -220rpx;
top: -3rpx; top: -7rpx;
// left: -43%; // left: -43%;
height: 10rpx; height: 10rpx;
width: 150rpx;
background: linear-gradient(-45deg,rgba(255,255,255,0),yellow); background: linear-gradient(-45deg,rgba(255,255,255,0),yellow);
transform: translateX(300rpx); transform: translateX(300rpx);
// background: -webkit-linear-gradient(-45deg,rgba(255,255,255,0),yellow); // background: -webkit-linear-gradient(-45deg,rgba(255,255,255,0),yellow);
/*此处为下一步的添加动画*/ /*此处为下一步的添加动画*/
-webkit-animation: tail 1s ease-in forwards, shooting 1s ease-in forwards; // -webkit-animation: tail 1s ease-in forwards, shooting 1s ease-in forwards;
-o-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; animation: tail 1s ease-in forwards, shooting 1s ease-in forwards;
} }
.star::before{ .star::before{
content: ""; content: "";
position: absolute; position: absolute;
top: -15rpx; top: -29rpx;
left: 6rpx; left: -52rpx;
width: 70rpx;
height: 70rpx;
// top: calc(100% - 1px); // top: calc(100% - 1px);
// left: 100%; // left: 100%;
height: 40rpx; background: url('http://activitystatic.xyqb.com/sign@2x.png') 0 0/contain no-repeat;
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)); // background: -webkit-linear-gradient(45deg,rgba(255,255,255,0),yellow,rgba(255,255,255,0));
/*此处为下一步的添加动画*/ /*此处为下一步的添加动画*/
// -webkit-animation: shining 3s ease-in-out infinite; // -webkit-animation: shining 3s ease-in-out infinite;
// -o-animation: shining 3s ease-in-out infinite; // -o-animation: shining 3s ease-in-out infinite;
// animation: shining 3s ease-in-out infinite; animation: shining 1s ease-in-out forwards;
} }
.star:before { .star:before {
transform: translateX(-50%) rotateZ(-45deg); transform: rotateZ(15deg);
transform: -webkit-translateX(-50%) -webkit-rotateZ(-45deg); // transform: -webkit-translateX(-50%) -webkit-rotateZ(-45deg);
} }
.star:after { .star:after {
transform: translateX(-50%) rotateZ(45deg); // transform: translateX(-50%) rotateZ(45deg);
transform: -webkit-translateX(-50%) -webkit-rotateZ(45deg); // transform: -webkit-translateX(-50%) -webkit-rotateZ(45deg);
} }
// @-webkit-keyframes shining { // @-webkit-keyframes shining {
...@@ -78,9 +79,10 @@ ...@@ -78,9 +79,10 @@
// 100% {width: 0;} // 100% {width: 0;}
// } // }
@keyframes shining { @keyframes shining {
0% {width: 0;} 0% {transform: scale(1);}
50% {width: 60rpx;} // 50% {transform: scale(0.8);}
100% {width: 0;} 99% {transform: scale(0.6);}
100% {transform: scale(0);}
} }
// @-webkit-keyframes tail { // @-webkit-keyframes tail {
// 0% {width: 0;} // 0% {width: 0;}
...@@ -89,7 +91,10 @@ ...@@ -89,7 +91,10 @@
// } // }
@keyframes tail { @keyframes tail {
0% {width: 0;} 0% {width: 0;}
30% {width: 150rpx;} 10% {width: 0;}
50% {width: 150rpx;}
65% {width: 50rpx;}
80% {width: 150rpx;}
100% {width: 0;} 100% {width: 0;}
} }
// @-webkit-keyframes shooting { // @-webkit-keyframes shooting {
...@@ -105,7 +110,7 @@ ...@@ -105,7 +110,7 @@
@keyframes shooting { @keyframes shooting {
0% { 0% {
// -webkit-transform: translateX(0); // -webkit-transform: translateX(0);
transform: translateX(630rpx); transform: translateX(610rpx);
} }
100% { 100% {
// -webkit-transform: translateX(350px); // -webkit-transform: translateX(350px);
......
src/components/custom/videolist.wpy
View file @ 69b9a4a5
...@@ -100,10 +100,6 @@ ...@@ -100,10 +100,6 @@
type: Array, type: Array,
value: [] value: []
}, },
loading: {
type: Boolean,
default: false
},
duration: { duration: {
type: Number, type: Number,
value: 800 value: 800
...@@ -122,10 +118,13 @@ ...@@ -122,10 +118,13 @@
_videoContexts: [], _videoContexts: [],
progress:0, progress:0,
progressStyle:'', progressStyle:'',
loading: false
}, },
watch: { watch: {
videoList () { videoList () {
console.log('timeout 4');
const newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; const newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
this.loading = false;
if (newVal.length) this._videoListChanged(newVal); if (newVal.length) this._videoListChanged(newVal);
} }
}, },
...@@ -154,13 +153,13 @@ ...@@ -154,13 +153,13 @@
const current = e.$wx.detail.current; const current = e.$wx.detail.current;
console.log(current); console.log(current);
const diff = current - this._last; const diff = current - this._last;
if (diff === 0) { if (diff === 0) return;
console.log(this.nextQueue.length);
return;
}
this._last = current; this._last = current;
// this.playCurrent(current); this.playCurrent(current);
console.log('timeout 1');
this.$emit('change', { activeId: this.curQueue[current].id }); this.$emit('change', { activeId: this.curQueue[current].id });
this.loading = true;
this.circular = false;
setTimeout(() => { setTimeout(() => {
const direction = diff === 1 || diff === -2 ? 'up' : 'down'; const direction = diff === 1 || diff === -2 ? 'up' : 'down';
if (direction === 'up') { if (direction === 'up') {
...@@ -203,8 +202,6 @@ ...@@ -203,8 +202,6 @@
console.log('circular2'); console.log('circular2');
this.circular = false; this.circular = false;
} }
this.playCurrent(current);
console.log(this.prevQueue, this.curQueue, this.nextQueue);
}); });
}, },
onWaiting (e) { onWaiting (e) {
...@@ -230,7 +227,6 @@ ...@@ -230,7 +227,6 @@
}, },
playCurrent(current) { playCurrent(current) {
this._videoContexts.forEach((ctx, index) => { this._videoContexts.forEach((ctx, index) => {
// console.log('playCurrent', current, index);
if (index !== current) { if (index !== current) {
ctx.pause(); ctx.pause();
} else { } else {
......
src/pages/index.wpy
View file @ 69b9a4a5
...@@ -174,6 +174,8 @@ ...@@ -174,6 +174,8 @@
<view class="userInfo" style="{{userImgStyle}}"> <view class="userInfo" style="{{userImgStyle}}">
<image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image> <image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image>
</view> </view>
<video-gold type="gold" :gold="sign"></video-gold>
<video-sign type="sign" :sign="sign" @sign-in="signIn"></video-sign>
<view class="content"> <view class="content">
<!-- <video-sign title="签"></video-sign> --> <!-- <video-sign title="签"></video-sign> -->
<view class="leftcont"> <view class="leftcont">
...@@ -231,6 +233,7 @@ ...@@ -231,6 +233,7 @@
<script> <script>
let touchDotX = 0, touchDotY = 0; let touchDotX = 0, touchDotY = 0;
let timeout = null;
import store from '../store'; import store from '../store';
import { mapState, mapActions } from '@wepy/x'; import { mapState, mapActions } from '@wepy/x';
import wepy from '@wepy/core'; import wepy from '@wepy/core';
...@@ -391,14 +394,12 @@ ...@@ -391,14 +394,12 @@
}, },
changeVideo(e) { changeVideo(e) {
this.setIsConnected(); this.setIsConnected();
// setTimeout(() => { console.log(this.length, e.activeId);
console.log(this.length, e.activeId); if (this.length - e.activeId === 1) {
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.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;
this.length += 1; console.log('add video');
console.log('add video'); }
}
// }, 3000)
}, },
deleteAnimation (current) { deleteAnimation (current) {
if (current && current.itemid != undefined) { if (current && current.itemid != undefined) {
...@@ -428,6 +429,20 @@ ...@@ -428,6 +429,20 @@
that.list = newlist; that.list = newlist;
}, 500); }, 500);
} }
},
signIn: function(v) {
this.sign = v;
// this.showAnimation = this.sign;
// if (timeout) timeout = null;
if (!this.sign) {
this.showAnimation = false;
timeout = null;
} else {
timeout = setTimeout(() => {
this.showAnimation = this.sign;
}, 1300);
}
// console.log(this.sign);
} }
}, },
......
static/images/5000@2x-68_86px.png
View replaced file @ 373350bd View file @ 69b9a4a5
static/images/5000@2x-68_86px.png

2.82 KB | W: | H:

static/images/5000@2x-68_86px.png

2.19 KB | W: | H:

static/images/5000@2x-68_86px.png
static/images/5000@2x-68_86px.png
static/images/5000@2x-68_86px.png
static/images/5000@2x-68_86px.png
  • 2-up
  • Swipe
  • Onion skin
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