Platform/Layout/Web Animations

Overview

Feature comparison between CSS, SVG, and Web Animations

We could also add "Synchronizing with media" to Web Animations but I (Brian) have some uncertainty about if that will make it into v1.

Simplified class diagram of API

Some things have been simplified:

• Event classes etc. not shown
• Data types not shown
• Keyframe related dictionaries not show
• Timing dictionary not shown
• Enums not shown
• Extensions to Document, Element not shown

Spec issues

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 iterationDuration (and activeDuration) twice? Because iterationDuration 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 3: play() and playNow()

CSS doesn't really define when animations start. That can be problematic but it can also be helpful: e.g. allows delaying animation to compensate for vsync etc.

Proposal:

interface Timeline {
  Player playNow(optional TimedItem? source = null);
  Future play(optional TimedItem? source = null);
  ...
}

playNow creates a new Player with a startTime set to the current time of the <a>Timeline</a>.

play creates a new Player whose startTime is initially null. The UA starts it at the earliest possible time ensuring that it begins from the first frame. When it is started, the startTime is filled in and the Future is resolved (passing in the Player as the argument).

Implementation

Large pieces:

• Script API
• Rework CSS in terms of same base objects
• Rework SVG in terms of same base objects