Fwd: [css3-transitions] Interpolating between values from different information sources

On Fri, Sep 24, 2010 at 4:30 PM, Simon Fraser <smfr@me.com> wrote:
> I agree; I'd like to see all linear gradients be interpolatable, which means that the angle forms are just "syntactic sugar", as you say. The common form that underlies the sugar is what I've been referring to as the canonical form.

So, Simon, there's still a question that needs answering which will
inform precisely how I redesign gradients.  I really want to satisfy
your desire for a canonical form, because it makes a lot of sense, but
I need to know how much leeway there is in general.

For example, I can address the vast majority of gradient use-cases
with only two values, which can be combined with appropriate defaults
- a reference line using a keyword to indicate one of the 8
box-cardinal directions (default: left) and an angle relative to that
reference line (default 0).

Is this interpolable?  While you *can* represent all the gradients
between "left 0deg" and "bottom left 0deg" with carefully-crafted
"left Xdeg" gradients, you have to know layout information to do this
(specifically, you have to know the box dimensions so you can figure
out what "left Xdeg" angle is equivalent to "bottom left 0deg").

Alternately, I could complicate the syntax by allowing an explicit
start point and end-point (end point defaults to 180deg rotation of
the start point around the center).  Then the interpolation is simpler
- you can convert "left 0deg" to the canonical form "0 50% 0deg" and
"bottom left 0deg" to the canonical form "0 100% 0deg", then just
interpolate the three numbers.  This provides more power than is
strictly necessary for almost any gradient; is it worth adding just to
make interpolation somewhat more trivial?

Another possibility is to split linear gradients into two functions,
one of which takes an angle and the other takes a point.  That would
solve the issue fairly neatly without complicating the model with extra
power, but (a) the two types of gradients *should* be interpolable, and
(b) I don't think this solution is extendable to radial gradients.  I'd
like radial gradient and linear gradients to be addressed with a similar
solution if at all possible.

Radial gradients need a lot more help.  The radial gradients in webkit
are easy to interpolate between, but almost useless for authors.  You
*desperately need* the ability to auto-size the gradient based on the
box.  I have no clue how to make the different <size> values like
'cover' and 'contain' be interpolable directly, though.  The only
thing I can think of is to define a 3-value syntax (center, horizontal
axis length, vertical axis length) that lets you explicitly express
any elliptical gradient, then say that interpolation first converts
the start and end point into the 3-value syntax and interpolates that
instead.  Is this acceptable?  If not, then radial gradients are just
screwed, as far as I can tell.  You're just stuck with them only being
interpolable when they match in several arguments.

~TJ

Received on Monday, 1 November 2010 17:52:11 UTC