diff --git a/css-easing-1/Overview.bs b/css-easing-1/Overview.bs index a196ea3d5bf6..76eba3bde5fe 100644 --- a/css-easing-1/Overview.bs +++ b/css-easing-1/Overview.bs @@ -125,16 +125,126 @@ The syntax for specifying an [=easing function=] is as follows: <<step-easing-function>></div> -<h3 id=the-linear-easing-function oldids=linear-timing-function-section>The linear easing function: ''linear''</h3> +<h3 id=the-linear-easing-function oldids=linear-timing-function-section>The linear easing function: ''linear()''</h3> -The <dfn export lt="linear easing function|linear timing function">linear easing -function</dfn> is an identity function -meaning that its [=output progress value=] is equal to the -[=input progress value=] for all inputs. +A <dfn export lt="linear easing function|linear timing function">linear easing function</dfn> +is an easing function +that interpolates linearly +between its [=linear easing function/points=]. -The syntax for the [=linear easing function=] is simply the -<dfn dfn-type=value for=easing-function>linear</dfn> keyword. +A [=linear easing function=] has <dfn for="linear easing function">points</dfn>, +a [=/list=] of [=linear easing points=]. +Initially a new empty [=/list=]. +A <dfn>linear easing point</dfn> +is a [=/struct=] +that has: + +<dl dfn-for="linear easing point"> + +: <dfn>input</dfn> +:: A number or null + + Note: The [=linear easing point/input=] is only null during the [=create a linear easing function=] algorithm. + +: <dfn>output</dfn> +:: A number + + +</dl> + +<section algorithm="to calculate linear output progress"> + +To <dfn export>calculate linear output progress</dfn> +for a given [=linear easing function=] |linearEasingFunction|, +and an [=input progress value=] |inputProgress|, +perform the following. +It returns an [=output progress value=]. + +1. If |linearEasingFunction|'s [=linear easing function/points=] [=list/is empty=], + then return |inputProgress|. + +1. If |linearEasingFunction|'s [=linear easing function/points=] [=list/size=] is 1, + then return |linearEasingFunction|'s [=linear easing function/points=][0]'s [=linear easing point/output=]. + +1. Plot |linearEasingFunction|'s [=linear easing function/points=] points on a graph + using [=linear easing point/input=] as the x-axis + and [=linear easing point/output=] as the y-axis. + +1. Interpolate the points linearly. + +1. Extend the ends of the graph to infinity using the final angle of the line at either end. + If the line starts/ends with two points of the same position, the line should extend along the x-axis. + +1. Return the y-axis value corresponding to the x-axis value of |inputProgress|. + +</section> + +<dfn function lt="linear()">linear(<<linear-stop-list>>)</dfn> + +<pre class="prod"> + <dfn><linear-stop-list></dfn> = [ <<linear-stop>> ]# + <dfn><linear-stop></dfn> = <<number>> && <<linear-stop-length>>? + <dfn><linear-stop-length></dfn> = <<percentage>>{1,2} +</pre> + +<section algorithm="to create a linear easing function"> + +To <dfn>create a linear easing function</dfn> +from a <<linear-stop-list>> |stopList|, +perform the following. +It returns a [=linear easing function=]. + +1. Let |function| be a new [=linear easing function=]. + +1. Let |largestInput| be negative infinity. + +1. For each |stop| in |stopList|: + + 1. Let |point| be a new [=linear easing point=]. + + 1. [=list/Append=] |point| to |function|'s [=linear easing function/points=]. + + 1. Set |point|'s [=linear easing point/output=] to |stop|'s <<number>>. + + 1. If |stop| has a <<linear-stop-length>>, then: + + 1. Set |point|'s [=linear easing point/input=] to whichever is greater: + |stop|'s <<linear-stop-length>>'s first <<percentage>> as a number, + or |largestInput|. + + 1. Set |largestInput| to |point|'s [=linear easing point/input=]. + + 1. If |stop|'s <<linear-stop-length>> has a second <<percentage>>, then: + + 1. Let |extraPoint| be a new [=linear easing point=]. + + 1. [=list/Append=] |extraPoint| to |function|'s [=linear easing function/points=]. + + 1. Set |extraPoint|'s [=linear easing point/output=] to |stop|'s <<number>>. + + 1. Set |extraPoint|'s [=linear easing point/input=] to whichever is greater: + |stop|'s <<linear-stop-length>>'s second <<percentage>> as a number, + or |largestInput|. + + 1. Set |largestInput| to |extraPoint|'s [=linear easing point/input=]. + + 1. Otherwise, if |stop| is the first [=list/item=] in |stopList|, + then set |point|'s [=linear easing point/input=] to 0. + + 1. Otherwise, if |stop| is the last [=list/item=] in |stopList|, + then set |point|'s [=linear easing point/input=] to 1. + +1. For runs of [=list/items=] in |function|'s [=linear easing function/points=] that have a null [=linear easing point/input=], + assign a number to the [=linear easing point/input=] by linearly interpolating between the previous and next [=linear easing function/points=] that have a non-null [=linear easing point/input=]. + +1. Return |function|. + +</section> + +<h3 id="the-linear-easing-keyword">The linear easing keyword: ''linear''</h3> + +The <dfn dfn-type=value for=easing-function>linear</dfn> keyword is equivalent to ''linear()''. <h3 id=cubic-bezier-easing-functions oldids=cubic-bezier-timing-functions>Cubic Bézier easing functions: