en/animation/animation-state/playback-control.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.44.1 (20200629.0846)
 -->
<!-- Pages: 1 -->
<svg width="443pt" height="229pt"
 viewBox="0.00 0.00 442.75 228.63" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 224.63)">
<polygon fill="white" stroke="transparent" points="-4,4 -4,-224.63 438.75,-224.63 438.75,4 -4,4"/>
<!-- entry -->
<g id="node1" class="node">
<title>entry</title>
<polygon fill="none" stroke="black" points="136.18,-220.63 79.53,-202.63 136.18,-184.63 192.82,-202.63 136.18,-220.63"/>
<text text-anchor="middle" x="136.18" y="-198.43" font-family="Courier New" font-size="14.00">entry</text>
</g>
<!-- stopped -->
<g id="node4" class="node">
<title>stopped</title>
<ellipse fill="none" stroke="black" cx="136.18" cy="-129.63" rx="63.35" ry="18"/>
<text text-anchor="middle" x="136.18" y="-125.43" font-family="Courier New" font-size="14.00">&lt;stopped&gt;</text>
</g>
<!-- entry&#45;&gt;stopped -->
<g id="edge1" class="edge">
<title>entry&#45;&gt;stopped</title>
<path fill="none" stroke="black" d="M136.18,-184.44C136.18,-176.42 136.18,-166.68 136.18,-157.7"/>
<polygon fill="black" stroke="black" points="139.68,-157.66 136.18,-147.66 132.68,-157.66 139.68,-157.66"/>
</g>
<!-- playing -->
<g id="node2" class="node">
<title>playing</title>
<ellipse fill="none" stroke="black" cx="63.18" cy="-29.42" rx="63.35" ry="18"/>
<text text-anchor="middle" x="63.18" y="-25.22" font-family="Courier New" font-size="14.00">isPlaying</text>
</g>
<!-- playingPaused -->
<g id="node3" class="node">
<title>playingPaused</title>
<ellipse fill="none" stroke="black" cx="352.18" cy="-29.42" rx="82.66" ry="29.33"/>
<text text-anchor="middle" x="352.18" y="-33.62" font-family="Courier New" font-size="14.00">isPlaying &amp;&amp;</text>
<text text-anchor="middle" x="352.18" y="-16.82" font-family="Courier New" font-size="14.00">isPaused</text>
</g>
<!-- playing&#45;&gt;playingPaused -->
<g id="edge3" class="edge">
<title>playing&#45;&gt;playingPaused</title>
<path fill="none" stroke="black" d="M126.6,-29.42C165.44,-29.42 215.83,-29.42 259.14,-29.42"/>
<polygon fill="black" stroke="black" points="259.41,-32.92 269.41,-29.42 259.41,-25.92 259.41,-32.92"/>
<text text-anchor="middle" x="197.97" y="-36.62" font-family="Courier New" font-size="14.00">play()/resume()</text>
</g>
<!-- playing&#45;&gt;stopped -->
<g id="edge5" class="edge">
<title>playing&#45;&gt;stopped</title>
<path fill="none" stroke="black" d="M84.79,-46.5C94.72,-54.73 106.07,-65.41 114.18,-76.83 119.54,-84.39 123.95,-93.46 127.37,-101.89"/>
<polygon fill="black" stroke="black" points="124.14,-103.23 130.94,-111.35 130.69,-100.76 124.14,-103.23"/>
<text text-anchor="middle" x="149.37" y="-81.03" font-family="Courier New" font-size="14.00">stop()</text>
</g>
<!-- playingPaused&#45;&gt;playing -->
<g id="edge4" class="edge">
<title>playingPaused&#45;&gt;playing</title>
<path fill="none" stroke="black" d="M279.85,-14.9C246.07,-9.85 205.29,-6.2 168.58,-9.62 153.67,-11 137.72,-13.47 122.86,-16.21"/>
<polygon fill="black" stroke="black" points="121.94,-12.82 112.77,-18.14 123.25,-19.7 121.94,-12.82"/>
<text text-anchor="middle" x="197.97" y="-13.82" font-family="Courier New" font-size="14.00">pause()</text>
</g>
<!-- playingPaused&#45;&gt;stopped -->
<g id="edge6" class="edge">
<title>playingPaused&#45;&gt;stopped</title>
<path fill="none" stroke="black" d="M302.36,-53.07C264.56,-70.25 213.22,-93.6 177.65,-109.77"/>
<polygon fill="black" stroke="black" points="176.17,-106.6 168.51,-113.93 179.06,-112.97 176.17,-106.6"/>
<text text-anchor="middle" x="269.37" y="-81.03" font-family="Courier New" font-size="14.00">stop()</text>
</g>
<!-- stopped&#45;&gt;playing -->
<g id="edge2" class="edge">
<title>stopped&#45;&gt;playing</title>
<path fill="none" stroke="black" d="M92.06,-116.6C80.97,-111.38 70.36,-104.01 63.78,-93.63 57.17,-83.2 56.25,-69.72 57.3,-57.89"/>
<polygon fill="black" stroke="black" points="60.82,-58.01 58.71,-47.63 53.89,-57.06 60.82,-58.01"/>
<text text-anchor="middle" x="89.37" y="-81.03" font-family="Courier New" font-size="14.00">play()</text>
</g>
</g>
</svg>