Re: [csswg-drafts] [web-animations-1] Make animations become idle when they have an inactive timeline (#2066)

> Per @birtles suggestion [this](https://docs.google.com/document/d/108BW6PmXP_JUCKmfyNpWK4EEs5s5XpTcL3mPiQ6bEPI/edit?usp=sharing) document has 2 state charts:
>  1. Animation states along with play/pause/newly inactive timeline/newly active timeline transitions.
>  2. Animation states along with set start time/set current time transitions.

Thanks for doing this. I had a look but I couldn't quite understand why play/pause can go to to different states from the idle state. Does one correspond to a pending playback rate change, perhaps?

Just taking the active timeline side of the diagram I got something like the following:

![image](https://user-images.githubusercontent.com/1232595/74125232-0c72d600-4c18-11ea-9251-e1b4a9204d56.png)

<details>
<summary>graphviz / dot markup for the diagram</summary>

```dot
digraph G {
  // States
  "Idle" [label="Idle\nST = null\nHT = null\nTask = none"]
  "Play-pending" [label="Play-pending\nST = null\nHT = resolved\nTask = play"]
  "Pause-pending (from idle)" [label="Pause-pending\n(from idle)\nST = null\nHT = resolved\nTask = pause"]
  "Pause-pending (from running)" [label="Pause-pending\n(from running)\nST = resolved\nHT = null\nTask = pause"]
  "Running" [label="Running\nST = resolved\nHT = null\nTask = none"]
  "Paused" [label="Paused\nST = null\nHT = resolved\nTask = none"]

  // Idle state
  "Idle" -> "Play-pending" [ label="play()" color="red" ]
  "Idle" -> "Pause-pending (from idle)" [ label="pause()" color="green" ]

  // Play-pending state
  "Play-pending" -> "Running" [ label="ready" style=dashed ]
  "Play-pending" -> "Play-pending" [ label="play()" color="red" ]
  "Play-pending" -> "Pause-pending (from idle)" [ label="pause()" color="green" ]

  // Pause-pending from idle state
  "Pause-pending (from idle)" -> "Paused" [ label="ready" style=dashed ]
  "Pause-pending (from idle)" -> "Play-pending" [ label="play()" color="red" ]
  "Pause-pending (from idle)" -> "Pause-pending (from idle)" [ label="pause()" color="green" ]

  // Pause-pending from running state
  "Pause-pending (from running)" -> "Paused" [ label="ready" style=dashed ]
  // (Following is the aborted paused behavior)
  "Pause-pending (from running)" -> "Running" [ label="play()" color="red" ]
  "Pause-pending (from running)" -> "Pause-pending (from running)" [ label="pause()" color="green" ]

  // Running state
  "Running" -> "Running" [ label="play()" color="red" ]
  "Running" -> "Pause-pending (from running)" [ label="pause()" color="green" ]

  // Paused state
  "Paused" -> "Paused" [ label="pause()" color="green" ]
  "Paused" -> "Play-pending" [ label="play()" color="red" ]
}
```

</details>

I generated the diagram using http://www.webgraphviz.com/ if you want to fix it.

-- 
GitHub Notification of comment by birtles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2066#issuecomment-583972407 using your GitHub account

Received on Monday, 10 February 2020 06:15:53 UTC