项目要求实现点击摇一摇图片，图片摇一摇，并且摇一摇手机，图片也要摇一摇。
关于用js怎样实现摇一摇手机图片摇一摇，我在网络上找了一些方法，真正有用的是shake.js。
接下来，上shake.js源码：
/*
* Author: Alex Gibson
* https://github.com/alexgibson/shake.js
* License: MIT license
*/ (function(global, factory) {
if (typeof define === 'function' && define.amd) {
define(function() {
return factory(global, global.document);
});
} else if (typeof module !== 'undefined' && module.exports) {
module.exports = factory(global, global.document);
} else {
global.Shake = factory(global, global.document);
}
} (typeof window !== 'undefined' ? window : this, function (window, document) { 'use strict'; function Shake(options) {
//feature detect
this.hasDeviceMotion = 'ondevicemotion' in window; this.options = {
threshold: 15, //default velocity threshold for shake to register
timeout: 1000 //default interval between events
}; if (typeof options === 'object') {
for (var i in options) {
if (options.hasOwnProperty(i)) {
this.options[i] = options[i];
}
}
} //use date to prevent multiple shakes firing
this.lastTime = new Date(); //accelerometer values
this.lastX = null;
this.lastY = null;
this.lastZ = null; //create custom event
if (typeof document.CustomEvent === 'function') {
this.event = new document.CustomEvent('shake', {
bubbles: true,
cancelable: true
});
} else if (typeof document.createEvent === 'function') {
this.event = document.createEvent('Event');
this.event.initEvent('shake', true, true);
} else {
return false;
}
} //reset timer values
Shake.prototype.reset = function () {
this.lastTime = new Date();
this.lastX = null;
this.lastY = null;
this.lastZ = null;
}; //start listening for devicemotion
Shake.prototype.start = function () {
this.reset();
if (this.hasDeviceMotion) {
window.addEventListener('devicemotion', this, false);
}
}; //stop listening for devicemotion
Shake.prototype.stop = function () {
if (this.hasDeviceMotion) {
window.removeEventListener('devicemotion', this, false);
}
this.reset();
}; //calculates if shake did occur
Shake.prototype.devicemotion = function (e) {
var current = e.accelerationIncludingGravity;
var currentTime;
var timeDifference;
var deltaX = 0;
var deltaY = 0;
var deltaZ = 0; if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {
this.lastX = current.x;
this.lastY = current.y;
this.lastZ = current.z;
return;
} deltaX = Math.abs(this.lastX - current.x);
deltaY = Math.abs(this.lastY - current.y);
deltaZ = Math.abs(this.lastZ - current.z); if (((deltaX > this.options.threshold) && (deltaY > this.options.threshold)) || ((deltaX > this.options.threshold) && (deltaZ > this.options.threshold)) || ((deltaY > this.options.threshold) && (deltaZ > this.options.threshold))) {
//calculate time in milliseconds since last shake registered
currentTime = new Date();
timeDifference = currentTime.getTime() - this.lastTime.getTime(); if (timeDifference > this.options.timeout) {
window.dispatchEvent(this.event);
this.lastTime = new Date();
}
} this.lastX = current.x;
this.lastY = current.y;
this.lastZ = current.z; }; //event handler
Shake.prototype.handleEvent = function (e) {
if (typeof (this[e.type]) === 'function') {
return this[e.type](e);
}
}; return Shake;
}));
我的项目是vue+webpack实现的，所以实现代码如下：
//引入shake.js
var Shake = require('./js/shake.js'); //如何使用
//手机摇一摇触发事件
//create a new instance of shake.js.
var myShakeEvent = new Shake({
threshold: 15
});
// start listening to device motion
myShakeEvent.start();
// register a shake event
window.addEventListener('shake', shakeEventDidOccur, false);
//shake event callback
function shakeEventDidOccur () {
//put your own code here etc.
$('.shake').addClass('shake_animate');
}
兼容性：
- iOS Safari 4.2.1 (and above)
- Android 4.0.3 (default browser)
- Chrome 41+ for Android
- Opera Mobile (Android)
- BlackBerry PlayBook 2.0
- Firefox for Android
- FirefoxOS Devices
shake.js在github路径：https://github.com/alexgibson/shake.js