Re: [css-images] cross-fade() interpolation and syntax

On Sat, Aug 17, 2013 at 3:06 PM, Dirk Schulze <dschulze@adobe.com> wrote:
> On Aug 17, 2013, at 8:01 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>> I think there are good arguments for the current grammar.  For one,
>> the old grammar only allowed fading to a color by using "image(color)"
>> to generate a solid-color image.  That's bad, because the size of the
>> color-image is the image positioning area, which is probably different
>> from the size of the source image, which would cause an annoying size
>> change as you interpolated.  I think this is an important use-case so
>> people can fade to "transparent" to simply "fade out" an image.  The
>> new syntax's ability to take a color directly solves this by not
>> changing the size of the source image.
>
> A solution for that could be the syntax of 'fill' and 'stroke'. The current syntax seems just to support interpolation from image to color, but not color to image.
>
> Something like cross-fade(<image> <color>?, <image> <color>?, <percentage> | <number>) would be more powerful.

Note that the color isn't a fallback, it's an alternative way to
specify an "image".  But yes, I suppose I'd be okay with extending it
like that.  If we did extend cross-fade to accept an arbitrary number
of fading images, we'd have to do this anyway.

>> The new grammar's defaulting behavior also makes that "fade out"
>> behavior trivial - you just leave off the second argument.  That seems
>> pretty useful.
>
> But what about fade in?

That's the exact same thing.  I didn't mean to imply a direction, just
that it lets you "fade" an image easily, as if you were just animating
opacity on it.

>> Finally, the new grammar is extensible to fading between more than two
>> images - we can just change the grammar to:
>>
>> cross-fade( [<percentage>? <image>]# [, <image> | <color> ]? )
>
> Well, you could simple nest them.

Nesting isn't so simple.  ^_^  It's ugly and hard to read, and harder
to understand, because the percentages don't work at the same level -
each gets multiplied by the outer percentage.

That is, this:

    cross-fade(33% foo, cross-fade(33% bar, baz))

is *not* equal to:

    cross-fade(33% foo, 33% bar, baz)

Instead, it's equal to:

    cross-fade(33% foo, 17% bar, baz) (approximately)

>> However, we could change it so that when interpolating two
>> cross-fade()s, you interpolate the percentage *and* each source image.
>> This would have identical behavior for the case the spec already
>> covers, but would also opt your example into fancy interpolation as
>> well.
>
> I wouldn't fight for the fancy animation :)

Alternative - rather than do nested interpolation, we could add the
variadic cross-fade() right now, and change the interpolation
semantics to just munge all the arguments together, adjusting
percentages as appropriate, cutting the percentages from each of the
inputs in half.

That is, when interpolating from "cross-fade(25% foo, bar)" to
"cross-fade(30% baz, qux)", you interpolation would be:

    cross-fade([25% to 0%] foo, [75% to 0%] bar, [0% to 30%] baz, qux)
 (qux implicitly goes from [0% to 70%])

This solves the cross-fade() problem (and, somewhat more importantly,
solves the "interrupt an image transition by transitioning to another
image" problem in a nice way, similar to what we can do for lengths
and other things).

~TJ

Received on Monday, 19 August 2013 18:10:18 UTC