Re: [csswg-drafts] [css-images] Add easing functions to color stops (#1332)

@annejan 
> Since these do not seem to have a time element, is easing the correct name I wonder?

Time doesn't appear in the actual syntax though.

```
linear-gradient(black, cubic-bezier(0.470, 0.000, 0.745, 0.715), white)
```

As people are already familiar with easing functions from CSS Animation, they should find it easy to apply the same concept here. Yes, it is a function wrt distance along the gradient, not wrt time. But the 2D graphs of the functions, and tutorials & tools that let you design these visually, will be similar enough that people will, I believe, find the analogous behavior more of a help than a hindrance.

@tabatkins 
>  I'd like to see how far people can take just the mid-point approach first.

In theory, a cubic bezier smoothing function between stops S1 and S2 can be closely approximated with mid-points as follows:

1. Calculate a new color stop S3 corresponding to the inflexion point of the bezier. The stops are now S1 S3 S2
2. Calculate a mid point for S1 to S3, giving the first half of the bezier
3. Calculate a mid point for S3 to S2, giving the second half of the bezier
4. Adjust the values from steps 2. and 3. until the rate of change of slope at the inflexion point is te same on both halves (second order curve continuity).

So, if they are familiar enough with the math, content creators can _do the work_. The same argument can be used for why mid points are not needed - _just simply add_ four to seven additional calculated intermediate stops to approximate the result by curve tessellation.

The benefit of the proposed syntax, in both cases, is that it is simpler, more intuitive, and avoids doing some side calculations, and avoids having extra WET color stops whose value depends in complex ways on the value of other stops, and means that animating the color stops is simpler and easier (because animating the extra, derived color stops so as to maintain the curve shape is a pain in the ass). 

In other words, far more content developers will be able to use it, and get the results they expect, and their CSS will be shorter, DRY, more readable, and more maintainable.


-- 
GitHub Notification of comment by svgeesus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1332#issuecomment-483233851 using your GitHub account

Received on Monday, 15 April 2019 12:36:41 UTC