You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
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.
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.
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.
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)
The text was updated successfully, but these errors were encountered:
@birtles Could you please take a look at the proposal as well before the WG needs to look at it? Note, we have spec text for addition and accumulation of filter function lists but we indeed have no specific spec text for distances on paced animations.
I'm sorry for taking so long to look at this. Distance is no longer a concept in Web Animations since we dropped paced animations.
We still implement it in Gecko but it's only used for generating graphs in DevTools and for SMIL support. Unless the CSSWG intends to define this for SMIL, I suggest this can be closed.
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
The new added <filter-function>s must be initialized to their default values.
The new <filter-function>s must be initialized to their default values.
Square Distance of <filter-function>s
Example
from { filter: 'grayscale(50%) opacity(100%) blur(5px) drop-shadow(10px 10px 1px blue)' }
to { filter: 'grayscale(75%) opacity(50%)' }
(0.75 - 0.5)^2
(1 - 0.5)^2
(5 - 0)^2
10^2 + 10^2 + 1^2 + (1^2 + 1^2)
Note: blue is (0, 0, 100%, 100%), transparent is (0%, 0%, 0%, 0%)
sqrt(the summation of the above square distances)
The text was updated successfully, but these errors were encountered: