微信摇一摇效果HTML,JavaScript+H5实现微信摇一摇功能

项目终于如约上线，但是在春节前又有一个新的活动要做，类似微信的摇一摇活动。也一直在做微信公众号的东西，但是要调用微信摇一摇的接口还是有些困难，因为只提供了摇一摇周边，附近的人以及一系列的红包页面，相对于我们的需求只需要摇一摇这个动作却是大相径庭。

其实H5+JavaScript写出来的页面，通过获取手机的屏幕长和宽，以及添加声音等就可以实现摇一摇的效果。

第一步，实现手机摇动改变颜色

HTML5 手机摇一摇

var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff');

if(window.DeviceMotionEvent) {

var speed = 25;

var x = y = z = lastX = lastY = lastZ = 0;

window.addEventListener('devicemotion', function(){

var acceleration =event.accelerationIncludingGravity;

x = acceleration.x;

y = acceleration.y;

if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {

document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];

}

lastX = x;

lastY = y;

}, false);

}

手机摇一摇，改变屏幕颜色。

主要是手机的DeviceMotionEvent事件

第二步，微信摇一摇手势

相对于第一步就是增加了摇一摇手势，改变了摇动事件。在摇一摇动作之后再添加自己想要的方法即可，无论是想要进入下一个自己做的页面还是触发一个Controller事件都可以。

摇一摇

var SHAKE_THRESHOLD = 1000;

var last_update = 0;

var last_time = 0;

var x;

var y;

var z;

var last_x;

var last_y;

var last_z;

var sound = new Howl({ urls: ['/shake/sound/shake_sound.mp3'] }).load();

var findsound = new Howl({ urls: ['/shake/sound/shake_match.mp3'] }).load();

var curTime;

var isShakeble = true;

function init() {

if (window.DeviceMotionEvent) {

window.addEventListener('devicemotion', deviceMotionHandler, false);

} else {

$("#cantshake").show();

}

}

function deviceMotionHandler(eventData) {

curTime = new Date().getTime();

var diffTime = curTime - last_update;

if (diffTime > 100) {

var acceleration = eventData.accelerationIncludingGravity;

last_update = curTime;

x = acceleration.x;

y = acceleration.y;

z = acceleration.z;

var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;

if (speed > SHAKE_THRESHOLD && curTime - last_time > 1100 && $("#loading").attr('class') == "loading" && isShakeble) {

shake();

}

last_x = x;

last_y = y;

last_z = z;

}

}

function shake() {

last_time = curTime;

$("#loading").attr('class','loading loading-show');

$("#shakeup").animate({ top: "10%" }, 700, function () {

$("#shakeup").animate({ top: "25%" }, 700, function () {

$("#loading").attr('class','loading');

findsound.play();

//在此为摇动之后的事件，这里为调用ControllergoShakeResult方法

window.location.href = "shakeController.do?goShakeResult&phoneNumber=${phoneNumber}&hdid=${hdid}&openid=${openid}";

});

});

$("#shakedown").animate({ top: "40%" }, 700, function () {

$("#shakedown").animate({ top: "25%" }, 700, function () {

});

});

sound.play();

}

//各种初始化

$(document).ready(function () {

Howler.iOSAutoEnable = false;

FastClick.attach(document.body);

init();

});

您今天还可以摇次

正确姿势：握紧手机，用力摇动3秒，苦练18年的麒麟臂终于派上用场了。

有时候真的可以换一种方法去实现自己想要的功能。附图：demo本来实现的效果是:

       

改版之后

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。