本文目录
前文说明
这里用到了vant组件库,具体引用可以查看我的这篇博客,及css3
进行砸金蛋动画功能的实现。本文大概4千字,阅读需要5分钟。如需要本文素材,可以留言,看到后将会第一时间回复。
一、效果演示
二、代码解读
2.1、hitgoldeneggs.wxml
<view class="hitgoldeneggs-container">
<image mode="widthFix" class="{{flyFlag ? 'flybird flybird-active' : 'flybird'}}" src="../../img/bird.png"></image>
<view class="egg-home">
<image mode="widthFix" bindtap="eggHandle" class="{{stopMove ? 'egg egg-first stop-move' : 'egg egg-first'}}"
data-egg="egg1" src="{{eggImg1}}"></image>
<image mode="widthFix" bindtap="eggHandle" class="{{stopMove ? 'egg egg-second stop-move' : 'egg egg-second'}}"
data-egg="egg2" src="{{eggImg2}}"></image>
<image mode="widthFix" bindtap="eggHandle" class="{{stopMove ? 'egg egg-third stop-move' : 'egg egg-third'}}"
data-egg="egg3" src="{{eggImg3}}"></image>
<image mode="widthFix" class="{{ hitFlag ? 'hit hit-active' : 'hit'}}" style="top: {{hitTop}}; left: {{hitLeft}}"
src="../../img/hit.png"></image>
</view>
</view>
1、
class
采用动态监听是否移动
2、金蛋图片采用js
变量控制,这样就可以控制金蛋没被砸和被砸图片的控制
3、锤子也采用了js
变量控制位置
2.2、hitgoldeneggs.js
// pages/hitgoldeneggs/hitgoldeneggs.js
Page({
/**
* 页面的初始数据
*/
data: {
stopMove: false,
eggImg1: '../../img/egg.png',
eggImg2: '../../img/egg.png',
eggImg3: '../../img/egg.png',
openFlag: true,
hitTop: '',
hitLeft: '',
hitFlag: false,
flyFlag: false,
},
/**
* 没中奖 飞出小乌鸦
*/
flyBird() {
this.setData({
flyFlag: true
})
setTimeout(() => {
this.setData({
flyFlag: false
})
}, 6500)
},
/**
* 点击金蛋 停止所有金蛋动画 留在最后一帧
*/
eggHandle(e) {
const self = this
let x = e.currentTarget.offsetLeft + 70; // 设置锤子的横坐标
let y = e.currentTarget.offsetTop - 30; // 设置锤子的纵坐标
if (this.data.openFlag) {
this.setData({
hitTop: y + 'px',
hitLeft: x + 'px',
hitFlag: true
})
let egg = e.currentTarget.dataset.egg
setTimeout(() => {
if (egg == 'egg1') {
this.setData({
eggImg1: '../../img/openegg.png'
})
} else if (egg == 'egg2') {
this.setData({
eggImg2: '../../img/openegg.png'
})
} else if (egg == 'egg3') {
this.setData({
eggImg3: '../../img/openegg.png'
})
}
}, 500)
}
this.setData({
stopMove: true,
openFlag: false
})
setTimeout(() => {
wx.showModal({
title: '未中奖!',
confirmText: '再来一次',
// content: res.meta.msg,
success(res) {
if (res.confirm) {
self.setData({
stopMove: false,
openFlag: true,
hitFlag: false,
eggImg1: '../../img/egg.png',
eggImg2: '../../img/egg.png',
eggImg3: '../../img/egg.png',
})
}
}
})
setTimeout(() => {
self.flyBird();
}, 500)
}, 800)
},
})
1、点击金蛋后,设置锤子的坐标,获取哪个金蛋,并将这个金蛋图片更换成砸开后的金蛋图片。
2.3、hitgoldeneggs.wxss
page {
height: 100%;
}
.hitgoldeneggs-container {
width: 100%;
height: 100%;
background-image: url(https://shouyiba.xyz/img/za-bg.png);
background-size: 100%;
position: relative;
}
.egg-home {
position: absolute;
top: 30%;
width: 90%;
left: 50%;
transform: translateX(-50%);
}
.egg {
width: 118px;
height: auto;
}
.egg-first {
position: absolute;
animation: animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
scale 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
.egg-second {
position: absolute;
animation: animX 2.5s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
animY 2.5s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
/* animation-delay: 1s; */
}
.egg-third {
position: absolute;
animation: animX 3s linear 0s infinite alternate,
animY 3s linear -1s infinite alternate;
/* animation-delay: 2s; */
}
@keyframes animX {
0% {
left: 0px;
}
100% {
left: 70%;
}
}
@keyframes animY {
0% {
top: 30px;
}
100% {
top: 80px;
}
}
.stop-move {
animation-play-state: paused;
}
.hit {
/* display: none; */
visibility: hidden;
position: absolute;
width: 50px;
height: auto;
transition: all 0.3s ease-in;
}
.hit-active {
/* display: block; */
visibility: unset;
transform: rotateZ(-45deg);
}
.active-rules {
position: absolute;
top: 65%;
width: 100%;
}
.active-title {
color: #fff;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
@keyframes awardIconTada {
0% {
transform: scale3d(.86, .86, .86);
}
50% {
transform: scale3d(1, 1, 1);
}
100% {
transform: scale3d(.86, .86, .86);
}
}
.rules-close {
padding-right: 20px;
/* padding-top: 20px; */
}
.rules-desc {
height: 100%;
}
.jt-card {
width: 100%;
background-color: #fff;
padding: 10px 10px 0 10px;
margin: 10px auto 0;
/* transform: translateY(-70px); */
border-radius: 10px;
/* width: 93%; */
/* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); */
}
.jt-card-item {
margin-top: 10px;
padding: 0 10px;
}
.rules-desc-text,
.rules-desc-text {
font-size: 15px;
color: rgb(122, 121, 121);
}
.rules-desc-company {
font-size: 15px;
color: red;
}
.hit-egg-num {
color: yellow;
}
.complaints {
position: absolute;
right: 20px;
bottom: -80px;
color: #fff;
padding: 10px 20px;
background: rgba(0, 0, 0, .3);
border-radius: 3px;
}
@media only screen and (min-width: 750px) {
.egg-home {
top: 60%;
}
.active-rules {
top: 84%;
}
}
.flybird {
display: none;
height: auto;
width: 100px;
position: absolute;
top: 0.8rem;
right: 0.6rem;
z-index: 9999;
}
.flybird-active {
display: block;
animation: birdFly 6s ease-out forwards;
}
@keyframes birdFly {
0% {
right: 0.6rem;
}
100% {
right: 20rem;
}
}
2.4、hitgoldeneggs.json
{
"usingComponents": {
"van-popup": "@vant/weapp/popup/index",
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index",
"van-icon": "@vant/weapp/icon/index",
"van-divider": "@vant/weapp/divider/index",
"van-empty": "@vant/weapp/empty/index"
},
"navigationBarTitleText": "砸金蛋赢大礼"
}