[css3-transitions] "seamless" additive animations

Please forgive the audacity of this first post of mine to the list. There is a different use for additive animation that has been overlooked. I am asking for a drastic change to the CSS Transitions working draft. It is based upon the Core Animation usage pattern that I prefer to use for layout. It produces beautiful curves in response to user interaction, by blending animations from one to the next without the jarring angles and sudden change inherent in presentation value animation. This is entirely different than the usual request of complex animations expressed as combinations of simpler animations that could be instead replicated by nesting elements. I have sample videos at http://kxdx.org/animation-sample-videos using code for OSX available at https://github.com/KevinDoughty/AdditiveSamples and https://github.com/KevinDoughty/SeamlessAnimation

All transitions should be additive, and run concurrently on the same property without being replaced. They should animate from the old underlying value minus the new underlying value to zero. This is applied to each individual component of structs like rectangles, and can produce negative width and height. Color and opacity transition animations would also need to accept negative values. They would be clamped to a sane value only after all transition animation values have been summed. For transforms, old minus new means concatenate the old with the inverse of the new. A to value of zero means things like (0,0) or the identity transform. 

A "perfect" ease in ease out timing function with cubic bezier points ..5, 0, .5, 1, would need to be added and should be the default. If this technique has a weakness, this is it. Use any other timing function and the seams will show. For example a linear curve will make it obvious when one animation ends if others are running on the same property. Transient visual discrepancies will also show if forward and reverse transition durations are different, or perhaps with use of delays.

As an example, consider a floating point property transitioning from 2 to 10. The animation from value would be -8 and the to value 0. The underlying value is instantly changed to 10, and the added animation produces a presentation value of 2. Now consider halfway through the animation the property is reversed back from 10 to 2. The animation is currently at -4 resulting in a presentation value of 6, when the underlying model value is instantly changed back to 2. A second animation is added with a from value of 8 and a to value of 0. The underlying value of 2 plus the first animation value of -4 plus the second animation value of 8 results in no presentation value change, which is still at 6. The first animation begins to slow down and the second animation speeds up, resulting in the apparent presentation value slowing down its approach to 10, stopping, then reversing course towards 2.

If you permit it, additive animation can significantly improve the user experience.

Received on Wednesday, 24 April 2013 12:55:22 UTC