Web Animations/API Comparison

From Effects Task Force

QML

http://qt-project.org/doc/qt-4.8/qdeclarativeanimation.html

How does it handle grouping and play control?

  • Play control defined on Animation
  • Play control is ignored if there is a parent group:


"Once an animation has been grouped into a SequenceAnimation or ParallelAnimation it cannot be individually started and stopped. The SequenceAnimation or ParallelAnimation must be started and stopped as a group."

Raphaël

http://raphaeljs.com/reference.html


How does it handle grouping and play control?

  • Doesn't have groups
  • Pause is applied to animation via element
  Element.pause(anim)
  Element.resume(anim)

CoreAnimation

https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Articles/AnimatingLayers.html


For animation groups, “The delegate and removedOnCompletion properties of animations in the animations array are currently ignored. The CAAnimationGroup delegate does receive these messages.”


How does it handle grouping and play control?

  • No playback control. “Once added to the target layer the explicit animation will run until the animation completes, or it is removed from the layer.”

jQuery

http://api.jquery.com/

No objects. No groups. Queues act like sequence groups.

Android

http://developer.android.com/guide/topics/graphics/prop-animation.html


Orientation

  • Animations are represented by the Animator interface. You can see this from the following tutorial code snippet:
 ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f);
 animation.setDuration(1000);
 animation.start();
  • Animation groups are represented by AnimatorSets

How does it handle grouping and play control?

  • Play control is on the animation (Animator) interface
  • Groups cannot be repeated, sped-up etc. Animations and groups cannot be paused or seeked / only cancelled so semantics are well-defined in all cases.


DirectAnimation

Cannot find any resources on this—it has been obliterated from history.

WPF

http://msdn.microsoft.com/en-us/library/ms752312.aspx


I don't really understand how all this works. For example, how do you get from an animation to its clock? There are probably over 100 interfaces in this part of the model and the documentation doesn't show what is unique to each one so I've only outlined a few parts of the model. But here are some choice quotes that explain the hiearchy:

A Clock object's ClockController property enables you to interactively start, pause, resume, seek, advance the clock to its fill period, and stop the clock. Only the root clock of a timing tree can be interactively controlled.


In most cases, a clock is created automatically for your timeline. When you animate by using a Storyboard or the BeginAnimation method, clocks are automatically created for your timelines and animations and applied to their targeted properties.


Clocks are arranged in trees that match the structure of the Timeline objects tree from which they are created. The root clock of such a timing tree can be interactively manipulated (paused, resumed, stopped, and so on) by retrieving its Controller. Non-root clocks cannot be directly controlled.


For groups here is a snippet of the inheritance hierarchy:

   System.Windows.Media.Animation.Timeline
       System.Windows.Media.Animation.TimelineGroup
         System.Windows.Media.Animation.ParallelTimeline
           System.Windows.Media.Animation.Storyboard

Storyboards have a clock so you can pause/seek them directly.

How does it handle grouping and play control?

  • There is a separate timing tree and you can get a controller for the root-most clock in the timing tree only. You use that to control playback.

d3

https://github.com/mbostock/d3/wiki/Transitions

No play control as best I can tell.

MathBox

https://github.com/unconed/MathBox.js/


How does it handle grouping and play control?

  • Doesn't have groups only queues on elements which don't repeat
  • Play control defined directly on animations

HTML

http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#htmlmediaelement


How does it handle grouping and play control?

  • Only one level of grouping
  • Play control defined directly on media
  • Play control behaves differently for media slaved to a controller