前言
在野外蹦迪的时候缺少蹦迪灯气氛不到位怎么办?做为一个程序员决定给爱蹦迪的朋友做一款蹦迪灯小程序,让朋友随时随地蹦迪气氛拉满。
一、项目展示
进入页面后屏幕颜色有规律的闪动,再搭配上动次打次的音乐。。。。像极了蹦迪现场。
二、蹦迪灯
设计思路:整个屏幕颜色按照固定频率切换不同颜色,用来实现模拟灯光闪动。
<view bindtap="documentClick" class="sharkLight" style="background-color: {{bgColor}};">
</view>
page {
background-color: rgb(83, 255, 98);
height:100%
}
.sharkLight{
position: relative;
background-color: rgb(83, 255, 98);
height: 100%;
}
页面比较简单,只需要一个view就可以了;
再CSS中设置整体page的背景颜色,默认颜色我选择绿色rgb(83, 255, 98)
设置view的背景颜色,默认颜色也选择位绿色rgb(83, 255, 98),通过 position: relative;
height: 100%样式设置view占满全屏。
Page({
data: {
backgroundStyle: [
{
name: "white",
value: "white"
}, {
name: "#ff0071",
value: "#ff0071"
}, {
name: "#ff000c",
value: "#ff000c"
}, {
name: "#ff5300",
value: "#ff5300"
}, {
name: "#ffe200",
value: "#ffe200"
}, {
name: "#00ff27",
value: "#00ff27"
}, {
name: "#009fff",
value: "#009fff"
}, {
name: "#00ffc8",
value: "#00ffc8"
}, {
name: "#0ffd07",
value: "#0ffd07"
}
],
interval: 900// 时间间隔
},
onLoad: function(t) {
console.log("222222222");
var that = this;
var interval = setInterval(function () {
for (let index = 0; index < that.data.backgroundStyle.length; index++) {
const element = that.data.backgroundStyle[index].value;
console.log("index----",index,element);
that.sleep(100);
that.setData({
bgColor: element
})
}
}, that.data.interval);
},
//延时
sleep:function(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while(true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}
});
js中定义出需要闪动切换的颜色列表backgroundStyle[]。
接使用for循环遍历预设的背景颜色列表来切换背景颜色,循环速度会比较快,超过人眼视觉停留时间,增加循环在循环时增加延时sleep()方法。
每一次循环结束后需要再次进入循环方法遍历变更背景色,我们通过setInterval定时器实现。
总共预设了9个色值,定时器900ms启动一次,循环每次延时10ms,这样背景颜色变换就更加自然没有卡顿感。