Difference between revisions of "LGUI2:Animations"
Jump to navigation
Jump to search
Line 49: | Line 49: | ||
== Defining an Animation Type == | == Defining an Animation Type == | ||
− | + | See [[LGUI2:Animation Types|Animation Types]] | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{{LGUI2:AnimationTypes}} | {{LGUI2:AnimationTypes}} | ||
{{LGUI2:Topic}} | {{LGUI2:Topic}} | ||
[[Category:LavishGUI 2]] | [[Category:LavishGUI 2]] | ||
[[Category:LavishGUI 2 Animations]] | [[Category:LavishGUI 2 Animations]] |
Revision as of 17:50, 14 November 2018
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.
Contents
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. |
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
LavishGUI 2 Topics