Re: [web-animations] Web Animations minutes, 1 / 2 Aug 2013

> > drawback of to-animations are that instant changes to the underlying
> > value are not visible while animations are running.
> 
> I don't understand this. With regards to the last sentence, changes to the underlying value are visible while the animation is running but they get progressively dampened.
> 
> Further clarification required here.


I was trying to justify the negative delta pattern as useful and separate from to-animations. For example purple needs a nested element vs green http://jsfiddle.net/Ds2GG/embedded/result/ . But negative delta animation is already supported so it's not necessary to discuss. Thank you for your patience in explaining those details to me. Perhaps there is still more work to be done to support this kind of animation, but I am very happy to be able to produce working demos now.

Here is one more, my favorite so far, many floated divs animating on window resize. I dare call it spectacular:
http://jsbin.com/imeyix

The flicker is remarkably similar in appearance to a Core Animation bug with a workaround of using a backwards fill mode. But sadly, the same fix does not work here. Core Animation also has a property "removedOnCompletion" which seems a bit redundant with fillModes. But in the source there is a TODO to remove unused players after their animations are done, I think this is important because the demos I have shown produce a lot of them.

Originally, the term "seamless" was a boolean flag for a Core Animation framework I wrote, and refers to the ability to ask for animations in absolute coordinates and have them converted to negative delta, behind the scenes. I added this behavior to CSS in an experimental fork of webkit with very little effort.

-webkit-transition-seamless: seams | seamless;
-webkit-transition-timing-function: perfect;

Similarly for CSS animation, I was thinking about implementing:

-webkit-animation-seamless: seams | seamless;
-webkit-animation-additive: replace | additive
-webkit-animation-compositing: model | presentation | delta
-webkit-animation-timing-function: perfect;

Compositing would be similar in concept to image compositing and blending modes, but instead determine where the from and to values came from. Model would give values that produce CSS animation behavior. Presentation would give values that produce CSS transition behavior. These two were named after Core Animation.  Delta would give old minus new to zero. A "perfect additive delta" would be equivalent to "seamless".

Unfortunately, it is not clear to me how or why a "seamless" flag would be implemented in the web-animations API since it's not clear to me what it means to set an underlying property value. And my last demo, for example, does not need to as it uses floats. So I agree one could "innovate by mapping user-friendly features ... onto these primitives". However, maybe the spec could have a small line saying that negative values must be allowed for some types of animation, since the negative delta pattern is counter-intuitive. For example, Core Animation has a "feature" which I consider a bug, where animation of rectangle structs do not allow negative width or height values, instead you get the absolute value which requires a more complicated workaround.

I have not yet been able to reproduce http://jsfiddle.net/vBGnU/3/ which shows independent animation of transform components. Admittedly when using Core Animation, I have always used position coordinate change instead of transform translation and rarely rotate. It might be tough for me to try and figure out how to decompose matrices and slerp quaternions.

Finally, I emailed the author of the second-order response algorithm I've been using and asked him for permission to use it without attribution, for both the casual javascript user but also for web standards if needed, even though you all eat this kind of math for breakfast. He graciously agreed. I told him I would release the code and credit him in a blog post about web-animations which I hope to write soon.

Received on Thursday, 8 August 2013 21:20:36 UTC