小程序实现蹦迪灯光

前言

      在野外蹦迪的时候缺少蹦迪灯气氛不到位怎么办？做为一个程序员决定给爱蹦迪的朋友做一款蹦迪灯小程序，让朋友随时随地蹦迪气氛拉满。

一、项目展示

进入页面后屏幕颜色有规律的闪动，再搭配上动次打次的音乐。。。。像极了蹦迪现场。

 

二、蹦迪灯

  设计思路：整个屏幕颜色按照固定频率切换不同颜色，用来实现模拟灯光闪动。

<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，这样背景颜色变换就更加自然没有卡顿感。