Skip to content

Commit

Permalink
[css-easing-2][editorial] Some markup nits, and add a graph to linear…
Browse files Browse the repository at this point in the history 
… like the others have.
  • Loading branch information
@tabatkins
tabatkins committed Sep 10, 2024
1 parent 9e96e70 commit a8f5f8c
Show file tree
Hide file tree
Showing 2 changed files with 189 additions and 27 deletions.
93 changes: 66 additions & 27 deletions css-easing-2/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,19 @@ The syntax for specifying an [=easing function=] is as follows:
timing-functions-syntax-valid.html
</wpt>

## Linear Easing Functions: ''linear'', ''linear()'' ## {#the-linear-easing-function}
<!-- Big Text: linear

█▌ ████ █ █▌ █████▌ ███▌ ████▌
█▌ ▐▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌
█▌ ▐▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌
█▌ ▐▌ █▌▐█ █▌ ████ █▌ █▌ ████▌
█▌ ▐▌ █▌ ██▌ █▌ █████▌ █▌▐█
█▌ ▐▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
█████ ████ █▌ ▐▌ █████▌ █▌ █▌ █▌ █▌
-->

<h3 id=the-linear-easing-function>
Linear Easing Functions: ''linear'', ''linear()''</h3>

A <dfn export>linear easing function</dfn>
is an [=easing function=]
Expand All @@ -145,8 +157,16 @@ is a pair of numbers,
associating an [=input progress value=]
to an [=output progress value=].


### Syntax ### {#linear-easing-function-syntax}
<figure>
<img class="easing-graph" src="images/linear-easing-curve.svg" width="535" height="510"
alt="A linear curve used as an easing function.">
<figcaption>
''linear(0, .1 25%, .75 50%, 1)''<br>
The shape of the curve follows the [=control points=].<br>
Input progress values serve as <var>x</var> values of the curve,
whilst the <var>y</var> values are the output progress values.
</figcaption>
</figure>

A [=linear easing function=] has the following syntax:

Expand Down Expand Up @@ -215,7 +235,8 @@ A [=linear easing function=] has the following syntax:
</div>


### Serializing ### {#linear-easing-function-serializing}
<h4 id=linear-easing-function-serializing>
Serializing</h4>

<div algorithm>
To <dfn export>serialize a linear() function</dfn>:
Expand Down Expand Up @@ -259,7 +280,8 @@ A [=linear easing function=] has the following syntax:
</div>


### Output of a linear easing function ### {#linear-easing-function-output}
<h4 id=linear-easing-function-output>
Output</h4>

<section algorithm="to calculate linear easing output progress">

Expand Down Expand Up @@ -304,7 +326,8 @@ It returns an [=output progress value=].
</wpt>
</section>

### Examples ### {#linear-easing-function-examples}
<h4 id=linear-easing-function-examples>
Examples</h4>

<div class=example>
''linear()'' allows the definition of easing functions that interpolate linearly between a set of points.
Expand All @@ -317,6 +340,7 @@ It returns an [=output progress value=].
alt="linear(0, 0.25, 1) plotted on a graph">
</figure>
</div>

<div class=example>
By default, values are spread evenly between entries that don't have an explicit "input".
Input values can be provided using a <<percentage>>.
Expand All @@ -334,6 +358,7 @@ It returns an [=output progress value=].
The third is at 1,1.">
</figure>
</div>

<div class=example>
If two input values are provided for a single output,
it results in two points with the same output.
Expand All @@ -352,6 +377,7 @@ It returns an [=output progress value=].
The forth is at 1,1.">
</figure>
</div>

<div class=example>
If the input is outside the range provided,
the trajectory of the nearest two points is continued.
Expand All @@ -369,6 +395,7 @@ It returns an [=output progress value=].
The ends of the graph are extended at the angle of the nearest two lines.">
</figure>
</div>

<div class=example>
A typical use of ''linear()'' is to provide many points to create the illusion of a curve.

Expand Down Expand Up @@ -405,28 +432,26 @@ It returns an [=output progress value=].
which may be needed for slower animations.
</div>

<h3 id=the-linear-easing-keyword oldids=linear-timing-function-section>The linear easing keyword: ''linear''</h3>

The <dfn dfn-type=value for="<easing-function>">linear</dfn> keyword
produces an identity [=linear easing function=]
whose [=output progress value=] is equal to the
[=input progress value=] for all inputs.

This gives the same result as ''linear(0, 1)''.
<!-- Big Text: bezier

Note: Although this produces a [=linear easing function=],
uses of the keyword ''linear'' always serialize as-is, to ''linear''.
Whereas the function equivalent ''linear(0, 1)'' will serialize to ''linear(0 0%, 1 100%)''.
These rules are in [Serialization](#serialization).
████▌ █████▌ █████▌ ████ █████▌ ████▌
█▌ █▌ █▌ ▐▌ ▐▌ █▌ █▌ █▌
█▌ █▌ █▌ ▐▌ ▐▌ █▌ █▌ █▌
█████ ████ █▌ ▐▌ ████ ████▌
█▌ █▌ █▌ █ ▐▌ █▌ █▌▐█
█▌ █▌ █▌ █ ▐▌ █▌ █▌ ▐█
████▌ █████▌ █████▌ ████ █████▌ █▌ █▌
-->

<h3 id=cubic-bezier-easing-functions oldids=cubic-bezier-timing-functions>Cubic
B&eacute;zier easing functions:
Bézier easing functions:
''ease'', ''ease-in'', ''ease-out'', ''ease-in-out'', ''cubic-bezier()''</h3>

A <dfn export>cubic B&eacute;zier easing function</dfn> is
A <dfn export>cubic Bézier easing function</dfn> is
a type of [=easing function=] defined by four real numbers
that specify the two control points,
<var>P1</var> and <var>P2</var>, of a cubic B&eacute;zier curve whose
<var>P1</var> and <var>P2</var>, of a cubic Bézier curve whose
end points <var ignore>P0</var> and <var ignore>P3</var>
are fixed at (0, 0) and (1, 1) respectively.
The <var>x</var> coordinates of <var>P1</var> and <var>P2</var>
Expand All @@ -436,15 +461,15 @@ are restricted to the range [0, 1].
<img class="easing-graph" src="images/cubic-bezier-easing-curve.svg" width="535" height="510"
alt="A cubic Bezier curve used as an easing function.">
<figcaption>
A cubic B&eacute;zier curve used as an easing function.<br>
A cubic Bézier curve used as an easing function.<br>
The shape of the curve is determined by the location of the control
points <var>P1</var> and <var>P2</var>.<br>
Input progress values serve as <var>x</var> values of the curve,
whilst the <var>y</var> values are the output progress values.
</figcaption>
</figure>

A <a>cubic B&eacute;zier easing function</a> has the following syntax
A <a>cubic Bézier easing function</a> has the following syntax
(using notation from [[!CSS-VALUES-3]]):

<div class="prod"><dfn type>&lt;cubic-bezier-easing-function&gt;</dfn> =
Expand All @@ -466,7 +491,7 @@ The meaning of each value is as follows:
: <dfn>ease-in-out</dfn>
:: Equivalent to ''cubic-bezier(0.42, 0, 0.58, 1)''.
: <dt><dfn function lt="cubic-bezier()">cubic-bezier(<<number [0,1]>>, <<number>>, <<number [0,1]>>, <<number>>)</dfn></dt>
:: Specifies a <a>cubic B&eacute;zier easing function</a>.
:: Specifies a <a>cubic Bézier easing function</a>.
The four numbers specify points <var>P1</var> and <var>P2</var> of
the curve as (<var ignore>x1</var>, <var ignore>y1</var>, <var
ignore>x2</var>, <var ignore>y2</var>).
Expand All @@ -481,12 +506,14 @@ The keyword values listed above are illustrated below.
<img class="easing-graph" src="images/curve-keywords.svg" width="500"
alt="The easing functions produced by keyword values.">
<figcaption>
The easing functions produced by each of the cubic B&eacute;zier easing
The easing functions produced by each of the cubic Bézier easing
function keyword values.
</figcaption>
</figure>

### Output of a cubic b&eacute;zier easing function ### {#cubic-bezier-algo}

<h4 id=cubic-bezier-algo>
Output</h4>

The mapping from input progress to output progress is performed by
determining the corresponding <var>y</var> value ([=output progress value=]) for
Expand Down Expand Up @@ -523,6 +550,18 @@ infinitely using tangent of the curve at the closest endpoint as follows:
cubic-bezier-timing-functions-output.html
</wpt>


<!-- Big Text: steps

███▌ █████▌ █████▌ ████▌ ███▌
█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
█▌ █▌ █▌ █▌ █▌ █▌
███▌ █▌ ████ ████▌ ███▌
█▌ █▌ █▌ █▌ █▌
█▌ █▌ █▌ █▌ █▌ █▌ █▌
███▌ █▌ █████▌ █▌ ███▌
-->

<h3 id=step-easing-functions oldids=step-timing-functions>Step easing functions:
''step-start'', ''step-end'', ''steps()''</h3>

Expand Down Expand Up @@ -605,8 +644,8 @@ The meaning of each value is as follows:

</dl>

<h4 id=step-easing-algo oldids=step-timing-function-algo>Output of
a step easing function</h4>
<h4 id=step-easing-algo oldids=step-timing-function-algo>
Output</h4>

At the exact point where a step occurs, the result of the function is
conceptually the top of the step. However, an additional <dfn>before flag</dfn>
Expand Down
123 changes: 123 additions & 0 deletions css-easing-2/images/linear-easing-curve.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a8f5f8c

Please sign in to comment.