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

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. There was also a naive attempt to enforce arbitrary order for scale, rotate, and translate transform operations, which failed.

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. When they are done the ticking should stop, and resume if new animations are added. The appended animations are typically the negative delta style with a backwards fill and non zero duration. However I also add zero duration both-filling animations that let me represent the underlying value using the same API used to animate, instead of having to use the stylesheet. If remove() behavior cannot be changed, please preserve this "realtime" container.

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.

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();
}

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.

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);
	}
}

For comparison here is the equivalent Core Animation code:

-(void)copyAnimationsFromLayer:(CALayer*)theOldLayer toLayer:(CALayer*)theNewLayer {
	NSArray *theAnimationKeys = [theOldLayer animationKeys];
	for (NSString *theKey in theAnimationKeys) {
		CAAnimation *theAnimation = [theOldLayer animationForKey:theKey].copy;
		[theNewLayer addAnimation:theAnimation forKey:theKey];
	}
}

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

Received on Sunday, 27 October 2013 21:03:22 UTC