JavaScript时间轴动画(setTimeout准确性问题)
问题描述:
我开始在JS中编写一个简单的动画类,该类使用Zepto.js动画功能,但增加了时间线功能。JavaScript时间轴动画(setTimeout准确性问题)
的时间表本身是一个简单的数组,当它的play()函数被调用执行嵌入在它的功能:
play : function(callback){
for(var i=0; i<Animator.timeline.buffer.length; i++){
Animator.timeline.buffer[i].animation();
}
if(callback){
callback();
}
}
的setTimeout的直接进入动画:
alpha : function(parameters, callback, delay){
var target = parameters.target;
var duration = parameters.duration;
var easing = parameters.easing;
var value = parameters.value;
if(delay){
setTimeout(function(){run();},delay*1000);
} else {
run();
}
function run(){
$(target).anim({opacity:value},duration,easing);
if(callback){
callback();
}
}
}
所以基本上,时间线只是运行放置在缓冲区数组中的setTimeout-ed函数。
这种方法(几乎)与WebKit动画一样符合预期,但在执行图像序列(使用setInterval更改图像的src的动画)时遇到了一些问题。由于JS定时器不能保证在指定的时间内执行,有时候动画运行会延迟,可能是因为它们中嵌入了setInterval。
关于如何解决这个问题的任何想法?我意识到将所有动画嵌入到另一个动画中会解决很多问题,但我不知道如何在时间线循环内执行此操作。另外,如果我以直接方式调用所有函数(不使用时间轴),它很快就会变成一堆无法读取的回调。
仅供参考,我的动画类的顺序功能:
sequence : function(parameters, callback, delay){
var target = parameters.target;
var path = parameters.path;
var baseName = parameters.baseName;
var digits = parameters.digits;
var extension = parameters.extension;
var frames = parameters.frames;
var loop = parameters.loop;
if(parameters.interval){
var _interval = parameters.interval
} else {
var _interval = 15;
}
var currentFrame = 0;
var imageUrl = '';
var fileName = baseName;
for(var i=0; i<=digits; i++){
fileName+='0';
}
if(delay){
setTimeout(function(){runSequence();},delay*1000);
} else {
runSequence();
}
function runSequence(){
var interval = setInterval(function(){
if(currentFrame >= frames){
currentFrame = 0;
if(!loop) {
clearInterval(interval);
if(callback){
callback();
}
}
} else {
imageUrl = path+fileName.substring(0, fileName.length-currentFrame.toString().length)+currentFrame+"."+extension;
$(target).attr('src',imageUrl);
currentFrame++;
}
},_interval);
}
}
此外,通过使用这个类创建动画的一个样本:
Animator.timeline.append(function(){
Animator.alpha({'target':'#logo', 'value':1, 'duration':1, 'easing':'ease-out' });
});
Animator.timeline.append(function(){
Animator.sequence({'target':'#sequence', 'path':'images/sequences/index/', 'baseName':'nr1_', 'digits':3, 'extension':'png', 'frames':50},'',1.5);
});
Animator.timeline.append(function(){
Animator.scale({'target':'#text', 'width':.5, 'height':.15, 'duration':1, 'easing':'ease-in-out'},'',3.2);
});
Animator.timeline.append(function(){
Animator.alpha({'target':'#link', 'value':1, 'duration':1,'easing':'ease-out'},'',4.7);
});
Animator.timeline.play();
作为附加的注释,我的目标在AS3中创建类似GreenSock的东西,如果有帮助的话。
谢谢。
你,先生,只是解决了一个巨大的问题对我来说。我真诚地感谢你。 – dbozhinovski