前言
学了微信小程序后，心血来潮弄了个真心话大冒险，觉得还挺好玩，毕竟现在去哪找工作都要上线产品，所有必须学以致用。
废话不多说，接下来直接上图上代码吧
实现效果
扫码体验
首先给出素材图片
2. wxml代码
<view class="background"><!-- 转盘 --><image src="../image/point1.png" bind:tap="onstart" class="point" mode="aspectFit" style="width:40%;height:40%;" /><image animation="{{rotateDate}}" src="../image/wheelok.png" class="wheel" mode="aspectFit" style="width:90%;height:90%;" /></view>
wxss代码
.background {/* # CSS3引入的"vw"和"vh"基于宽度/高度相对于窗口大小 # "vw" = "view width" "vh" = "view height" */height: 100vh;width: 100vw;position: relative;background-size: 100% 100%;-moz-background-size: 100% 100%;margin: 0 auto;display: flex; /*flex布局 */justify-content: center; /*水平轴线居中*/}/* 指针 */.point {margin-top: 25vh;position: absolute;z-index: 10;}/* 转盘 */.wheel {position: absolute;z-index: 5;}
js代码
//生成动画实例let animation = wx.createAnimation({duration: 3000,timingFunction: 'ease',});Page({data: {rotateDate: {},turning: false, },onLoad: function (options) {},// 转动转盘onstart: function () {let _this = this;if (!this.data.turning) {//定义随机旋转度数let rdm = 45;//定义转盘角度let cat = 45;rdm = Math.floor(720 + Math.random() * 3600);_this.setData({degrees: rdm})console.log(rdm);animation.rotate(rdm).step();this.setData({rotateDate: animation.export(),turning: true});setTimeout(() => {let num = rdm % 360; //随机数除360的余数//封装提示类function showModal(str) {// 使手机振动400mswx.vibrateLong();wx.showModal({title: "",content: str,showCancel: false,success: function () {// 调用实例的方法来描述动画let animation = wx.createAnimation({//计算每一角度的大小（360/8=45）duration: 45,timingFunction: "linear"})animation.rotate(0).step();_this.setData({rotateDate: animation.export()})}});}if (num <= cat * 1) {showModal("大冒险");wx.vibrateLong();} else if (num <= cat * 2) {showModal("真心话");} else if (num <= cat * 3) {showModal("大冒险");} else if (num <= cat * 4) {showModal("真心话");} else if (num <= cat * 5) {showModal("大冒险");} else if (num <= cat * 6) {showModal("真心话");} else if (num <= cat * 7) {showModal("大冒险");} else if (num <= cat * 8) {showModal("真心话");}}, 3000);}}});
