mpvue小程序实现砸金蛋

一、效果图

二、说明

1.素材没选好，金蛋和已砸开的蛋大小不匹配，看着不太协调

2.mpvue实现砸金蛋主要也是利用css动画，然后使用v-if来控制锤子和开花的金蛋的显隐。

三、代码

<template><div class="page"><div class="stage"><img src="https://graph.baidu.com/resource/1025a228ab8cb0c76a1ab01551770603.jpg" class="stage-img" mode="widthFix"><div class="lanren" :class="{pause:paursed}"><div class="egg" :class="{eggPause:paursed}"><img v-if="hammer1" src="https://graph.baidu.com/resource/102f7e59e668973a7214801551771009.jpg" mode="widthFix" class="hammer"/><img v-if="suspend1" src="https://graph.baidu.com/resource/102b95091b3e99073e82f01551771084.jpg" mode="widthFix" class="egg-item"/><img v-else src="https://graph.baidu.com/resource/102cae27e5cce8616ea3001551770642.jpg" mode="widthFix" class="egg-item" @click="openEgg1"/></div><div class="egg" :class="{eggPause:paursed}"><img v-if="hammer2" src="https://graph.baidu.com/resource/102f7e59e668973a7214801551771009.jpg" mode="widthFix" class="hammer"/><img v-if="suspend2" src="https://graph.baidu.com/resource/102b95091b3e99073e82f01551771084.jpg" mode="widthFix" class="egg-item"/><img  v-else src="https://graph.baidu.com/resource/102cae27e5cce8616ea3001551770642.jpg" mode="widthFix" class="egg-item" @click="openEgg2"/></div><div class="egg" :class="{eggPause:paursed}"><img v-if="hammer3" src="https://graph.baidu.com/resource/102f7e59e668973a7214801551771009.jpg" mode="widthFix" class="hammer"/><img v-if="suspend3" src="https://graph.baidu.com/resource/102b95091b3e99073e82f01551771084.jpg" mode="widthFix" class="egg-item"/><img  v-else src="https://graph.baidu.com/resource/102cae27e5cce8616ea3001551770642.jpg" mode="widthFix" class="egg-item" @click="openEgg3"/></div></div></div></div>
</template>

<script>export default {data () {return {paursed: false,       // 初始没有蛋被砸开suspend1: false,      // 蛋1初始显示完整蛋suspend2: false,      // 蛋2初始显示完整蛋suspend3: false,      // 蛋3初始显示完整蛋hammer1: false,       // 锤子1初始不显示hammer2: false,       // 锤子2初始不显示hammer3: false,       // 锤子3初始不显示processLock: true}},onLoad () {},onShow () {},methods: {/*** 蛋1被砸开* @author 小小仙* @date 2019/3/5*/openEgg1 () {let that = thisthat.paursed = true          // 有蛋被砸开that.hammer1 = true          // 锤子1先出现setTimeout(function () {that.suspend1 = truesetTimeout(function () {that.celebrate()},1000)                    // 1秒后中奖提示出现},600)                       // 0.6秒后开花的蛋出现},/*** 蛋2被砸开* @author 小小仙* @date 2019/3/5*/openEgg2 () {let that = thisthat.paursed = truethat.hammer2 = truesetTimeout(function () {that.suspend2 = truesetTimeout(function () {that.celebrate()},1000)},600)},/*** 蛋3被砸开* @author 小小仙* @date 2019/3/5*/openEgg3 () {let that = thisthat.paursed = truethat.hammer3 = truesetTimeout(function () {that.suspend3 = truesetTimeout(function () {that.celebrate()},1000)},600)},/*** 恭喜中奖提示* @author 小小仙* @date 2019/3/5*/celebrate () {let that = thiswx.showModal({title: '恭喜中奖',//提示文字duration:2000,//显示时长mask:true,//是否显示透明蒙层，防止触摸穿透，默认：falseicon:'success', //图标，支持"success"、"loading"success:function(){that.revert()},//接口调用成功fail: function () {that.revert()},  //接口调用失败的回调函数,complete: function () {that.revert()} //接口调用结束的回调函数，})},/*** 重置* @author 小小仙* @date 2019/3/5*/revert () {this.paursed = falsethis.suspend1 =  falsethis.suspend2 = falsethis.suspend3 = falsethis.hammer1 =  falsethis.hammer2 = falsethis.hammer3 = false}}}
</script>

<style scoped>
.stage{width: 100%;position: relative;overflow: hidden;
}
.stage-img{width: 100%;
}.lanren{position: absolute;width: 170px;height: 160px;bottom: 18%;left: 0;right: 0;margin: auto;border-radius: 50%;animation: a 1000s linear;-webkit-animation: a 1000s linear;}.egg{width: 100px;height: 130px;transform-origin:center;-webkit-transform-origin:center;border-radius: 100%;position:absolute;left:0;right:0;top:0;bottom:0;margin: auto;}.egg-item{width: 110%;}.hammer{position: absolute;z-index: 10;left: -50%;top: -10%;width: 100px;display: block;max-width: none;-webkit-animation: hammer 0.5s alternate;animation: hammer 0.5s alternate;transform-origin: bottom left;-webkit-transform-origin: bottom left;}.lanren.pause{-webkit-animation-play-state:paused;animation-play-state:paused;}.eggPause{-webkit-animation-play-state:paused !important;animation-play-state:paused !important;}.egg:nth-child(1){margin-top: 45%;animation: b 1000s linear,zindex 10000ms 0ms infinite linear;-webkit-animation: b 1000s linear,zindex 10000ms 0ms infinite linear;}.egg:nth-child(2){margin-top:-5%;margin-left:-5%;animation: b 1000s linear,zindex 10000ms -2500ms infinite linear;-webkit-animation: b 1000s linear,zindex 10000ms -2500ms infinite linear;}.egg:nth-child(3){margin-top:-5%;margin-right:-5%;animation: b 1000s linear,zindex 10000ms -5500ms infinite linear;-webkit-animation: b 1000s linear,zindex 10000ms -5500ms infinite linear;}
@keyframes a{0% {transform: rotate(0deg);-webkit-transform: rotate(0deg);}to{transform: rotate(36000deg);-webkit-transform: rotate(36000deg);}
}
@-webkit-keyframes a{0% {transform: rotate(0deg);-webkit-transform: rotate(0deg);}to{transform: rotate(36000deg);-webkit-transform: rotate(36000deg);}
}
@keyframes b{0% {transform: rotate(0deg);-webkit-transform: rotate(0deg);}to{transform: rotate(-36000deg);-webkit-transform: rotate(-36000deg);}
}
@-webkit-keyframes b{0% {transform: rotate(0deg);-webkit-transform: rotate(0deg);}to{transform: rotate(-36000deg);-webkit-transform: rotate(-36000deg);}
}@keyframes zindex {0% {z-index: 1;}25% {z-index: -1;}55% {z-index: -1;}75% {z-index: 1;}
}
@-webkit-keyframes zindex {0% {z-index: 1;}25% {z-index: -1;}55% {z-index: -1;}75% {z-index: 1;}
}
@keyframes hammer
{50%{transform: rotate(15deg);}}
@-webkit-keyframes hammer
{50%{-webkit-transform: rotate(15deg);}
}</style>

参考：http://www.mycodes.net/166/9918.htm

mpvue小程序实现砸金蛋相关推荐

mpvue小程序架构搭建详细介绍
为什么80%的码农都做不了架构师?>>> 前言 mpvue小程序框架搭建很容易,官网提供vue init mpvue/mpvue-quickstart my-project, ...
mpvue小程序实现人脸识别/视频录制/身份验证/CryptoJS加密等功能
mpvue小程序实现人脸识别/视频录制/身份验证/CryptoJS加密等功能先看效果图 mpvue小程序与数据宝对接实现人脸识别/视频录制/身份验证/CryptoJS 加密等功能关键代码 ind ...
mpvue小程序以及微信直播踩坑总结
前段时间刚写完一个mpvue的小程序,现在得闲必须赶紧记录和总结一下,不然很多东西又要忘了我是比较熟悉vue的语法,但是也犹豫过是用原生还是用mpvue,因为那时候原生小程序已经相当成熟而mpvue ...
mpvue 小程序页面跳转获取参数
在mpvue中可以使用vuex来存储数据.但是在页面跳转传参方面,我是喜欢用其他写法. 小程序原生写法:https://developers.weixin.qq.com/miniprogram/dev ...
把iconfront的资源放cdn访问_详解mpvue小程序中怎么引入iconfont字体图标
前言 iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? 将图标加入购物车搜索关键词可以是中文也可 ...
小程序mpvue图片绘制水印_基于mpvue小程序使用echarts画折线图的方法示例
第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择. 关 ...
mpvue+小程序云开发，纯前端实现婚礼邀请函
请勿使用本文章及源码作为商业用途! 前言感谢OnceLove提供的思路,借助他的小程序的界面UI风格,自己重新用mpvue实现了属于自己的婚礼邀请函,前前后后花了3天时间.在这之前本人是没想过要自己 ...
小程序mpvue图片绘制水印_基于mpvue小程序使用echarts画折线图
第一次使用mpvue框架来写小程序,项目开发直接搬用 mpvue-shop (一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择. ...
mpvue小程序踩坑
1.mpvue在用getCurrentPages()获取页面栈时会eslint提示getCurrentPages未定义,原因是getCurrentPages()是小程序的原生方法,不需要定义的,esl ...

mpvue小程序实现砸金蛋

一、效果图

二、说明

三、代码

mpvue小程序实现砸金蛋相关推荐

最新文章

热门文章