微信小程序派对闪光灯效果开发实现

725 阅读1分钟

一、是不是你想要的效果,可扫小程序码查看一把先

派对小程序码.png

 二、实现步骤:

1. wxml中用到camera中可以设置闪光灯的开启与关闭使用flash属性

<image class="image-style" src="/images/icon/ic_splash_light.png"></image>
<text class="title">派对闪光灯</text>
<text class="desc">夜空中最亮的星,让我们点亮她吧</text>
<view class="slider-container1">
  <text class="set-time">灯亮时间(秒)</text>
  <slider bindchange="sliderChangeLight" block-size="18" value="{{lightDuration}}" block-color="green" show-value="{{true}}" class="slider" min="{{minTime}}" max="{{maxTime}}" step="0.1"></slider>
</view>
<view class="slider-container2">
  <text class="set-time">灯灭时间(秒)</text>
  <slider bindchange="sliderChangeInterval" block-size="18" value="{{blackDuration}}" block-color="green" show-value="{{true}}" class="slider" min="{{minTime}}" max="{{maxTime}}" step="0.1"></slider>
</view>

2. js中需要根据设置一个周期内的灯亮时间和灯灭时间,来控制灯亮和灯灭,看着就是一闪一闪的效果;关于灯亮时间和灯灭时间用slider的拖动去设置,此处就不在赘述了

3. 重点在于开启闪光灯和关闭闪光灯与时间控制代码如下:

    this.setData({
      open: "on"
    })
    if (this.data.__lightTimeout) {
      clearTimeout(this.data._lightTimeout)
    }
    this.data._lightTimeout = setTimeout(() => {
      this.setData({
        open: "off"
      })
      this.beginBlack()
    }, this.data.lightDuration * 1000);
  },


  beginBlack() {
    if (this.data._blackTimeout) {
      clearTimeout(this.data._blackTimeout)
    }
    this.data._blackTimeout = setTimeout(() => {
      this.beginLight()
    }, this.data.blackDuration * 1000);
  },

开启闪光灯执行beginLight()方法,倒计时到设置的灯亮时间后,关闭闪光灯;

然后调用beginBlack()方法,倒计时结束后执行beginLight()方法;如此往复,直到用户点击关闭派对,将倒计时关闭并关闭闪光灯

三、感觉有帮助的话,可以打赏一把子么?一毛不嫌多,100不嫌少,谢谢啦

21673408689_.pic.jpg