Re: transform animation and decomposition

Hi, Dean-

Thanks for holding my hand.  I think I follow you now.

Regards-
-Doug

Dean Jackson wrote (on 3/26/09 3:20 PM):
>
> 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:32:10 UTC