[csswg-drafts] [css-easing] The `midpoint` easing function (#3935)

danburzo has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-easing] The `midpoint` easing function ==
Insofar as easing functions make it into the CSS gradient syntax, I would like to propose a new easing function, tentatively called `midpoint(x)`, for smooth interpolation between color stops, without the drawbacks of the _interpolation hints_ syntax.

1. In the [`css-images-4` spec](https://drafts.csswg.org/css-images-4/#color-stop-fixup), interpolation hints [seem to affect how color stops are positioned](https://github.com/w3c/csswg-drafts/issues/3931), and at least current browser interpretations adhere to that reading of the spec.
2. The proposal to [add easing functions to gradients](https://github.com/w3c/csswg-drafts/issues/1332) (in particular, the syntax analogous to adding hints between color stops) promises to disentangle the interpolation functions from color stop position computations.

To enable authors to obtain an intuitive effect from interpolation hints without the drawbacks outlined in (1) and without retroactively redefining the behavior of interpolation hints, we can piggy-back on the easings proposal (2) to present authors with similar functionality.

The `midpoint` easing function takes a single argument `x ∈ [0, 1]` that controls the relative position of the midpoint between the two color stops `A` and `B`. The resulting color is computed (by following the interpolation hint definition) as follows:

1. if `x = 0`, return color B for any point between the two color stops (equivalent to `step-start`)
2. if `x = 1`, return color A for any point between the two color stops (equivalent to `step-end`)
3. if `x ∈ (0, 1)`:
    1. compute the position `t ∈ [0, 1]` of the point, relative to the two color stops
    2. obtain the weighting between color stops <strong>C = t<sup>log<sub>x</sub>(.5)</sup></strong>
    3. the color at the point is then a linear blend between the colors of the two color stops, blending (1 - C) of the first stop and C of the second stop. 

These two definitions are equivalent:

```css
linear-gradient: (to right, red, 25%, green);
linear-gradient: (to right, red, midpoint(0.25), green);
```

I have opted for `x ∈ [0, 1]` instead of `x ∈ [0%, 100%]` to make it clear that the value is local to the easing function, and not a position along the gradient line.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3935 using your GitHub account

Received on Wednesday, 15 May 2019 11:15:53 UTC