摇一摇遇到的问题
一、如何对摇晃效果进行反馈
刚开始的处理方式是，摇晃过程中不做任何处理，但后来反馈说这种效果不好，好像就没有摇动一样，如果声音也不响的话，就真的和什么都没发生一样。
后来想了想，加入摇晃过程动画，就像微信的摇一摇一样，摇晃过程中，会有上下移动的动画，这里加入了周围金币做跳跃运动的动画。
二、摇晃不灵敏，需要用力摇晃手机才行
摇晃灵敏度是个不太好控制的量，即要求不是很灵敏，比如，不能稍微碰一下就摇晃了，也不能使劲摇才能摇中，这就需要对X、Y、Z轴上的加速度进行合理利用，这里是几种网上常见的处理方式：
1、计算一段时间中的X、Y、Z轴的平均值：
Math.abs( x + y + z - lastX - lastY - lastZ ) / diffTime * 10000
这种方式在网上最为常见，大多数的示例都采用的该方法。后来看到有人评论此方法可能导致摇一摇并不特别灵敏，比如x为正、y为负，就可能出现抵消的情况。
2、单个方向的加速度差值满足要求即可：
Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed
该方法也是shake库采用的计算方式，不过，该库的计算方式覆盖的更全面一些，也包括了斜向摇晃的判断，该库有近1000个start，使用人数也较多：
this.options.threshold = 15;
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))
) {}
3、不太普遍的计算方式：
Math.sqrt(
( x - lastX ) * ( x - lastX ) +
( y - lastY ) * ( y - lastY ) +
( z - lastZ ) * ( z - lastZ )
) / diffTime * 10000
这种方式类似于求三维空间中任意两点的距离，然后通过距离除以时间，得到速度的变化率，在摇晃过程中摇晃的速度满足条件就表示中奖了。目前来看，这种方式更加科学一点，因为它更能体现出摇一摇的实际情景：摇的快一点，就能摇一摇。
刚开始的时候采用的是第一种计算方式，计算在这一段时间内的平均值，但是在使用的过程中发现并不是很好用，设置的值太小就会比较灵敏，太大又不太灵敏，总是找不到一个合适的值满足条件。后来改用第三种方式，可以得到良好的摇一摇体验。
三、摇晃的同时让手机振动
这个功能在业务中并没有加入，考虑后期优化的时候添加进去，在用户摇晃的过程中也能震动，可以很大的提升用户体验，让手机震动，通过如下API：
navigator.vibrate
特征检测：
var supportsVibrate = "vibrate" in navigator;
使用方法：
navigator.vibrate(2000) // 震动2s
window.navigator.vibrate([
100,30,100,30,100,200,200,30,
200,30,200,200,100,30,100,30,100]); // 震动出莫尔斯电码的"SOS"效果
// 取消震动，赋值0或空数组即可
navigator.vibrate(0)
通过CanIuse查看支持情况，支持android4.4，ios不支持。
四、ios手机无法主动播放音频
这里是一篇比较完善的关于HTML Audio的说明克服 iOS HTML5 音频的局限。
大概总结几点：
1、兼容性
iOS3中，移动版safari中就已经引入HTML音频
iOS6中，Apple增加了Web Audio API的支持
备注：到目前为止，iOS版本分布如下，所以，目前使用HTML音频基本没有兼容问题。
格式支持
目前主要支持四种格式：MP3、OGG、WAV 和 AAC。
| Internet Explorer 9 | X | X | ||
| Firefox | X | X | ||
| Chrome/Safari/移动版 Safari | X | X | X |
为了涵盖所有浏览器，最好是让所有的视频流都具有 Ogg Vorbis 和 AAC 两种格式。
为什么没有包括 MP3？MP3 在进行商业传播时需要支付繁重的版税。
Ogg Vorbis 之所以压倒性地获得了我的喜爱是因为它是开源的、无专利费并且免版税的。不过，只有 Firefox 支持它。
单音频流
移动版safari一次只能播放一个单音频流。移动版 Safari 中的 HTML5 媒体元素都是单例的，所以一次只能播放一个 HTML5 音频（和 HTML5 视频）流。Apple 为这一局限做过解释，但我们推断这是为了减少数据费用（这也是大多数 iOS HTML5 其他局限的原因所在）。
自动播放
在移动版 Safari 中加载的页面上，不能自动播放音频文件。音频文件只能从用户触发的触摸（单击）事件加载。preload、autoplay会忽略。
切换延迟
在初始化一个新的音频流时会有几秒的延时，这是因为 iOS 需要实例化一个新的音频对象。
解决自动播放
当用户触摸屏幕的时候，便会加载音频，然后在摇晃手机时进行播放。
var shakeAudio = new Audio();
shakeAudio.preload = 'auto';
shakeAudio.src = 'xx';
document.body.addEventListener('touchstart', () => {
shakeAudio.load();
});
解决单音频流 && 解决切换延迟
使用audio sprite。
audio.sprite可以将多个音频合成一个音频，就像css sprite一样。
原理很直观。您需要存储每个 sprite 的数据：开始点、结束点（或长度）和一个 ID。当您想要播放某个 sprite 时，需要将此音频流的 currentTime 设为开始位置并调用 play()。
var spriteData = {
meow1: {
start: 0,
length: 1.1
},
meow2: {
start: 1.3,
length: 1.1
},
whine: {
start: 2.7,
length: 0.8
},
purr: {
start: 5,
length: 5
}
};
audioSprite.currentTime = spriteData.meow2.start;
audioSprite.play();
这种方式可以解决单个音频与切换延迟的问题，因为只有一个音频加载，这也削减了HTTP请求。
清注意，更改 currentTime 并不是百分百正确的。将 currentTime 设为 6.5，而实际得到的却是 6.7 或 6.2。每个 A sprite 之间需要少量的空间，以避免寻找到另一个 sprite 的尾部。添加这个空间会增加少许延时，如果流寻找到 6.4，而 sprite 开始于 6.8 秒。
在访问任何 audio sprite 之前，务必确保整个音频流已加载，因为如果音频流没有完全加载，那么在想要访问已加载的流的任何一个部分时，那么这个流需要进行缓冲，而且还会在流加载过程中发生延时。
这是Chromium的一个bug：https://bugs.chromium.org/p/chromium/issues/detail?id=584562。
备注：我在实际测试的出现问题，currentTime无法设置，一直都是0，即时赋值为3，但打印出来后依然为0，导致音频不能切换。
测试地址：http://img.youthol.top/audioTest-1.html
五、ios手机Date兼容问题
背景：
在项目中有一个体验需要优化，如果活动在晚上12点开始，用户在12点之前进来，此时是不能参加的，提示活动时间还不到，但是如果到12点了呢？用户必须退出去然后在进来，这样才能看到最新的状态？
这样体验会差一点，最好的方式是：到达了12点，数据自动更新。用户可以直接参与抽奖！
实现思路：
为了实现这一个效果，采用的思路是：用户刚进入页面的时候会有一个时间戳，然后我拿到该时间戳进行解析，获取当天的时间属性（年月日），然后通过new Date()创建一个第二天的凌晨时间，此时，用该时间与页面请求的时间做diff，利用setTimeout进行diff时间的倒计时，倒计时结束，自动执行数据更新。
遇到的问题
这种思路在android上是没有问题的，但是测试时发现在ios上不会更新数据，后来定时，是获取时间时有问题：
本来我是通过new Date("2016.12.27")这样的方式在chrome的测试控制台中测试的，可以拿到当天凌晨时间，于是便拿该时间去用，但是该时间在safari中会出错：
new Date("2016.12.27")
// Invalid Date
new Date("2016.12.27").getTime()
// NaN
这就遇到了一个好玩的事情，那safari下支持什么样的时间格式呢？下面便进行一些测试：
刨坑
safari：在safari浏览器中处理时间会产生非常有意思的效果，比如：
new Date("2016.12.27")
// Invalid Date
new Date("2016-12-27")
// Tue Dec 27 2016 08:00:00 GMT+0800 (CST)
new Date("2016/12/27")
// Tue Dec 27 2016 00:00:00 GMT+0800 (CST)
chrome：但是在chrome上，我们测试一下：
new Date("2016.12.27")
// Tue Dec 27 2016 00:00:00 GMT+0800 (CST)
new Date("2016-12-27")
// Tue Dec 27 2016 08:00:00 GMT+0800 (CST)
new Date("2016/12/27")
// Tue Dec 27 2016 00:00:00 GMT+0800 (CST)
. 点的日期形式在safari上是不支持的
- 短线的日期形式返回值相同
/ 斜杠的日期形式返回值也相同
另外一个更神奇的地方是，同样是ISO 8601日期格式形式，safari也获取不到：
new Date("2016-12-27 12:34:25")
// Invalid Date
var arr = "2010-03-15 10:30:00".split(/[- :]/),
date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
console.log(date);
//-> Mon Mar 15 2010 10:30:00 GMT+0000 (GMT Standard Time)
这样所有的浏览器都运行正常。不过，需要注意的是，月份要减1，GMT的时间月份0表示1月份。
同样，根据这篇文章：JavaScript new Date() NaN on iPhone，可以通过如下方式，也可以获取浏览器一致的效果：
mm/dd/yyyy hh:mm:ss
if (app.isAppleDevice()) {
var dateParts = myDate.substring(0,10).split('-');
var timePart = myDate.substr(11);
myDate= dateParts[1] + '/' + dateParts[2] + '/' + dateParts[0] + ' ' + timePart;
}
关于时间问题坑还是不小的，红宝书上对时间的描述也较多，也可参考。
六、用户交互反馈
在平时的项目中，一般要求有较快的用户反馈，但是在摇一摇项目中，有一些小的交互需求需要注意。
第一个就是该总结刚开始说的，延迟出现抽奖结果，这样更符合用户体验。摇一摇立马弹出反而更显突兀。
七、requestAnimationFrame
在业务中，有一个滚动公告需求，刚开始滚动公告采用setInterval的方式进行，但是当把切换其他浏览器tab一段时候后再次回来，发现公告是快速的滚动到某一位置。
原因是setInterval在窗口退到后台时依然会执行。解决这个问题就需要requestAnimationFrame了。
- requestAnimationFrame是用来解决动画渲染问题的，一般来说，其渲染执行频率和浏览器渲染频率相同，都为60帧。
- requestAnimationFrame发生在重绘前，浏览器在重绘时会提前通知requestAnimationFrame，这样我们可以把DOM操作集中在一起，这样只发生一次重绘。
- 隐藏或不可见元素，requestAnimationFrame将不进行重绘或回流。减少内存使用量。
虽然requestAnimationFrame不可以直接设置时间间隔，但可以通过时间判断来完成：
let lastTime = 0;
const scroll = () => {
const now = Date.now();
if ( now - startTime > during ) {
startTime = now;
this.shakeScrollCurrent--;
this.showNoticeList = true;
// 如果滚动到头了，此时会重新进入滚动
// 防止在切换的过程中出现动画，此时需要先把动画去除，然后在进行数量重置
if ( ( this.shakeScrollCurrent ) % ( prizesLength + 1 ) === 0 ) {
this.showNoticeList = false;
this.shakeScrollCurrent = 0;
}
}
window.requestAnimationFrame( scroll );
}
window.requestAnimationFrame( scroll );
兼容性：
从中可以看出android低版本（4.3）及以下是不支持该属性的，需要对此进行兼容，可以参考如下：
CSS3动画那么强，requestAnimationFrame还有毛线用？
window.requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame || function ( callback, element ) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
}
function (callback, element) {
var start, finish;
window.setTimeout(function () {
start = +new Date();
callback(start);
finish = +new Date();
self.timeout = 1000 / 60 - (finish - start);
}, self.timeout);
};
八、总结
摇一摇过程并不复杂，其实像这种活动更重要的是如何提升用户体验，比如在项目中发现，有的手机其支持加速事件，但是摇晃过程没有任何的反应。比如Android 6.0; PLK-AL10（HUAWEI），如果有这同款手机的童鞋可以试一试。说这些是提醒有做相关活动的童鞋，可以在项目中添加统计代码，上报该手机支持还是不支持摇一摇，如果不支持也可以加入预警，这样可以及时得到反馈。如果不支持，可以考虑添加其他途径也能参与活动。
关于音频的问题，是需要继续调研下的，如果大家知道原因麻烦也告诉我哦，查找了好几天了。。。