在微信小程序中实现文字呼吸效果

之前写过一篇文章介绍了在网页中使用js实现文字的呼吸效果，点击跳转，但是这种方式里边通过style设置文字样式，在wxml中标签里面的运用是不可行的，因此需要探究一种新的设置方式。

wxml代码

<view class="record-area">
      <button class="get-record" style="opacity:{{breathNum}}" > 文字呼吸效果 </button>
</view>

js代码

注意，在上述wxml代码中，通过style="opacity:{{breathNum}}"设置了button的透明度，那么就要现在js的data部分预设breathNum的值

data: {
    breathNum : 1.0
  },

之后再书写实现的代码

  setTextBreathing: function(cls,e) {
    //使用记录呼吸效果
    var transparency = 10;
    var reduce = true;  //记录当前做透明度增加或降低操作
    setInterval(function(){
      if (reduce === true){
        transparency -= 1;
        if (transparency === 0){
            reduce = false;
        }
      } else if (reduce === false){
          transparency += 1;
        if (transparency === 10){
            reduce = true;
        }
      }
      cls._defaultComponent.setData({
        breathNum:transparency/10
      })
      //通过setData的方式，设置breathNum的值
    },200)
  },

在onLoad函数中调用之后，就可以完美运行了

onLoad: function () {
   this.setTextBreathing(wx.createSelectorQuery(".get-record"),this) 
},