[web-anim] "Seamless" additive animation

I have been posting to css-style for a recommendation of a particular type of additive transition. Please forgive the cross-post, but Brian Birtles commented at my website http://kxdx.org/seamless-css-transitions/ and I would like to address it here. I have been calling this type of animation "seamless". It is for implicit, transition-style animations, when the underlying value of a property is changed. I cannot stress enough how appropriate this usage pattern is for animating layout changes, in particular when responding to user events. It produces animations that seamlessly blend together and produce beautiful curves instead of jarring presentation value animations.

Animations are additive and can run concurrently. They are created with a from-value of the old underlying value minus the new underlying value, and a to-value of zero. This is pretty much the opposite of SVG to-animations, which have no effect if the to-value is the same as the underlying model value. To-animations might be useful for storytelling and visualization but not for workhorse animation in response to user events. Please make this type of implicit animation possible.

I forked WebKit at https://github.com/KevinDoughty/webkit and added "-webkit-transition-seamless: seamless;" which is a single switch needed to enable this type of animation. The video shows webkit before and after behavior: http://www.youtube.com/watch?v=lFgvb7p9dDs . There are other posts, videos, and code at http://kxdx.org . The best eye candy video is http://www.youtube.com/watch?v=u1RStgv0_CU and although most of it is too complicated to be implicitly animated, it shows the usefulness of additive animation.

Basic formula with p as the output of a timing function. When the animation is over the resulting value is not Vend, it is zero!
Vres = (1 - p) * (Vstart - Vend)

An example of a property at value A with no animation:
Vres = A

The property is changed to B with an additive animation:
Vres = B + ((1-p1) * (A-B))

The property is changed to C with a second additive animation:
Vres = C + ((1-p1) * (A-B)) + ((1-p2) * (B-C))

The property is changed back to A with a third additive animation:
Vres = A + ((1-p1) * (A-B)) + ((1-p2) * (B-C)) + ((1-p3) * (C-A))

Received on Monday, 10 June 2013 17:26:59 UTC