View source for Web Animations/API Comparison

== QML ==

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

[[File:qml-class-diagram.png]]

'''How does it handle grouping and play control?'''

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


<blockquote>"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."</blockquote>

== Raphaël ==

http://raphaeljs.com/reference.html

[[File:raphael-class-diagram.png]]


'''How does it handle grouping and play control?'''

* Doesn't have groups
* Pause is applied to animation via element
   <code>Element.pause(anim)</code>
   <code>Element.resume(anim)</code>

== CoreAnimation ==

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

[[File:ca-class-diagram.png]]


For animation groups, ''&ldquo;The delegate and removedOnCompletion properties of animations in the animations array are currently ignored. The CAAnimationGroup delegate does receive these messages.&rdquo;''


'''How does it handle grouping and play control?'''

* No playback control. ''&ldquo;Once added to the target layer the explicit animation will run until the animation completes, or it is removed from the layer.&rdquo;''

== 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

[[File:android-class-diagram.png]]


'''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&mdash;it has been obliterated from history.''

== WPF ==

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

[[File:wpf-class-diagram.png]]


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:

<blockquote>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.</blockquote>


<blockquote>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.</blockquote>


<blockquote>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.</blockquote>


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/

[[File:mathbox-class-diagram.png]]


'''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

[[File:html-class-diagram.png]]


'''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