Re: [web-animations] API sketch for updated Player behaviour

Hi Kevin,

Thank you very much for your feedback. Sorry for the delay in my 
response as I've been travelling recently.

I'm not sure I've quite understood so let me add a few comments and you 
can point out where I've got it wrong.

(2013/10/28 6:02), Kevin Doughty wrote:
> I have been following the play, pause and seek issue but my envisioned uses do not require a scrubber or repeat count. I have however used ParGroups for various reasons and will outline what I have tried.
>
> First of all, in Core Animation when you add an animation to a CALayer, it actually results in a copy being added. When you query the CALayer for any of its currently running animations, the copies are returned and are not supposed to be modified else you get undefined behavior.
>
> I would prefer it this way but remove() requires a parent, which is the primary reason I use groups.

Which remove() is this? In Web Animations? It currently operates on 
either the parent group or player.[1] I will make that more clear in the 
API section.

 > There was also a naive attempt to enforce arbitrary order for scale, 
rotate, and translate transform operations, which failed.

I'm not sure what this refers to. Who attempted this? What was the problem?

>
> As it is now, I need a both-filling and zero duration ParGroup that does not tick away until animations are appended by user interaction.

This sounds like you want Option C from [2]. Currently, players always 
tick away.

 >
When they are done the ticking should stop, and resume if new animations 
are added.

Again, this is option C, assuming the group is the only thing attached 
to the player.

Does that sound right?

> Object lifecycle and memory management probably shouldn't be required in javascript, but Core Animation has a "removedOnCompletion" property which might seem redundant with fill modes. There is a noticeable performance hit, eventually, if they are never removed.

We have tried to allow animations to be discarded when they are finished 
by ensuring there is no way to access them from the API or cause them to 
be replayed.

Basically, once a player's source content has finished, if there is no 
reference to the player or any of its source content from script it can 
be safely garbage collected. See the description of "current" under [3] 
for a few extra notes.

> I would be forced to use private API to clean up animations not contained in a group:
> anim.onend = function() {
> 	if (anim.parent) anim.remove();
> 	else anim._player._deregisterFromTimeline();
> }

You can simply drop all references to the animation and it will be 
garbage collected.

There is no private API just implementation details of the polyfill that 
have been unfortunately exposed. You should never use those members. 
Hopefully they will be removed.

> On the subject of using private API, I also have difficulties when copying animations from one element to another. I use this technique for Core Animation with both the glyphs of NSTextView and the subviews of NSSplitView. For animating text, line fragment rectangles need to be constantly split and merged to reduce the number of layers used. The issue is that if many additive animations are added by an asynchronous process or user interaction, it would otherwise be impossible to insert a new element and match existing animations.

I don't understand what the difficulties are.

You can clone animations using clone(). Or if you just want to clone the 
timing you *used* to be able to just pass anim.specified to the 
constructor of another animation (since Timing and TimingInput had the 
same members) but we broke that when we introduced timing function 
chains. We'll hopefully find a way to fix that.

> The instructions for the following fiddle are click every button from "very slow" to "very fast". This will result in complicated s-curve animation. Then start clicking on the moving element. The element is split where clicked and new elements are inserted. It only works in Google Chrome.
>
> http://jsfiddle.net/Sd4xw/embedded/result/
>
> This uses a both-filling, zero duration ParGroup to contain constant animations that represent the underlying value. I have not been able to achieve both animation copying and animation removal on completion at the same time, which is why I would like a removedOnCompletion property. Here is the copying code from the fiddle. Getting the correct timing delay is a bit tricky.
>
> function copyAnimationsFromOldElementToNewElement(oldDiv,newDiv) {
> 	var oldAnimations = oldDiv.getCurrentAnimations();
> 	var length = oldAnimations.length
> 	for (var i=0; i<length; i++) {
> 		var old = oldAnimations[i];
> 		var effect = old.effect.clone();
> 		var oldTiming = old.specified._dict; // !!!
> 		var newTiming = JSON.parse(JSON.stringify(oldTiming));
> 		newTiming.delay = ((old._player.startTime + oldTiming.delay) - document.timeline.currentTime); // !!!
> 		newDiv.animate(effect,newTiming);
> 	}
> }

I'm not sure about the current state of the polyfill but I *think* you 
should be able to do this as follows:

function copyAnimationsFromOldElementToNewElement(oldDiv,newDiv) {
   var oldAnimations = oldDiv.getCurrentAnimations();
   oldAnimations.forEach(function(oldAnim) {
     var newAnim = oldAnim.clone();
     newAnim.target = newDiv;
     document.timeline.play(newAnim).currentTime = oldAnim.localTime;
   });
}

Or if you know the animations are not part of timing groups:

function copyAnimationsFromOldElementToNewElement(oldDiv,newDiv) {
   var oldAnimations = oldDiv.getCurrentAnimations();
   oldAnimations.forEach(function(oldAnim) {
     var newAnim = oldAnim.clone();
     newAnim.target = newDiv;
     oldAnim.player.source = newAnim;
   });
}

Does that work?

> I apologize for addressing mostly tangential or even orthogonal issues, but I hope it helps.

I'm not sure I've understood the issues properly so please correct me 
where I've misunderstood.

Thanks,

Brian


[1] http://dev.w3.org/fxtf/web-animations/#dfn-remove-a-timed-item
[2] http://lists.w3.org/Archives/Public/public-fx/2013OctDec/0059.html
[3] http://dev.w3.org/fxtf/web-animations/#timed-item-phases-and-states

Received on Friday, 1 November 2013 02:46:50 UTC