[filter-effects] A proposal of the definition of the distance between two filter function lists #91
Description
https://w3c.github.io/web-animations/#paced-keyframe-spacing-mode
https://drafts.fxtf.org/filters/#interpolation-of-filters
This is related to the issue: w3c/csswg-drafts/issues/662.
In web-animations (@birtles), we need to calculate the distance between two filter function lists for paced spacing. Unfortunately, we don't have a definition of the distance between two filter function lists in [filter-effects], so I propose a way to calculate (which is very similar to the interpolation):
Compute Distance of <filter-function-list>s
- If both filters have a <filter-function-list> of same length without <url> and for each <filter-function> for which there is a corresponding item in each list,
- Compute the square distance of each <filter-function> pair following the rules in section Square Distance of <filter-function>s, and get the square root of the summation.
- If both filters have a <filter-function-list> of different length without <url> and for each <filter-function> for which there is a corresponding item in each list,
- Append the missing equivalent <filter-function>s from the longer list to the end of the shorter list.
The new added <filter-function>s must be initialized to their default values. - Compute the square distance of each <filter-function> pair following the rules in section Square Distance of <filter-function>s, and get the square root of the summation.
- Append the missing equivalent <filter-function>s from the longer list to the end of the shorter list.
- If one filter is none and the other is a <filter-function-list> without <url>
- Replace none with the corresponding of the other filter.
The new <filter-function>s must be initialized to their default values. - Compute the square distance of each <filter-function> pair following the rules in section Square Distance of <filter-function>s, and get the square root of their summation.
- Replace none with the corresponding of the other filter.
- Otherwise
- Cannot compute the distance, so return 0.0.
Square Distance of <filter-function>s
- <blur()>
- Get the absolute difference and then square it.
- <brightness()>
- <contrast()>
- <grayscale()>
- <invert()>
- <opacity()>
- <saturate()>
- <sepia()>
- Convert percentage values to numbers with 0% being relative to 0 and 100% relative to 1. Get the absolute difference and then square it
- <hue-rotate()>
- Get the absolute difference (unit: Radian), and the square it.
- <drop-shadow()>
- Compute the distance as <shadow list>s. (Note: we only support one shadow item).
- Compute the square distances of <x-offset>, <y-offset>, and <blur radius>.
- Compute the square distance of <color>
- Sum the above square distances.
- Compute the distance as <shadow list>s. (Note: we only support one shadow item).
Example
from { filter: 'grayscale(50%) opacity(100%) blur(5px) drop-shadow(10px 10px 1px blue)' }
to { filter: 'grayscale(75%) opacity(50%)' }
- The square distance of grayscale:
(0.75 - 0.5)^2 - The square distance of opacity:
(1 - 0.5)^2 - The square distance of blur:
(5 - 0)^2 - The square distance of drop-shadow:
10^2 + 10^2 + 1^2 + (1^2 + 1^2)
Note: blue is (0, 0, 100%, 100%), transparent is (0%, 0%, 0%, 0%) - The distance is
sqrt(the summation of the above square distances)