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

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

Received on Wednesday, 2 December 2009 23:45:51 UTC