如何控制动画速度（requestAnimationFrame）？

问题描述

更改与 requestAnimationFrame（动画）的文本颜色; 功能：

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 可以在这两种情况下是相同的。我能做些什么根据秒/毫秒为单位的时间来控制动画的速度？

offset_s and offset_s indicates start and end positions of the text for color change. In some cases the animation should last for 2 seconds, but in order cases - for 5 seconds, but offset_e - offset_s could be the same in these two cases. What can I do to control the speed of animation based on given time in seconds/milliseconds?

推荐答案

您应该清楚地分开的担忧。结果
有一个单一的requestAnimationFrame运行，从而计算当前动画时间，并呼吁每个更新，并绘制相关的功能。结果
那么你的动画将通过一个函数，与当前的动画时间交易（或类，如果你去OOP实例）进行处理。

You should separate concerns clearly.
Have a single requestAnimationFrame running, which computes the current animation time and calls every update and draw related functions.
Then your animations would be handled by a function (or class instance if you go OOP) that deals with the current animation time.

只是一些方向，为code：

Just some direction for the code :

var animationTime = -1;
var _lastAnimationTime = -1;

function launchAnimation() {
    requestAnimationFrame(_launchAnimation);
}

function _launchAnimation(time) {
    animationTime = 0;
    _lastAnimationTime = time;
    requestAnimationFrame(animate);
}

function animate(time){
  requestAnimationFrame(animate);
  var dt = time - _lastAnimationTime ;
  _lastAnimationTime = time;
  animationTime += dt;

  // here call every draw / update functions
  //  ...
  animationHandler.update(animationTime);
  animationHandler.draw(context);
}

要开始新的引擎，只需拨打 launchAnimation 那么你就会有一个有效的 animationTime 和 DT 来应对。

To start your 'engine', just call launchAnimation then you'll have a valid animationTime and dt to deal with.

我会想办法让 animationHandler 的 AnimationHandler 类的一个实例，它允许添加/删除/更新/画动画。

I'd make animationHandler an instance of an AnimationHandler class, that allows to add/remove/update/draw animations.

这篇关于如何控制动画速度（requestAnimationFrame）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！