Skip to content

Commit

Permalink
[css-easing-2] Ohhh, *that's* what the before flag does. Literally un…
Browse files Browse the repository at this point in the history
…explained anywhere.
  • Loading branch information
tabatkins committed Sep 12, 2024
1 parent fde5f1b commit e43d626
Showing 1 changed file with 32 additions and 35 deletions.
67 changes: 32 additions & 35 deletions css-easing-2/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ an [=input progress value=] and produces an [=output progress value=].
An [=easing function=] must be a pure function meaning that for a given set of
inputs, it always produces the same [=output progress value=].

The <dfn>input progress value</dfn> is a real number in the range [-&infin;,
The <dfn export for="easing function">input progress value</dfn> is a real number in the range [-&infin;,
&infin;].
Typically, the [=input progress value=] is in the range [0, 1] but this may
not be the case when [=easing functions=] are chained together.
Expand All @@ -154,7 +154,7 @@ may be outside the range [0, 1].

</div>

The <dfn>output progress value</dfn> is a real number in the
The <dfn export for="easing function">output progress value</dfn> is a real number in the
range [-&infin;, &infin;].

Note: While CSS numbers have a theoretically infinite range
Expand All @@ -164,18 +164,18 @@ If easing functions are used outside of the CSS context,
care must be taken to either correctly handle potential infinities,
or clamp the [=output progress value=].

Some types of easing functions also take an additional boolean <dfn export for="easing function">before flag</dfn>,
which is defined subsequently.
Some types of easing functions
also take an additional boolean <dfn export for="easing function">before flag</dfn>,
which indicates the easing has not yet started,
or is going in reverse and is past the finish.

This specification defines four types of easing functions whose definitions
follow.
This specification defines several types of easing functions:

The syntax for specifying an [=easing function=] is as follows:

<div class="prod"><dfn type>&lt;easing-function&gt;</dfn> =
<<linear-easing-function>> |
<<cubic-bezier-easing-function>> |
<<step-easing-function>></div>
<pre class="prod">
<dfn>&lt;easing-function&gt;</dfn> = <<linear-easing-function>>
| <<cubic-bezier-easing-function>>
| <<step-easing-function>>
</pre>

<wpt>
timing-functions-syntax-computed.html
Expand Down Expand Up @@ -349,15 +349,16 @@ Output</h4>
return the [=output progress value=]
of that item.

3. If at least one of |points| has an [=input progress value=]
matching |inputProgress|:
3. If |inputProgress| matches the [=input progress value=]
of the first point in |points|,
and the [=before flag=] is true,
return the first point's [=output progress value=].

* If the [=before flag=] is true,
return the [=output progress value=] of the first such point.
* Otherwise,
return the [=output progress value=] of the last such point.
4. If |inputProgress| matches the [=input progress value=]
of at least one point in |points|,
return the [=output progress value=] of the last such point.

4. Otherwise, find two [=linear()/control points=],
5. Otherwise, find two [=linear()/control points=] in |points|,
|A| and |B|,
which will be used for interpolation:

Expand All @@ -378,7 +379,7 @@ Output</h4>
and let |B| be the first [=linear()/control point=]
whose [=input progress value=] is larger than |inputProgress|.

5. Linearly interpolate (or extrapolate) |inputProgress|
6. Linearly interpolate (or extrapolate) |inputProgress|
along the line defined by |A| and |B|,
and return the result.
</div>
Expand Down Expand Up @@ -830,32 +831,28 @@ Output</h4>
perform the following.
It returns an [=output progress value=].

1. Let |steps| be |func|'s [=steps()/steps=],
1. If the [=before flag=] is true, return 0.

2. Let |steps| be |func|'s [=steps()/steps=],
and |position| be |func|'s [=steps()/step position=].

2. Divide the interval [-&infin;, &infin;] into several segments,
3. Divide the interval [-&infin;, &infin;] into several segments,
each with an associated value,
as follows:

1. [-&infin;, 0] has the value 0.
2. [1, &infin;] has the value 1.
2. (1, &infin;] has the value 1.
3. [0, 1] is divided into |steps| intervals,
[0, ...) to [..., 1)
with their values assigned as defined for the |position|
(see <<step-position>>).

Note: All intervals are inclusive,
so some values are part of two intervals at once.

3. If |inputProgress| is in a single interval,
return the associated value for that interval.

4. Otherwise, |inputProgress| is in two intervals,
with two associated values
(which might be the same).
Note: In other words,
at the boundary between intervals,
the associated value is the higher value.

If the [=before flag=] is true,
return the smaller associated value;
otherwise, return the larger associated value.
4. Return the associated value
for the interval that |inputProgress| is in.
</div>

<div class=example>
Expand Down

0 comments on commit e43d626

Please sign in to comment.