[web-animations-2] Allow Animation constructor to take an object of properties as second param

[ydaniv]

Currently the Animation() constructor is defined as:

Animation (effect, timeline)
...
timeline
An optional value which, if present, specifies the timeline with which to associate the newly-created animation. If missing, the default document timeline of the Document associated with the Window that is the current global object is used.

This doesn't leave any declarative way to set any of the other Animation's attributes.
These attributes are:

• rangeStart and rangeEnd
• id

And of course we can add to that:

• timeline

And we're also in the process of adding:

• trigger

---

Proposal

Allow the second param to be an object containing all the Animation-related properties, so they can be set declaratively in a single expression.

Example:

const animation = new Animation(keyframeEffect, {
  id: 'some-anim-5',
  trigger: new AnimationTrigger({
    type: 'alternate',
    timeline: new ViewTimeline({ subject })
  })
});

Or:

const animation = new Animation(keyframeEffect, {
  rangeStart: 'entry 50%',
  rangeEnd: 'exit 50%',
  timeline: new ViewTimeline({ subject })
});

I can also see possible future extensions, but the above should already allow a much more convenient and coherent API.

cc @flackr @birtles @bramus

[bramus]

+1 to having the constructor also take KeyframeAnimationOptions instead of only a AnimationTimeline instance as its second argument.

It would make using Element.animate() and new Animation() more aligned to each other.