LGUI2:Animations

From Lavish Software Wiki
Revision as of 03:02, 19 November 2018 by Lax (talk | contribs)
Jump to navigation Jump to search

An Animation is an algorithm applied to an element, which can alter the element over time. This is in contrast to a Style, which alters the element instantly.

Each Animation is a parameterized instance of a particular Animation Type, which provides the algorithm. For example, a slide Animation Type can be added to move an element smoothly over time.

Defining an Animation

LavihGUI 2 Animations are defined by a JSON Object enclosed by {}

Base Animation Properties

Each type of animation has its own properties that may be specified by the JSON Object, but all animations support these base properties.

Base Animation properties
type The Animation Type (required!). For example, "slide"
name The name of the Animation. This name should be mutually exclusive within the Element; Any new Animation with the same name will Stop and remove the previously existing Animation.
duration A number specifying the duration, if any, for the Animation. If specified as an integer (whole number), the duration is interpreted as milliseconds. If specified as a floating point, the duration is interpreted as seconds.
instant True or False, specifying whether a 0-duration Animation is instant. If not, it will run indefinitely.

All other properties depend on the Animation Type. For example, "slide" may need a destination and duration.

Example

Using the "slide" animation, move an element to position 800,600 over a period of 1000ms (1 second). For simplicity, we use the same "name" as the type, but as the purpose of the name is mutual exclusion, use any name you see fit.
{
  "type":"slide",
  "name":"slide",
  "duration":1000,
  "destination":[800,600]
}
Activate the "slide" animation example on an element from LavishScript. Note that JSON strings within LavishScript strings must be escaped, as shown here.
LGUI2.Element[elementName]:Animate["{\"type\":\"slide\",\"name\":\"slide\",\"duration\":1000,\"destination\":[800,600]}"]
Dynamically build the "slide" animation example in LavishScript
variable jsonvalue jsonAnimation={}
jsonAnimation:Set[type,"\"slide\""]
jsonAnimation:Set[name,"\"slide\""]
jsonAnimation:Set[duration,1000]

variable jsonvalue jsonArray=[]
jsonArray:Add[800]
jsonArray:Add[600]

jsonAnimation:Set[destination,"${jsonArray.AsJSON.Escape}"]

; this evaluates to the same as the single-line example above.
LGUI2.Element[elementName]:Animate["${jsonAnimation.Escape}"]

Defining an Animation Type

See Animation Types


LavishGUI 2 Animation Types

Basic Animations
fade - slide - value
Utilities
chain - composite - delay - random - repeat

LavishGUI 2 Topics