我使用 requestAnimationFrame(animate);
函数更改文本颜色:
requestAnimationFrame(animate);
function animate(time){
... // change text color here
if (offset_s < offset_e) {requestAnimationFrame(animate);}
}
offset_s
和offset_s
表示颜色变化的文本的开始和结束位置。在某些情况下,动画应持续 2 秒,但在顺序情况下 - 持续 5 秒,但 offset_e - offset_s
在这两种情况下可能相同。我该怎么做才能根据以秒/毫秒为单位的给定时间来控制动画速度?
最佳答案
从问题的标签中我只能看到你在 Canvas 上绘制了动画,这就是为什么你不能使用 css-animation 或 jquery-animation。
你必须通过计算时间差来控制动画的长度。
你可以像这个例子那样做
function start_animate(duration) {
var requestID;
var startTime =null;
var time ;
var animate = function(time) {
time = new Date().getTime(); //millisecond-timstamp
if (startTime === null) {
startTime = time;
}
var progress = time - startTime;
if (progress < duration ) {
if(offset_s < offset_e){
// change text color here
}
requestID= requestAnimationFrame(animate);
}
else{
cancelAnimationFrame(requestID);
}
requestID=requestAnimationFrame(animate);
}
animate();
}
触发你的动画并调用 start_animate(2000)//持续时间以毫秒为单位 1000=1 秒
关于javascript - 如何控制动画速度(requestAnimationFrame)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27982470/