Re: Transitions of CSS images, including transitions of gradients.

On Mon, Apr 19, 2010 at 10:56 AM, Simon Fraser <smfr@me.com> wrote:
> We should be able to interpolate linear-gradient() and radial-gradient()
> images by interpolating the colors and color-stops, given some rules
> about when the match closely enough to be interpolatable.

The most basic and simple rule, obviously, is that if the start and
end gradients have the same number of color-stops, then you simply
pair the stops up in order and interpolate their positions and colors
in the established manner.

At the moment I can't think of any more complex rule that would work
in general.  If an author wishes to, say, transition from a 2-stop to
a 3-stop gradient, they can currently hack it by manually upgrading
the 2-stop to a 3-stop, by adding an additional stop that matches
whatever the color would be at the point they want.  (That is, if they
are animating linear-gradient(white,black) to linear-gradient(yellow,
green, blue), they can just change the first one to instead be
linear-gradient(white, #808080, black).)


> We could arbitrarily return the source or destination image, based on
> whether the animation is less or more than 50% complete. However, I
> believe that we can get a lot of new, interesting functionality if we
> add a new functional notation for blending images. This would involve
> extending the definition of <image> to allow for image generation
> functions (of which we have one already, which is CSS gradients). Some
> suggested image generation functions are:
>
>  solid-color(r, g, b, a)
>  cross-fade(<image 1>, <image 2>, 0.4)     // 40% of the way through a cross-fade between image 1 and image 2
>  wipe-right(<image 1>, <image 2>, 0.2)     // 20% of the way through a wipe effect (image 2 moves in from the right)
>  push-top(<image 1>, <image 2>, 50%)       // 50% of the way through a push effect (image 2 pushes image 1 down from the top)
>
> You could also imagine filter effects:
>  sepia(<image>, 80%)
>  guassian-blur(<image>, 10px)
>
> These image generation functions could be used wherever an image is used
> in CSS, and could be returned by getComputedStlye() for images that are
> being animated. Note that CSS transitions would not allow you to
> describe the effect used for image transitions (e.g. wipe vs. cross-fade)
> without further extension, so you'd get back a cross-fade() for now.

I think this is a good idea.  Defining and returning a functional
notation for the cross-fade is the cleanest solution to the problem,
and allows other interesting and cool effects.

The idea of more general filter effects is very interesting, and
something that I want to pursue with SVG collaboration.  Exposing
canned filters in an image-generating function, frex, could be an
awesome thing.


> One issue to resolve is what is the intrinsic size of an image which is
> the result of blending two images of different size. Another is how do
> push and wipe-style transitions of tiled backgrounds appear, when the images
> are of different size.

Not sure about either of these right now.  The simple answer would be
"the larger of each dimension", but that would produce bad visual
effects.

~TJ

Received on Monday, 19 April 2010 18:31:53 UTC