shake.js实现微信摇一摇功能-白红宇

shake.js实现微信摇一摇功能

阅读量：6476 次

发布时间：2019-06-23

本文共 4672 字，大约阅读时间需要 15 分钟。

项目要求实现点击摇一摇图片，图片摇一摇，并且摇一摇手机，图片也要摇一摇。

关于用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;}));

View Code

我的项目是vue+webpack实现的，所以实现代码如下：

//引入shake.jsvar Shake = require('./js/shake.js');//如何使用//手机摇一摇触发事件//create a new instance of shake.js.var myShakeEvent = new Shake({    threshold: 15});// start listening to device motionmyShakeEvent.start();// register a shake eventwindow.addEventListener('shake', shakeEventDidOccur, false);//shake event callbackfunction shakeEventDidOccur () {    //put your own code here etc.    $('.shake').addClass('shake_animate');}

兼容性：