Re: transform animation and decomposition

On 26/03/2009, at 1:36 PM, Doug Schepers wrote:

> Hi, Dean-
>
> Dean Jackson wrote (on 3/25/09 5:52 PM):
>>
>> (see the following message for a real world example)
>>
>> I wonder if this decomposition should be added to SVG animation as  
>> well.
>> It will "break" existing content, but only in a way that makes things
>> better in the majority of cases. And I doubt there is much content  
>> out
>> there that is animating matrices.
>
> Sorry to be a bit dense... Could you clarify what you mean by  
> "breaking" existing content?

Nothing really breaks, but animations might look slightly different as  
they run. If so, it will probably be better and more like what the  
user expects.

> Is the problem that Dr. Olaf points out that there is mismatch  
> between a matrix animation and the corresponding animation if  
> decomposed into, say, a translate, rotate, and scale?

No. He's saying CSS animations should NOT decompose matrices.

> If so, I do understand his concern, but I would also agree with you  
> (if I understand you correctly) that this allows an author to  
> achieve different effects by using different methods of animation,  
> which may be more desirable than pure mathematical consistency.  If  
> this doesn't prevent authors from achieving their goals in one  
> manner or another (though it may have occasional surprising  
> behavior), then I am not particularly bothered.

I think you're misunderstanding.

Here are some examples:

1.
from - translate(10, 20) scale(5) rotate(100)
to - translate(50, 60) scale(10) rotate(-100)

This will always animate each function separately. This is very easy  
for the author to understand (and write). It also looks good during  
the animation. I would think this is the most common case, especially  
hand authoring. A tool should also be able to keep the transform  
functions separate in the majority of cases.

2.
from - translate(10, 20) scale(5) rotate(100)
to - rotate(-100) scale(10)

This can not be animated separately by function, so you calculate the  
resulting matrix at the from and to stages and animate between those  
two matrices.

3.
from - matrix(a1, b1, c1, d1, e1, f1)
to - matrix(a2, b2, c2, d2, e2, f2)

This is pretty much the same as how 2 ends up.

The problem is that doing linear interpolation of matrix components  
usually looks wrong (and has the really bizarre edge cases I mention  
in the example to www-style). So, in CSS we specify that the matrix  
should be mathematically decomposed into translate, scale, rotation,  
etc matrices and those matrices have their components linearly  
interpolated.

I'm not sure why Dr Olaf thinks this is an implementation convenience.  
It's definitely more work for the engine, but produces much better  
results.

> I appreciate your posting the example... it might be useful and  
> compelling if you could put together some actual running code to  
> illustrate the various differences (preferably something that could  
> be used as a test or as a tutorial later).

This is all implemented in WebKit TOT. You can try it out with a  
nightly build. It's pretty easy to write content that triggers each  
method, if you're willing to do the matrix multiplication yourself :)

Dean

Received on Thursday, 26 March 2009 19:21:15 UTC