Re: [css3-2d-transforms] animation of skewX(), skewY(), skew()

On Wed, Dec 2, 2009 at 5:45 PM, Dean Jackson <dino@apple.com> wrote:
>
> On 03/12/2009, at 6:58 AM, L. David Baron wrote:
>
>> http://dev.w3.org/csswg/css3-2d-transforms/#animation says that an
>> animation of skewX(), skewY(), or skew() is animation in the space
>> of angles.
>>
>> In other words, it says that the midpoint (along the transition
>> function, not necessarily in terms of time) of an animation between
>> skewX(0) and skewX(60deg) is skewX(30deg).
>>
>> I think it would make more sense if the animation of these functions
>> were in the space of the tangent of the angles (which seems like
>> it's a common representation of such transformations, see, e.g.,
>> http://en.wikipedia.org/wiki/Shear_mapping ).  In other words, the
>> midpoint of the animation between skewX(0) and skewX(60deg) should
>> be skewX(40.8934deg), because at this angle any point is transformed
>> to a position halfway between where it would be at skewX(0) and
>> where it would be at skewX(60deg), since atan(tan(60deg)/2) ==
>> 40.8934deg.
>
> Would this make a "linear" animation appear as if it isn't linear (ie. it would look like it slows down or speeds up)? If so, I think it might be confusing.
>
> Suppose you are animating another object with a translation to match the skew end point. With your suggestion it would be extremely hard to have them line up. Bad attempt at ascii art below:
>
>
>    ********
>    ********
>   /-------/
>  /       /
>  /       /
> /-------/
>
> Two objects (one is a skewed box, the other is a rectangle of asterisks). I want to animate the skew back to 0degs, and translate the rectangle at the same time.
>
> Dean

David's proposal would make a non-linear animation appear linear. The
top left corner of your skewed box, for instance, would animate
linearly (with respect to the transition function) from its skewed
position back to 0, matching the rectangle above.

This is probably more useful, but my point above was that this is
typically referred to as a shear, not the skew (specified with an
angle) that the user asked for.

Received on Thursday, 3 December 2009 00:13:41 UTC