微信小程序转动3d骰子

这里展示动画效果

欢迎扫码体验小程序

小程序还有备忘录功能

html

<view class="background" data-id="{{disabled}}" >

<!--转盘-->

<image src='../../static/start.png' bindtap="onstart" class='point' mode='aspectFit' style='width:40%;height:40%;'></image>

<image animation="{{rotateDate}}" src='../../static/rotate.png' class='wheel' mode="aspectFit" style="width:90%;height:90%;"></image>

</view>

<view class='my' >

我的：{{jifen}}<button style="width: 80px;height:40%;font-size: 30rpx;display: flex;justify-content: space-around;align-items: flex-start;text-align: center;line-height: 100%;" bindtap="clear">清空</button>

</view>

css

/* pages/zhenxin/zhenxin.wxss */

/**index.wxss**/

.background{

height:100vh;

width:100vw;

position: relative;

background-size: 100% 100%;

-moz-background-size:100% 100%;

margin:0 auto;

display: flex;

justify-content: center;

}

.point{

margin-top:25vh;

position: absolute;

z-index: 10;

}

.wheel{

position: absolute;

z-index:5;

}

.my{

height:200rpx;

height:200rpx;

margin-right: 30%;

display: flex;

justify-content: center;

}

js

// index.js

let animation = wx.createAnimation({

duration: 3000,

timingFunction: 'ease',

});

var app = getApp();

Page({

data: {

rotateDate: {},

turning: false,

jifen:app.globalData.jifen,

disabled: false,

},

onload: function (options) {

},

changjifen(){

},

onUnload(){

let that = this

wx.getStorage({

key:app.globalData.NUM,

success(res){

that.data.jifen = res.data;

that.setData({

jifen:that.data.jifen - 1

})

//前端显示的积分＋1

//wx.setStorage(map)

wx.setStorageSync(app.globalData.NUM,that.data.jifen)

},

fail(res){

wx.setStorageSync(app.globalData.NUM,that.data.jifen)

}

})

},

onShow:function(){

let that = this

that.setData({

turning:false,

})

wx.getStorage({

key:app.globalData.NUM,

success(res){

that.data.jifen = res.data;

that.setData({

jifen:that.data.jifen + 1

})

//前端显示的积分＋1

//wx.setStorage(map)

wx.setStorageSync(app.globalData.NUM,that.data.jifen)

},

fail(res){

wx.setStorageSync(app.globalData.NUM,that.data.jifen)

}

})

},

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;

function showModal(str) {

//使手机振动400ms

wx.vibrateLong();

wx.showModal({

success: function () {

let animation = wx.createAnimation({

duration: 45,

timingFunction: "linear"

})

animation.rotate(0).step();

_this.setData({

rotateDate: animation.export()

})

}

});

};

if (num <= cat * 1) {

var random = Math.floor(Math.random() * 15);

var cotext = [真心哈大冒险内容，自行添加]

wx.showModal({

title: '大冒险',

content: cotext[random],

mask: true,

duration: 2000,

success: function (res) {

if (res.cancel) {

} else if (res.confirm) {

_this.setData({

jifen: _this.data.jifen + 1,

})

}

}

});

wx.vibrateLong();

//振动

}

else if (num <= cat * 2) {

var random = Math.floor(Math.random() * 24);

[真心哈大冒险内容，自行添加]

wx.showModal({

title: '真心话',

content: cotext[random],

mask: true,

duration: 2000,

success: function (res) {

if (res.cancel) {

} else if (res.confirm) {

_this.setData({

jifen: _this.data.jifen + 1,

})

}

}

});

}

else if (num <= cat * 3) {

var random = Math.floor(Math.random() * 30);

[真心哈大冒险内容，自行添加]

wx.showModal({

title: '大冒险',

content: cotext[random],

mask: true,

duration: 2000,

success: function (res) {

if (res.cancel) {

} else if (res.confirm) {

_this.setData({

jifen: _this.data.jifen + 1,

})

}

}

});

}

else if (num <= cat * 4) {

var random = Math.floor(Math.random() * 30);

[真心哈大冒险内容，自行添加]

wx.showModal({

title: '真心话',

content: cotext[random],

mask: true,

duration: 2000,

success: function (res) {

if (res.cancel) {

} else if (res.confirm) {

_this.setData({

jifen: _this.data.jifen + 1,

})

}

}

});

}

else if (num <= cat * 5) {

var random = Math.floor(Math.random() * 10);

var cotext = ['']

wx.showModal({

title: '大冒险',

content: cotext[random],

mask: true,

duration: 2000,

success: function (res) {

if (res.cancel) {

} else if (res.confirm) {

_this.setData({

jifen: _this.data.jifen + 1,

})

}

}

});

}

else if (num <= cat * 6) {

var random = Math.floor(Math.random() * 38);

var cotext = [真心哈大冒险内容，自行添加]

wx.showModal({

title: '真心话',

content: cotext[random],

mask: true,

duration: 2000,

success: function (res) {

if (res.cancel) {

} else if (res.confirm) {

_this.setData({

jifen: _this.data.jifen + 1,

})

}

}

});

}

else if (num <= cat * 7) {

var random = Math.floor(Math.random() * 16);

var cotext = [真心哈大冒险内容，自行添加]

wx.showModal({

title: '大冒险',

content: cotext[random],

mask: true,

duration: 2000,

success: function (res) {

if (res.cancel) {

} else if (res.confirm) {

_this.setData({

jifen: _this.data.jifen + 1,

})

}

}

});

}

else if (num <= cat * 8) {

let random = Math.floor(Math.random() * 33);

let cotext = [真心哈大冒险内容，自行添加]

var num1 = _this.data.jifen

wx.showModal({

title: '真心话',

content: cotext[random],

mask: true,

duration: 2000,

showCance: false,

success: function (res) {

if (res.cancel) {

} else if (res.confirm) {

_this.setData({

jifen:_this.data.jifen + 1,

})

var map = {

key: app.globalData.NUM,

data: _this.data.jifen,

success: function () {

},

fail: function () {

}

}

wx.setStorage(map)

//store

_this.onShow()

}

}

});

}

}, 3000);

this.setData({

turning:false,

//数据正常

//disabled:false,

//多次点击

});

};

},

clear: function () {

let that = this

wx.getStorage({

key:app.globalData.NUM,

success(res){

that.data.jifen = res.data;

that.setData({

jifen:0

})

//前端显示的积分＋1

//wx.setStorage(map)

wx.setStorageSync(app.globalData.NUM,that.data.jifen)

},

fail(res){

wx.setStorageSync(app.globalData.NUM,that.data.jifen)

}

})

},

onShareAppMessage() {

return {

title: '快来写下你目前的想法吧！',

path: "../../pages/home/home.json"

}

},

onShareTimeline: function () {

return {

title: "快来写下你目前的想法吧！",

query: {

}

}

}

});