Javascript 在设备上使用JS设置元素动画

以下是我试图实现的目标：当用户摇晃他的设备时，我希望页面上的一个元素在每次摇晃时顺时针旋转20度，当它达到最大45度时，在每次摇晃时逆时针旋转20度，直到它达到-45度，反之亦然。我用“”来检测震动。问题是它会旋转，但不会设置动画。元素排序会跳到旋转度。因此，我尝试通过使用

for

循环和

setTimeout'来实现动画效果，我使用
和
循环和setInterval'来实现动画效果，但我仍然无法实现动画效果。这是我的密码：

var maxDegree = 45;
var minDegree = -45;
var lastDegree = 0;
var totalShakes = 10;
var rotationDegree = 20;
var rotationCounter = 0;
var currentDegree = 0;
var shakeCounter = 0;
var direction = "right";
var box = null;
var info = null
var interval;

window.addEventListener('load', init, false);

function init() {
    box = document.getElementById('box');
    info = document.getElementById('tilt_info');
    window.addEventListener('shake', shakeEventDidOccur, false);
}

function shakeEventDidOccur () {
    shakeBox();
}

function shakeBox(){
    if(direction == "right") {
        currentDegree += rotationDegree;
        if(currentDegree >= maxDegree) {
            currentDegree = maxDegree;
            direction = "left";
        }

        interval = setInterval(function(){
            if(lastDegree < currentDegree){
                box.style.webkitTransform = "rotateZ("+ (lastDegree++) +"deg)";
                lastDegree++;
            }
        },100);

        lastDegree = currentDegree;
    } else {
        //...the logic to rotate the box CCW
    }

    shakeCounter +=1;
    info.innerHTML = shakeCounter;
    if(shakeCounter >= totalShakes) {
        box.style.webkitTransform = "rotateZ(0deg)";
        window.removeEventListener('shake', shakeEventDidOccur, false);
    }
}

var maxDegree=45；
var minDegree=-45；
var lastDegree=0；
var totalShakes=10；
变量旋转度=20；
变量旋转计数器=0；
var currentDegree=0；
var-shakeCounter=0；
var direction=“right”；
var-box=null；
var info=null
var区间；
addEventListener（'load'，init，false）；
函数init（）{
box=document.getElementById（'box'）；
info=document.getElementById（'tilt_info'）；
window.addEventListener（'shake'，shakeEventDidOccurse，false）；
}
函数shakeEventDidOccurse（）{
振动筛（）；
}
函数shakeBox（）{
如果（方向=“右”）{
currentDegree+=旋转度；
如果（currentDegree>=maxDegree）{
currentDegree=maxDegree；
方向=“左”；
}
间隔=设置间隔（函数（）{
如果（lastDegree=总震动）{
box.style.webkitttransform=“rotateZ（0deg）”；
removeEventListener（'shake'，shakeEventDidOccurse，false）；
}
}

这些是我之前提到的循环：

for(var i = lastDegree; i <= currentDegree; i++) {
    setTimeout(function(){
        box.style.webkitTransform = "rotateZ("+ i +"deg)";
        info.innerHTML = "LD: " + lastDegree + "; CD: " + currentDegree + "; i: " + i;
    }, 1000);
}

while(lastDegree < currentDegree) {
    setTimeout(){
        function(){box.style.webkitTransform = "rotateZ("+ (lastDegree+1) +"deg)";
        lastDegree++;}, 100
    };      
}

for（var i=lastdege；i为什么不使用css转换？因为我需要在每个设备震动时添加20度。另外，我不能使用jQuery，必须是纯JS。我不理解震动的问题，你可以完全一样，然后使用menu.style.transform=“rotateZ（“+amount+”deg）”；我尝试过，但由于某些原因，它不起作用……我会看看我能做些什么，我的错误在哪里。看看这是一个关于震动的esxept示例（因为我没有在移动设备上工作）