根据时间计算运动
calculate movement based on time
所以我正在做一个小项目,主要是为了帮助我学习更好的javascript,但我遇到了一个小问题。我可以很好地制作动画,但我的问题是……我正在努力计算移动动画每一步所需的像素变化量。假设我的div是450px宽,我说的是animate({width:600,duration:2000})。这就留下了150px的总移动量,但如果我每3毫秒调用一次setTimeout函数,那么每帧要移动多少。我知道解决方案可能很简单,但出于某种原因,也许只是因为我在写这整件事的时候一直在碰壁,现在我想得不够多,想不出来。如果有人需要,我可以展示代码示例。感谢您提前提供的帮助。根据请求,这里是我迄今为止做动画的代码。。。
animate : function(params, duration) {
if(!params) {
return this;
} else {
this.current = this._defCurrent;
console.log(this.current);
var time = (duration) ? duration : this.slow;
var target;
for(var index in params) {
if(index == 'queue') {
if(params[index]){
this.animQueue = true;
} else {
this.animQueue = false;
}
} else {
var current = parseFloat(this.getStyle(index));
if(current < params[index]) {
target = params[index] - current;
animDirection = '+';
} else {
target = current - params[index];
animDirection = '-';
}
totalMovement = target / time;
animObj = {type : index, target : target, move : totalMovement, direction : animDirection, duration : time};
this.setAnimQueue(animObj);
}
}
}
this.setTheTimeout();
},
setAnimQueue : function(obj) {
var that = this;
for(var i = 0, amt = (obj.duration * this.fps); i < amt; i++) {
var fun = this.wrapFunction(that.doAnim, this, [obj.type, obj.move, obj.direction]);
this.queue.push(fun);
}
},
setTheTimeout : function() {
var that = this;
this.interValAmt = setInterval(function() {
that.deQueue()
}, this.fps);
},
doAnim : function(type, amount, direction) {
var totalAmount = eval(parseFloat(this[type]()) + direction + amount);
if(this.elem.style[this.toCamelCase(type)]) {
this[type](totalAmount);
} else {
this[type](totalAmount)
}
return this;
}
你有距离,也有持续时间。将它们分开可以加快速度。只需将速度乘以时间增量即可获得距离增量。
相关文章:
- 根据元素和容器大小计算边距
- 从Rally获取一个特定的标记,以便计算另一个字段中的值
- 使用D3.js计算带有字母间距的文本长度
- 使用CSS或JavaScript计算分页符的数量
- 可以't计算自定义谷歌地图的js
- 如何计算每个元素's的高度,并将这些值用作函数中的变量
- JavaScript计算帮助(乘以时间)
- 如何计算对象文字中的键
- JavaScript循环无法正确计算/显示结果
- 与域在同一台计算机上运行的NODEJS服务器的CORS错误
- 四舍五入JavaScript计算
- 计算HTML中的页数
- 使用jQuery计算数组中的对象以更改进度条
- 如何在jquery中使用实时计算求和值
- 计算多个项目的价格
- 计算CSS3缩放框在另一个框中的最高位置
- 如何计算二十面体的法线
- if(foo!==null)的计算结果为true,即使foo为null
- 在Angular中重新使用HTML端的计算文本
- 根据时间计算运动