Jon: Created page with "Animations in Spire follow a philosophy of enhancing clarity and communication without embellishment or impedance to the user. In CSS there are transitions, in Spire an anima..."

2024-01-30T20:41:31Z

Created page with "Animations in Spire follow a philosophy of enhancing clarity and communication without embellishment or impedance to the user. In CSS there are transitions, in Spire an anima..."

New page

Animations in Spire follow a philosophy of enhancing clarity and communication without embellishment or impedance to the user.

In CSS there are transitions, in Spire an animation is just a value. This means that a property value such as <code>background_color</code> or <code>border_color</code> can be directly set to an animation value to achieve a property value that changes over time.

== Example: Rejected Style for InputBox ==

[[File:TextBox_Rejected.gif|720px|Animation of TextBox Rejected style]]

When the InputBox is in the <code>rejected</code> state, an animation plays. The animation can be defined as follows:

<syntaxhighlight lang="css">background_color: chain(timeout(#FFF1F1, 250ms), linear(#FFF1F1, revert, 300ms))
border_color: chain(timeout(#B71C1C, 550ms), revert)</syntaxhighlight>
In this case the value says:

<blockquote>Chain together two styles, the first style is a value of <code>#FFF1F1</code> that times out after 250ms, the second value is a linear interpolation from <code>#FFF1F1</code> to whatever the style was before (that’s what <code>revert</code> does), over 300ms.
</blockquote>
Border color is styled as:

<blockquote>Chain two styles, the first is the color <code>#B71C1C</code> that expires after 550ms and then reverts to whatever it was previously.
</blockquote>
This is reflected in <code>components.xd</code> for InputBox.

[[File:InputBox_components.png|720px|Definition card for Box in InputBox]]

When the InputBox is <code>rejected</code>, property declarations are made for the <code>background_color</code> and <code>color</code> that are animation values. Whenever the InputBox is put into the <code>rejected</code> state, the animations will play.

Each property value is independent, and there is no necessary connection between the timing used for the animation values for each property.

== Example: Uptick/Downtick Style for DecimalBox ==

[[File:DecimalBox_Uptick_Downtick.gif|720px|Uptick and downtick animation style on DecimalBox]]

When the DecimalBox uses the uptick/downtick styling, its background color flashes when its value changes, reflecting whether the value increased or decreased.

When the value increases, it is uptick:

<syntaxhighlight lang="css">background_color: linear(#EBFFF0, revert, 550ms)</syntaxhighlight>
When the value decreases, it is downtick:

<syntaxhighlight lang="css">background_color: linear(#FFF1F1, revert, 550ms)</syntaxhighlight>

== Functions ==

Unlike static values, animation values use functions that allow them to change over time. The list of functions that have been used are as follows:

{| class="wikitable"
|-
! Function!! Decription
|-
| <code>chain(X, Y, *ARGS)</code> || An animation that applies <code>X</code> until <code>X</code> ends, then applies <code>Y</code> until <code>Y</code> ends, and so on for any additional arguments.
|-
| <code>timeout(X, Y)</code> || Applies <code>X</code> for a period of <code>Y</code>.
|-
| <code>linear(X, Y, Z)</code> || Linearly interpolates from <code>X</code> to <code>Y</code> over a period <code>Z</code>. <code>linear = cubic_bezier(0.0, 0.0, 1.0, 1.0)</code>.
|-
| <code>ease(X, Y, Z)</code> || Interpolates from <code>X</code> to <code>Y</code> over a period <code>Z</code> using the <code>ease</code> timing function. <code>ease = cubic_bezier(0.25, 0.1, 0.25, 1.0)</code>.
|}

Additional functions may be added provided they have a clear use case and are documented.

== Keywords ==

Values within functions may be literal values (e.g. a color value or a time in milliseconds), or they may be a keyword with a defined meaning.

{| class="wikitable"
|-
! Keyword!! Decription
|-
| <code>revert</code> || Applies whatever style would have otherwise been applied.
|}

== References ==

* [https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function Easing Functions]
* [https://easings.net/ Easing Functions Cheat Sheet]

Animations - Revision history

Jon: Created page with "Animations in Spire follow a philosophy of enhancing clarity and communication without embellishment or impedance to the user. In CSS there are transitions, in Spire an anima..."