From 69798472ba79646abeeee4c237a6ea13a0d150c5 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Fri, 20 Aug 2021 15:58:09 +0100 Subject: [PATCH 1/5] Sketching some ideas --- css-easing-1/Overview.bs | 60 +++++++++++++++++++++++++++++++++++----- 1 file changed, 53 insertions(+), 7 deletions(-) diff --git a/css-easing-1/Overview.bs b/css-easing-1/Overview.bs index a196ea3d5bf6..7eb65638725c 100644 --- a/css-easing-1/Overview.bs +++ b/css-easing-1/Overview.bs @@ -125,16 +125,62 @@ The syntax for specifying an [=easing function=] is as follows: <> -

The linear easing function: ''linear''

+

The linear easing function: ''linear()''

-The linear easing -function is an identity function -meaning that its [=output progress value=] is equal to the -[=input progress value=] for all inputs. +A linear easing +function is an easing function that interpolates linearly between its [=linear easing function/points=]. -The syntax for the [=linear easing function=] is simply the -linear keyword. +A [=linear easing function=] has points, a [=/list=] of [=linear easing points=]. Initially a new empty [=/list=]. +A linear easing point is a [=/struct=] that has: + +
+ +: position +:: A number +: value +:: A number + +
+ +
+ +To calculate linear output progress for a given [=linear easing function=] |linearEasingFunction|, and an [=input progress value=] |inputProgress|, perform the following steps. They return an [=output progress value=]. + +1. If |linearEasingFunction|'s [=linear easing function/points=] [=list/is empty=], the return |inputProgress|. + + Note: This is a special case that creates a pure identity function. + +1. Let |previousPoint| be null. + +1. Let |nextPoint| be null. + +1. [=list/For each=] |point| of |linearEasingFunction|'s [=linear easing function/points=]: + + 1. If |point|'s [=linear easing point/position=] is less than or equal to |inputProgress|, set |previousPoint| to |point|. + + 1. Otherwise, set |nextPoint| to |point| and [=break=]. + +1. If |previousPoint| is null, then return |nextPoint|'s [=linear easing point/value=]. + +1. If |nextPoint| is null, then return |previousPoint|'s [=linear easing point/value=]. + +1. Let |progressBetweenPoints| be (|inputProgress| - |previousPoint|'s [=linear easing point/position=]) / (|nextPoint|'s [=linear easing point/position=] - |previousPoint|'s [=linear easing point/position=]). + +1. Return |previousPoint|'s [=linear easing point/value=] + |progressBetweenPoints| * (|nextPoint|'s [=linear easing point/value=] - |previousPoint|'s [=linear easing point/value=]). + +
+ +linear(<>) + +
+  <linear-stop-list> = [ <> ]#
+  <linear-stop> = <> && <>?
+
+ +

The linear easing keyword: ''linear''

+ +The linear keyword is equivalent to ''linear()''.

Cubic Bézier easing functions: From 654008fa637f82109078898b26d62aa034c54b31 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Mon, 23 Aug 2021 08:39:10 +0100 Subject: [PATCH 2/5] Updating following feedback --- css-easing-1/Overview.bs | 36 +++++++++++++++--------------------- 1 file changed, 15 insertions(+), 21 deletions(-) diff --git a/css-easing-1/Overview.bs b/css-easing-1/Overview.bs index 7eb65638725c..24e5fb9c353a 100644 --- a/css-easing-1/Overview.bs +++ b/css-easing-1/Overview.bs @@ -136,48 +136,42 @@ A linear easing point is a [=/struct=] that has:
-: position +: input :: A number -: value +: output :: A number
-To calculate linear output progress for a given [=linear easing function=] |linearEasingFunction|, and an [=input progress value=] |inputProgress|, perform the following steps. They return an [=output progress value=]. +To calculate linear output progress 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=], the return |inputProgress|. +1. If |linearEasingFunction|'s [=linear easing function/points=] [=list/is empty=], then return |inputProgress|. - Note: This is a special case that creates a pure identity function. +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. Let |previousPoint| be null. +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. Let |nextPoint| be null. +1. Interpolate the points linearly. -1. [=list/For each=] |point| of |linearEasingFunction|'s [=linear easing function/points=]: +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. If |point|'s [=linear easing point/position=] is less than or equal to |inputProgress|, set |previousPoint| to |point|. - - 1. Otherwise, set |nextPoint| to |point| and [=break=]. - -1. If |previousPoint| is null, then return |nextPoint|'s [=linear easing point/value=]. - -1. If |nextPoint| is null, then return |previousPoint|'s [=linear easing point/value=]. - -1. Let |progressBetweenPoints| be (|inputProgress| - |previousPoint|'s [=linear easing point/position=]) / (|nextPoint|'s [=linear easing point/position=] - |previousPoint|'s [=linear easing point/position=]). - -1. Return |previousPoint|'s [=linear easing point/value=] + |progressBetweenPoints| * (|nextPoint|'s [=linear easing point/value=] - |previousPoint|'s [=linear easing point/value=]). +1. Return the y-axis value corresponding to the x-axis value of |inputProgress|.
linear(<>) 
-  <linear-stop-list> = [ <> ]#
-  <linear-stop> = <> && <>?
+  <linear-stop-list> =
+    [ <>? , <> ]#
+  <linear-stop> = <> && <>?
+  <linear-hint> = <>
+TODO: I want to support syntax like linear(0 0% 0%, 1 100% 100%), but I can't figure out how it's done. linear-gradient seems to support that syntax but I can't see it in the grammar. +

The linear easing keyword: ''linear''

The linear keyword is equivalent to ''linear()''. From 0bde5c99285ffc01a25374a63675c6c60942f945 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Mon, 23 Aug 2021 09:14:20 +0100 Subject: [PATCH 3/5] Attempting semantic line breaks --- css-easing-1/Overview.bs | 37 ++++++++++++++++++++++++++----------- 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/css-easing-1/Overview.bs b/css-easing-1/Overview.bs index 24e5fb9c353a..c9767eb4a401 100644 --- a/css-easing-1/Overview.bs +++ b/css-easing-1/Overview.bs @@ -127,12 +127,18 @@ The syntax for specifying an [=easing function=] is as follows:

The linear easing function: ''linear()''

-A linear easing -function is an easing function that interpolates linearly between its [=linear easing function/points=]. +A linear easing function +is an easing function +that interpolates linearly +between its [=linear easing function/points=]. -A [=linear easing function=] has points, a [=/list=] of [=linear easing points=]. Initially a new empty [=/list=]. +A [=linear easing function=] has points, +a [=/list=] of [=linear easing points=]. +Initially a new empty [=/list=]. -A linear easing point is a [=/struct=] that has: +A linear easing point +is a [=/struct=] +that has:
@@ -145,17 +151,26 @@ A linear easing point is a [=/struct=] that has:
-To calculate linear output progress for a given [=linear easing function=] |linearEasingFunction|, and an [=input progress value=] |inputProgress|, perform the following. It returns an [=output progress value=]. +To calculate linear output progress +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/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. 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. 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. 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|. @@ -166,8 +181,8 @@ To calculate linear output progress for a given [=linear easin 
   <linear-stop-list> =
     [ <>? , <> ]#
-  <linear-stop> = <> && <>?
-  <linear-hint> = <>
+  <linear-stop> = <> && <>?
+  <linear-hint> = <>
TODO: I want to support syntax like linear(0 0% 0%, 1 100% 100%), but I can't figure out how it's done. linear-gradient seems to support that syntax but I can't see it in the grammar. From f53a1b7a1157f7b6e0f922a87ae5cc58282b8326 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Tue, 24 Aug 2021 13:30:13 +0100 Subject: [PATCH 4/5] Turning syntax into a function --- css-easing-1/Overview.bs | 65 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 59 insertions(+), 6 deletions(-) diff --git a/css-easing-1/Overview.bs b/css-easing-1/Overview.bs index c9767eb4a401..de006cb5f185 100644 --- a/css-easing-1/Overview.bs +++ b/css-easing-1/Overview.bs @@ -145,7 +145,9 @@ that has: : input :: A number : output -:: A number +:: A number or null + + Note: The [=linear easing point/output=] is only null during the [=create a linear easing function=] algorithm.
@@ -179,13 +181,64 @@ It returns an [=output progress value=]. linear(<>) 
-  <linear-stop-list> =
-    [ <>? , <> ]#
-  <linear-stop> = <> && <>?
-  <linear-hint> = <>
+  <linear-stop-list> = [ <> ]#
+  <linear-stop> = <> && <>?
+  <linear-stop-length> = <>{1,2}
-TODO: I want to support syntax like linear(0 0% 0%, 1 100% 100%), but I can't figure out how it's done. linear-gradient seems to support that syntax but I can't see it in the grammar. +
+ +To create a linear easing function +from a <> |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 <>. + + 1. If |stop| has a <>, then: + + 1. Set |point|'s [=linear easing point/input=] to whichever is greater: + |stop|'s <>'s first <> as a number, + or |largestInput|. + + 1. Set |largestInput| to |point|'s [=linear easing point/input=]. + + 1. If |stop|'s <> has a second <>, 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 <>. + + 1. Set |extraPoint|'s [=linear easing point/input=] to whichever is greater: + |stop|'s <>'s second <> 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|. + +

The linear easing keyword: ''linear''

From 4ce3db66ec8fae8652221afb09cf2bfab57bef21 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Tue, 24 Aug 2021 13:43:29 +0100 Subject: [PATCH 5/5] It's the input that's null --- css-easing-1/Overview.bs | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/css-easing-1/Overview.bs b/css-easing-1/Overview.bs index de006cb5f185..76eba3bde5fe 100644 --- a/css-easing-1/Overview.bs +++ b/css-easing-1/Overview.bs @@ -143,11 +143,13 @@ that has:
: input -:: A number -: output :: A number or null - Note: The [=linear easing point/output=] is only null during the [=create a linear easing function=] algorithm. + Note: The [=linear easing point/input=] is only null during the [=create a linear easing function=] algorithm. + +: output +:: A number +