requestAnimationFrame在Chrome里的实现

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

                       

requestAnimationFrame是HTML5游戏和动画必不可少的函数，相对于setTimeout或setInterval它有两个优势，一是它注册的回调函数与浏览器的渲染同步，不用担心Timer的时间间隔太长或太短。二是时间间隔相对与Timer要稳定，requestAnimationFrame注册的回调函数最高执行频率是60FPS，虽然在HTML5游戏里通常是达不到的，但是它两次调用之间时间间隔要比Timer稳定一些。前段时间我在CanTK Runtime里自己模拟过requestAnimationFrame，为了深入的理解Chrome里实现requestAnimationFrame方法，花了一点时间去读Blink的代码。

requestAnimationFrame的基本用法如下：

var start = null;var element = document.getElementById("SomeElementYouWantToAnimate");function step(timestamp) {  if (!start) start = timestamp;  var progress = timestamp - start;  element.style.left = Math.min(progress/10, 200) + "px";  if (progress < 2000) {    window.requestAnimationFrame(step);  }}window.requestAnimationFrame(step);
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13

我比较关注的是回调函数的注册和调用过程：

• 1.注册回调函数的实现。

(WebKit/Source/core/dom/ScriptedAnimationController.cpp)

ScriptedAnimationController::CallbackId ScriptedAnimationController::registerCallback(FrameRequestCallback* callback){    CallbackId id = m_callbackCollection.registerCallback(callback);    scheduleAnimationIfNeeded();    return id;}
  
  
1
2
3
4
5
6

注册之后还需要请求重绘，scheduleAnimationIfNeeded最终会调到ThreadProxy::SendCommitRequestToImplThreadIfNeeded：

(cc/trees/thread_proxy.cc)

bool ThreadProxy::SendCommitRequestToImplThreadIfNeeded(    CommitPipelineStage required_stage) {  DCHECK(IsMainThread());  DCHECK_NE(NO_PIPELINE_STAGE, required_stage);  bool already_posted =      main().max_requested_pipeline_stage != NO_PIPELINE_STAGE;  main().max_requested_pipeline_stage =      std::max(main().max_requested_pipeline_stage, required_stage);  if (already_posted)    return false;  Proxy::ImplThreadTaskRunner()->PostTask(      FROM_HERE,      base::Bind(&ThreadProxy::SetNeedsCommitOnImplThread,                 impl_thread_weak_ptr_));  return true;}void ThreadProxy::SetNeedsCommitOnImplThread() {  TRACE_EVENT0("cc", "ThreadProxy::SetNeedsCommitOnImplThread");  DCHECK(IsImplThread());  impl().scheduler->SetNeedsBeginMainFrame();}void Scheduler::SetNeedsBeginMainFrame() {  state_machine_.SetNeedsBeginMainFrame();  ProcessScheduledActions();} 
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

• 2.执行回调函数的实现。

WebKit/Source/core/dom/ScriptedAnimationController.cpp

void ScriptedAnimationController::executeCallbacks(double monotonicTimeNow){    // dispatchEvents() runs script which can cause the document to be destroyed.    if (!m_document)        return;    double highResNowMs = 1000.0 * m_document->loader()->timing().monotonicTimeToZeroBasedDocumentTime(monotonicTimeNow);    double legacyHighResNowMs = 1000.0 * m_document->loader()->timing().monotonicTimeToPseudoWallTime(monotonicTimeNow);    m_callbackCollection.executeCallbacks(highResNowMs, legacyHighResNowMs);}void FrameRequestCallbackCollection::executeCallbacks(double highResNowMs, double highResNowMsLegacy){    // First, generate a list of callbacks to consider.  Callbacks registered from this point    // on are considered only for the "next" frame, not this one.    ASSERT(m_callbacksToInvoke.isEmpty());    m_callbacksToInvoke.swap(m_callbacks);    for (size_t i = 0; i < m_callbacksToInvoke.size(); ++i) {        FrameRequestCallback* callback = m_callbacksToInvoke[i].get();        if (!callback->m_cancelled) {            TRACE_EVENT1("devtools.timeline", "FireAnimationFrame", "data", InspectorAnimationFrameEvent::data(m_context, callback->m_id));            InspectorInstrumentationCookie cookie = InspectorInstrumentation::willFireAnimationFrame(m_context, callback->m_id);            if (callback->m_useLegacyTimeBase)                callback->handleEvent(highResNowMsLegacy);            else                callback->handleEvent(highResNowMs);            InspectorInstrumentation::didFireAnimationFrame(cookie);            TRACE_EVENT_INSTANT1(TRACE_DISABLED_BY_DEFAULT("devtools.timeline"), "UpdateCounters", TRACE_EVENT_SCOPE_THREAD, "data", InspectorUpdateCountersEvent::data());        }    }    m_callbacksToInvoke.clear();}
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

这行代码m_callbacksToInvoke.swap(m_callbacks);比较有意思，在循环执行的callbacks会有新的callback注册进来，我在实现这个功能时，没看过这段代码，当时费了点功夫才想明白怎么搞。

上面的代码是由RenderWidgetCompositor::BeginMainFrame调过来的：
(src/content/renderer/gpu/render_widget_compositor.cc)

void RenderWidgetCompositor::BeginMainFrame(const cc::BeginFrameArgs& args) {  double frame_time_sec = (args.frame_time - base::TimeTicks()).InSecondsF();  double deadline_sec = (args.deadline - base::TimeTicks()).InSecondsF();  double interval_sec = args.interval.InSecondsF();  WebBeginFrameArgs web_begin_frame_args =      WebBeginFrameArgs(frame_time_sec, deadline_sec, interval_sec);  compositor_deps_->GetRendererScheduler()->WillBeginFrame(args);  widget_->webwidget()->beginFrame(web_begin_frame_args);}
  
  
1
2
3
4
5
6
7
8
9

           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow