微信小程序—亲测仿真摇一摇功能的算法

摘要

摇一摇算法网上很多,但都是简单的实现,并不能达到微信摇一摇那种监听动作的准确,为了更好的实现摇一摇,首先需要理解加速计返回数据与摇晃动作的关系,因此介绍一款找加速计数据规律的工具,可直接扫码使用,理解关系后,就很容易实现摇一摇功能。

硬件数据监听工具效果(晃动真机)

在这里插入图片描述

扫码体验

体验路径:
摇一摇:硬件系列>摇一摇
硬件数据监听工具:硬件系列>硬件数据监听工具
在这里插入图片描述

摇一摇代码

const innerAudioContext = wx.createInnerAudioContext()
Page({

  data: {
    startTime:0,
    x:0,
    y:0,
    isFirstCallBack:true,
    isExecute:false,
    isShow: false,
    list: [],
    shakeTip:''
  }, 
  onShow: function () {
    innerAudioContext.src = 'https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/shake.mp3?sign=76981238d10ce97139c6cb7e4c8bd68f&t=1577346589'
    var that = this;
    that.isShow = true;
    wx.onAccelerometerChange(function (e) {
      console.log("###",e)
      if (!that.isShow) {
        return
      }
      if (that.data.isFirstCallBack) {
        that.setData({
          startTime: (new Date()).getTime(),
          x : e.x,
          y : e.y,
          isFirstCallBack:false
        })
      } else {
        var endTime = (new Date()).getTime()
        var speedX = (e.x - that.data.x) / (endTime - that.data.startTime) * 100000
        var speedY = (e.y - that.data.y) / (endTime - that.data.startTime) * 100000
        that.setData({
          startTime:endTime,
          x:e.x,
          y:e.y
        })
        if ((Math.abs(speedX) > 800) || (Math.abs(speedY) > 800)) {
          if (that.data.isExecute) {
            console.log("正在执行")
          } else {
            wx.vibrateLong({})
            innerAudioContext.play();
            that.setData({
              isExecute:true,
              shakeTip:"摇成功"
            })
            setTimeout(function () {
              that.setData({
                isExecute: false,
                shakeTip: ""
              })
            }, 1000)
          }
        }
      }
    })
  },
  onUnload: function () {
    this.isShow = false;
    wx.stopAccelerometer({})
    innerAudioContext.destroy()
  }
})

wxml

<view class="container">
<view class="view-row" style="color:#aaa;font-size:36rpx;margin:30rpx;border-bottom:1rpx solid #aaa;padding:10rpx">hardware—摇一摇</view>
  <view style="font-size:32rpx;color:#aaa">加速计实现</view>
  <image style="width:240rpx;height:240rpx;margin-top:50rpx" src="./shake.png"></image>
  <view style="margin-top:30rpx;font-size:40rpx;color:black">{{shakeTip}}</view>
</view>
</view>

程序员不易,来个鼓励师

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玩烂小程序

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值