前言

在平常思考问题的时候喜欢敲击桌子之类的东西，发出有节奏的声音让人进入深度思考中，但是又可能会影响到别人，所以决定自己开发一个小程序版解压电子木鱼，带上耳机进入自己的世界。

一、项目展示

进入页面敲击屏幕，模拟敲击木鱼效果。

小程序电子木鱼

二、设计思路

        敲击手机屏幕-声音效果：有敲击木鱼声音。

        敲击手机屏幕-视觉效果：有敲击木鱼的动作，并且在每次敲击结束时有声波传输的效果。  

三、具体实现   

  
页面比较简单，外层view全铺page

image增加定义图片木鱼路径，默认为准备敲击图片，通过js控制在敲击屏幕时切花为敲击图片。

切换为“敲击图片”后延时100ms再次切换回“准备敲击图片”，这样就有敲击木鱼的动画效果。

          

<view class="ripple" style="{{rippleStyle}}"></view>
    <image  animation="{{animationData}}" class="muyuicon" src="{{bgurl}}" />
    <view   class="container" bindtouchstart="containerTap"></view>

</view>

 //敲击切换图片
      checkImg:function(){
          this.setData({
            bgurl: "../../image/muyu1.png"
          })
          this.setData({
            checkFalg: true
          })
          this.audioFn();
          wx.vibrateShort();
          setTimeout(() => {
            this.setData({
              bgurl: "../../image/muyu.png"
            })
          }, 100);

 通过js+css实现在敲击木鱼时出现声音传播扩散的效果，也类似水波纹效果。

 开始设想时在屏幕任何位置敲击都出现波纹效果，因此出现动态获取当前屏幕坐标方法。

 但在实际操作中发现已木鱼为原点扩散效果更好一点，故修改波纹效果位置为固定坐标。

containerTap: function (res) {
      var that = this
      //var x = res.touches[0].pageX;
      //var y = res.touches[0].pageY + 85;
      this.checkImg();
      this.setData({
        rippleStyle: ''
      });
      setTimeout(function () {
        that.setData({
          rippleStyle: 'top:500px;left:153px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;'
        });
      }, 200)
    },

ripple {
    background-color: rgba(182, 182, 182, 0.6);
    border-radius: 100%;
    height:20px;
    width:20px;
    margin-top: -90px;
    position: absolute;
    -webkit-transform: scale(0);
}
@-webkit-keyframes ripple {
    100% {
    -webkit-transform: scale(18);
    transform: scale(18);
    background-color: transparent;
    }
    
}

在切换至“敲击图片”时增加敲击木鱼音效，通过wx.createInnerAudioContext()方法实现。

我的音效资源是在B站看到的真实木鱼敲击视频，觉得声音不错就从B站下载视频转为MP3,再裁剪其中一段音效。

//点击音效
    audioFn:function(){
      const innerAudioContext = wx.createInnerAudioContext()
      innerAudioContext.autoplay = false  // 是否自动开始播放，默认为 false
      innerAudioContext.loop = false  // 是否循环播放，默认为 false
      wx.setInnerAudioOption({ // ios在静音状态下能够正常播放音效
        obeyMuteSwitch: true,   // 是否遵循系统静音开关，默认为 true。当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音。
        success: function (e) {
        },
        fail: function (e) {
        }
      })
      innerAudioContext.src="/pages/muyu/muyu.mp3"
      innerAudioContext.play()
      },

在点击时同时增加了震动反馈。微信有wx.vibrateShort(Object object)  15ms的短震动效果，还有wx.vibrateShort(Object object) 400ms的长震动效果。

只增加短震动效果有一点点击的物理反馈即可。

四、全部代码

代码中有一些注释掉的内容是最开始的设计实现思路，就不删除保留着了。

其中有一个动画效果是点击图片后会 放大缩小一下让人感觉有点击的触感，animateFn:function（）；开始设计时是没有图片切换（增加小木棍敲击动作）的，想通过图片放大与缩小表现木鱼被敲击的效果。

小木棍敲击和木鱼被敲击后有缩放效果两种方式都能表现木鱼被敲击的感觉，我的小程序展示的是小木棍敲击版的，感觉更直观一点吧。

// pages/test/test.js
Page({
    data: {
        bgurl: "../../image/muyu.png",
        animationData: {},
        checkFalg:false
    },
    setLoading: function(a) {
        this.setData({
            loading: !this.data.loading
        });
    },
    containerTap: function (res) {
      var that = this
      //var x = res.touches[0].pageX;
      //var y = res.touches[0].pageY + 85;
      this.checkImg();
      this.setData({
        rippleStyle: ''
      });
      setTimeout(function () {
        that.setData({
          rippleStyle: 'top:500px;left:153px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;'
        });
      }, 200)
    },

    animateFn:function(){
      var animation = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease',
      })
      this.animation = animation
      this.animation.scale(0.9).step()
      // 要执行的动画
      this.animation.scale(1).step()
      // 导出动画
      this.setData({
        bgurl: animation.export()
      })
    },

    //点击音效
    audioFn:function(){
      const innerAudioContext = wx.createInnerAudioContext()
      innerAudioContext.autoplay = false  // 是否自动开始播放，默认为 false
      innerAudioContext.loop = false  // 是否循环播放，默认为 false
      wx.setInnerAudioOption({ // ios在静音状态下能够正常播放音效
        obeyMuteSwitch: true,   // 是否遵循系统静音开关，默认为 true。当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音。
        success: function (e) {
        },
        fail: function (e) {
        }
      })
      innerAudioContext.src="/pages/muyu/muyu.mp3"
      innerAudioContext.play()
      },
      //敲击切换图片
      checkImg:function(){
          this.setData({
            bgurl: "../../image/muyu1.png"
          })
          this.setData({
            checkFalg: true
          })
          this.audioFn();
          wx.vibrateShort();
          setTimeout(() => {
            this.setData({
              bgurl: "../../image/muyu.png"
            })
          }, 100);
         
      }
  })
  
  

源码分享在网盘可自取

链接：https://pan.baidu.com/s/1RcTQR8NpsdDiK3OCKtFelw?pwd=0qpv 
提取码：0qpv