Confirmed users
166
edits
Platform/Layout/Web Animations: Difference between revisions
Jump to navigation
Jump to search
Fill out issue 1
(Start filling in spec issues) |
(Fill out issue 1) |
||
| Line 23: | Line 23: | ||
=== Issue 1: Timing interface === | === Issue 1: Timing interface === | ||
Currently we have this kind of arrangement: | |||
interface TimedItem : EventTarget { | |||
// Specified timing | |||
readonly attribute Timing specified; | |||
// Calculated timing | |||
readonly attribute double startTime; | |||
readonly attribute unrestricted double iterationDuration; | |||
readonly attribute unrestricted double activeDuration; | |||
readonly attribute unrestricted double endTime; | |||
}; | |||
interface Timing { | |||
attribute double startDelay; | |||
attribute FillMode fillMode; | |||
attribute double iterationStart; | |||
attribute unrestricted double iterationCount; | |||
attribute (unrestricted double or DOMString) iterationDuration; | |||
attribute (unrestricted double or DOMString) activeDuration; | |||
attribute double playbackRate; | |||
attribute PlaybackDirection direction; | |||
attribute DOMString? timingFunction; | |||
}; | |||
Why do we have <code>iterationDuration</code> (and <code>activeDuration</code>) twice? Because <code>iterationDuration</code> can be "auto" which is especially useful for timing groups where it means "stretch to fit the children". At the same time it's useful to be able to query the current computed value. | |||
So you have: | |||
anim.specified.iterationDuration = "auto"; | |||
var actual = anim.iterationDuration; | |||
I'm a bit concerned about setting and getting in different places. Not sure if the 'specified' is weird. | |||
One alternative: | |||
interface TimedItem : EventTarget { | |||
// Timing | |||
attribute double startDelay; | |||
attribute FillMode fillMode; | |||
attribute Duration iterationDuration; | |||
attribute Duration activeDuration; | |||
attribute double playbackRate; | |||
// ... | |||
// Scheduled time | |||
readonly attribute double startTime; | |||
readonly attribute unrestricted double endTime; | |||
}; | |||
interface Duration { | |||
double sec; | |||
DOMString string; | |||
} | |||
Usage: | |||
var specifiedDur = anim.iterationDuration.string; // "auto" | |||
var computedDur = anim.iterationDuration.sec; // 5 | |||
// Update duration to 3s | |||
anim.iterationDuration.sec = 3; | |||
// anim.iterationDuration.string -> "3s" | |||
// Update duration to 3s (alt.) | |||
anim.iterationDuration.string = "3s"; | |||
// anim.iterationDuration.sec -> 3 | |||
// Reset to auto | |||
anim.iterationDuration.string = "auto"; | |||
// anim.iterationDuration.sec -> 5 | |||
Google have expressed a (fairly strong) preference for keeping specified and computed timing separate. | |||
Thoughts? Suggestions? | |||
=== Issue 2: Timing list syntax === | === Issue 2: Timing list syntax === | ||