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 @@
<cover-view class="title" :style="{ color: fontColor }">{{title}}</cover-view>
</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">
<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>
</template>
<script>
import wepy from '@wepy/core';
let timeout = null;
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'
addGoldUrl: '/static/images/sign@2x.png',
graterThan5k: '/static/images/5000@2x-68_86px.png'
}
};
wepy.component({
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: {
title: '',
......@@ -32,6 +53,10 @@
type: Boolean,
default: false
},
gold: {
type: Boolean,
default: false
},
type: {
type: String,
default: ''
......@@ -51,6 +76,34 @@
},
goldUrl() {
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: {
......@@ -59,8 +112,11 @@
[this.bgColor, this.fontColor] = [this.fontColor, this.bgColor];
},
signIn: function() {
console.log(this.sign);
this.$emit('sign-in', !this.sign);
},
showAnimation: function() {
this.addGold = !this.addGold;
// this.addsunshine = !this.addsunshine;
}
},
created() {
......@@ -93,25 +149,200 @@
right: 30rpx;
width: 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 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 340rpx;
top: 320rpx;
left: 39rpx;
.gold-image {
// width: 100rpx;
// height: 100rpx;
.add-gold{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 68rpx;
height: 86rpx;
z-index: 2;
// transform: translateY(-50rpx);
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>
......
src/components/custom/starAnimation1.wpy
View file @ 69b9a4a5
......@@ -24,52 +24,53 @@
// z-index: 1;
.meteor {
position: fixed;
top: 396rpx;
left: 44rpx;
width: calc(100% - 120rpx);;
top: 289rpx;
left: 104rpx;
width: calc(100% - 170rpx);;
height: 0;
// border: 2rpx solid #000;
z-index: 1;
transform: rotateZ(3deg)
z-index: 10;
transform: rotateZ(-15deg)
}
.star {
position: absolute;
left: -3rpx;
// bottom: -220rpx;
top: -3rpx;
top: -7rpx;
// left: -43%;
height: 10rpx;
width: 150rpx;
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 1s ease-in forwards, shooting 1s ease-in forwards;
-o-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;
animation: tail 1s ease-in forwards, shooting 1s ease-in forwards;
}
.star::before{
content: "";
position: absolute;
top: -15rpx;
left: 6rpx;
top: -29rpx;
left: -52rpx;
width: 70rpx;
height: 70rpx;
// 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: url('http://activitystatic.xyqb.com/sign@2x.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;
animation: shining 1s ease-in-out forwards;
}
.star:before {
transform: translateX(-50%) rotateZ(-45deg);
transform: -webkit-translateX(-50%) -webkit-rotateZ(-45deg);
transform: rotateZ(15deg);
// transform: -webkit-translateX(-50%) -webkit-rotateZ(-45deg);
}
.star:after {
transform: translateX(-50%) rotateZ(45deg);
transform: -webkit-translateX(-50%) -webkit-rotateZ(45deg);
// transform: translateX(-50%) rotateZ(45deg);
// transform: -webkit-translateX(-50%) -webkit-rotateZ(45deg);
}
// @-webkit-keyframes shining {
......@@ -78,9 +79,10 @@
// 100% {width: 0;}
// }
@keyframes shining {
0% {width: 0;}
50% {width: 60rpx;}
100% {width: 0;}
0% {transform: scale(1);}
// 50% {transform: scale(0.8);}
99% {transform: scale(0.6);}
100% {transform: scale(0);}
}
// @-webkit-keyframes tail {
// 0% {width: 0;}
......@@ -89,7 +91,10 @@
// }
@keyframes tail {
0% {width: 0;}
30% {width: 150rpx;}
10% {width: 0;}
50% {width: 150rpx;}
65% {width: 50rpx;}
80% {width: 150rpx;}
100% {width: 0;}
}
// @-webkit-keyframes shooting {
......@@ -105,7 +110,7 @@
@keyframes shooting {
0% {
// -webkit-transform: translateX(0);
transform: translateX(630rpx);
transform: translateX(610rpx);
}
100% {
// -webkit-transform: translateX(350px);
......
src/components/custom/videolist.wpy
View file @ 69b9a4a5
......@@ -100,10 +100,6 @@
type: Array,
value: []
},
loading: {
type: Boolean,
default: false
},
duration: {
type: Number,
value: 800
......@@ -122,10 +118,13 @@
_videoContexts: [],
progress:0,
progressStyle:'',
loading: false
},
watch: {
videoList () {
console.log('timeout 4');
const newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
this.loading = false;
if (newVal.length) this._videoListChanged(newVal);
}
},
......@@ -154,13 +153,13 @@
const current = e.$wx.detail.current;
console.log(current);
const diff = current - this._last;
if (diff === 0) {
console.log(this.nextQueue.length);
return;
}
if (diff === 0) return;
this._last = current;
// this.playCurrent(current);
this.playCurrent(current);
console.log('timeout 1');
this.$emit('change', { activeId: this.curQueue[current].id });
this.loading = true;
this.circular = false;
setTimeout(() => {
const direction = diff === 1 || diff === -2 ? 'up' : 'down';
if (direction === 'up') {
......@@ -203,8 +202,6 @@
console.log('circular2');
this.circular = false;
}
this.playCurrent(current);
console.log(this.prevQueue, this.curQueue, this.nextQueue);
});
},
onWaiting (e) {
......@@ -230,7 +227,6 @@
},
playCurrent(current) {
this._videoContexts.forEach((ctx, index) => {
// console.log('playCurrent', current, index);
if (index !== current) {
ctx.pause();
} else {
......
src/pages/index.wpy
View file @ 69b9a4a5
......@@ -174,6 +174,8 @@
<view class="userInfo" style="{{userImgStyle}}">
<image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image>
</view>
<video-gold type="gold" :gold="sign"></video-gold>
<video-sign type="sign" :sign="sign" @sign-in="signIn"></video-sign>
<view class="content">
<!-- <video-sign title="签"></video-sign> -->
<view class="leftcont">
......@@ -231,6 +233,7 @@
<script>
let touchDotX = 0, touchDotY = 0;
let timeout = null;
import store from '../store';
import { mapState, mapActions } from '@wepy/x';
import wepy from '@wepy/core';
......@@ -391,14 +394,12 @@
},
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)
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');
}
},
deleteAnimation (current) {
if (current && current.itemid != undefined) {
......@@ -428,6 +429,20 @@
that.list = newlist;
}, 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