Update animation README with a visual graph of creation flow.

Describe the creation flow of newly started compositor animations with a
dotty diagram.

Change-Id: I893ad2fbe781af4e49c6adbf0af139298080165f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1540540
Commit-Queue: Robert Flack <flackr@chromium.org>
Reviewed-by: Yi Gu <yigu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#645302}

cc/animation/README.md

@@ -172,8 +172,12 @@ the animating element into a layer. The Blink
 document describes how composited animations are created in blink. Once a
 compositor animation is created it is pushed through the commit cycle.
 
+![new animation]
+
 The lifetime of a newly started cc::Animation is roughly the following:
 
+1. An update to style or a new animation triggers a new [BeginMainFrame][] via
+   [ScheduleVisualUpdate][].
 1. [blink::DocumentAnimations::UpdateAnimations][] calls [blink::Animation::PreCommit][]
    on each pending blink::Animation constructing the corresponding
    cc::Animation via [blink::Animation::CreateCompositorAnimation][] (attaching
@@ -213,6 +217,9 @@ The lifetime of a newly started cc::Animation is roughly the following:
 1. Subsequent animation ticks will now update the property nodes on the active
    tree.
 
+[new animation]: images/new-animation.png
+[BeginMainFrame]: https://cs.chromium.org/chromium/src/cc/trees/proxy_main.cc?type=cs&q=file:proxy_main%5C.cc+RequestMainFrameUpdate
+[ScheduleVisualUpdate]: https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/frame/local_frame.cc?type=cs&q=file:local_frame%5C.cc+ScheduleVisualUpdate
 [blink::DocumentAnimations::UpdateAnimations]: https://cs.chromium.org/search?q=function:blink::DocumentAnimations::UpdateAnimations+GetPendingAnimations
 [blink::Animation::PreCommit]: https://cs.chromium.org/search?q=function:blink::PendingAnimations::Update+%5C-%5C>PreCommit%5C(&g=0&l=57
 [blink::Animation::CreateCompositorAnimation]: https://cs.chromium.org/search?q=function:blink::Animation::CreateCompositorAnimation+%5E%5B+%5D*AttachCompositorTimeline

cc/animation/images/new-animation.png.dot

+// dot -Tpng cc/animation/images/new-animation.png.dot > cc/animation/images/new-animation.png
+// When making modifications run the above command to regenerate the diagram.
+
+digraph G {
+  label = "Starting a new composited animation";
+
+  subgraph cluster_main {
+    label = "Main thread";
+
+    subgraph cluster_blink {
+      node [style=filled];
+      ScheduleVisualUpdate
+      UpdateLifecycle -> RunPaintLifecyclePhase -> UpdateAnimations -> PreCommit -> CreateCompositorAnimation -> AttachCompositorTimeline;
+      RunPaintLifecyclePhase -> PushPaintArtifactToCompositor;
+      label = "third_party/blink/";
+    }
+
+    subgraph cluster_cc_main {
+      node [style=filled];
+      AttachAnimation -> SetAnimationTimeline -> RegisterKeyframeEffect;
+      RegisterElement -> UpdateKeyframeEffectsTickingState;
+      BeginMainFrame -> RequestMainFrameUpdate -> UpdateLifecycle;
+      label = "cc/";
+    }
+    color=red;
+  }
+
+  subgraph cluster_impl {
+    label = "Compositor thread";
+
+    subgraph cluster_cc_impl {
+      node [style=filled];
+      ScheduledActionCommit -> FinishCommitOnImplThread -> PushPropertiesTo -> PushAttachedAnimationsToImplThread;
+      ScheduledActionCommit -> CommitComplete -> ActivateAnimations;
+      label = "cc/";
+    }
+    color=blue
+  }
+
+  ScheduleVisualUpdate -> BeginMainFrame [style=dashed];
+  AttachCompositorTimeline -> AttachAnimation;
+  PushPaintArtifactToCompositor -> RegisterElement;
+  BeginMainFrame -> ScheduledActionCommit [style=dashed];
+
+  subgraph cluster_legend {
+    label = "Legend";
+    node [shape=plaintext];
+    sync -> L1;
+    async -> L2 [style=dashed];
+    L1 [label = ""];
+    L2 [label = ""];
+  }
+}