Question

为了创建一个动画，我创建了一个Object，它保存了所需的细节以及数组中的所有动画点。

module.exports = function calcAnims(start,div,dimension,dimStart,dimStop,duration,FPS){
this.div = div;
this.start = start;
this.dimension = dimension;
this.FPS = FPS;
this.tweenArr = [];
if(dimStart > dimStop){
    var dimDiff = dimStart - dimStop;
    var totalFrames = duration/FPS;
    var incPF =  dimDiff / totalFrames;
    for(var i=0; i<totalFrames;i++){
        this.tweenArr.push(((totalFrames - i)*incPF)+dimStop);
    }
}
if(dimStart < dimStop){
    var dimDiff = dimStop - dimStart;
    var totalFrames = duration/FPS;
    var incPF =  dimDiff / totalFrames;
    for(var i=0; i<totalFrames;i++){
        this.tweenArr.push((i)*incPF+dimStart);
    }
}
}

这些对象进入对象数组

var animationQue = [];
animationQue[0] = new calcAnimsJS(3000,bars[3].newDiv,"width",getDivDim(bars[3].newDiv,"width"),0,7500,16.667);
animationQue[1] = new calcAnimsJS(10500,bars[2].newDiv,"width",getDivDim(bars[2].newDiv,"width"),0,7500,16.667);
animationQue[2] = new calcAnimsJS(18000,bars[1].newDiv,"width",getDivDim(bars[1].newDiv,"width"),0,7500,16.667);
animationQue[3] = new calcAnimsJS(25500,bars[0].newDiv,"width",getDivDim(bars[0].newDiv,"width"),0,7500,16.667);

然后我在我的animationloop

中遍历这个数组

if(animationQue[i].start<progress){
    if(this.dimension == "width"){
        animationQue[i].div.style.width = animationQue[i].tweenArr[0] + "px";
        animationQue[i].tweenArr.shift();
        animationQue[i].start = animationQue[i].start + animationQue[i].FPS;
    }
}

有什么方法可以将div.style.width之类的东西传递给这个对象，然后在动画时间用作参考？它比写一个if then语句来检查字符串是否为＆＃34; Width＆＃34;更加经济。在我的animationloop里面。

Answer 1

所以我回答我自己的问题！ :)理想情况下，尺寸将进入他们自己的模块，但稍后会对此产生不良影响。

我在顶部发布的对象现在看起来像这样。

module.exports = function calcAnims(start,div,dimension,dimStart,dimStop,duration,FPS){
this.div = div;
this.start = start;
this.dimension = dimension;
this.FPS = FPS;
this.tweenArr = [];
if(dimStart > dimStop){
    var dimDiff = dimStart - dimStop;
    var totalFrames = duration/FPS;
    var incPF =  dimDiff / totalFrames;
    for(var i=0; i<totalFrames;i++){
        this.tweenArr.push(((totalFrames - i)*incPF)+dimStop);
    }
}
if(dimStart < dimStop){
    var dimDiff = dimStop - dimStart;
    var totalFrames = duration/FPS;
    var incPF =  dimDiff / totalFrames;
    for(var i=0; i<totalFrames;i++){
        this.tweenArr.push((i)*incPF+dimStart);
    }
}

switch(dimension){
    case "width":
        this.callBackAnim = function(div, value){
            div.style.width = value + "px";
        }
    break;
    case "height":
        this.callBackAnim = function(div, value){
            div.style.height = value + "px";
        }
    break;
    case "left":
        this.callBackAnim = function(div, value){
            div.style.left = value + "px";
        }
    break;
    case "top":
        this.callBackAnim = function(div, value){
            div.style.top = value + "px";
        }
    break;
    case "inner":
        this.callBackAnim = function(div, value){
            div.innerHTML = value;
        }
    break;      
    default:
        alert("no valid animation passed on");

}
}

因此，根据在第一次创建对象时传递给对象的维度字符串，不同的函数将附加到callBackAnim变量。对象的创建方式仍然完全相同。但是当动画执行时，执行callBackAnim。我不确定，但我不认为这完全符合回调功能。所以这就是我在动画循环中所拥有的。

  for(var i=0;i<animationQue.length;i++){
    if(animationQue[i].start<progress){
    animationQue[i].callBackAnim(animationQue[i].div, animationQue[i].tweenArr[0]);
    animationQue[i].tweenArr.shift();
    animationQue[i].start = animationQue[i].start + animationQue[i].FPS;
    }
  }

有没有办法将Div属性指针而不是其值发送到Object

1 个答案: