Difference between revisions of "LGUI2:Animations"
Line 83: | Line 83: | ||
"method":"Spin" | "method":"Spin" | ||
} | } | ||
+ | |||
+ | ; Registering an Animation Type via LavishScript | ||
+ | LGUI2:RegisterAnimationType["{\"name\":\"spin\",\"object\":\"RadialController\",\"method\":\"Spin\"}"] | ||
; LavishScript portion for the "spin" animation | ; LavishScript portion for the "spin" animation |
Revision as of 05:45, 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
LavihGUI 2 Animation Types are defined by a JSON Object enclosed by {}
Animation Types can use LavishScript embedded in JSON (as with a "code" Event Handler), or access a Method of a specified Object (as with a "method" Event Handler)
Animation Type properties | |
---|---|
name | The name of the new Animation Type |
Embedded LavishScript | |
code | The embedded LavishScript code. Note that the embedded LavishScript code must be escaped to fit within JSON string syntax. |
LavishScript Object Method call | |
object | The LavishScript object (globally accessible) with the method to execute |
method | The method on the object to execute |
methodArgs | A JSON Array of parameters to pass directly to the method |
Example
- A continuous "spin" animation that operates on radialpanel elements (Object Method version)
{ "name":"spin", "object":"MyController", "method":"Spin" }
- Registering an Animation Type via LavishScript
LGUI2:RegisterAnimationType["{\"name\":\"spin\",\"object\":\"RadialController\",\"method\":\"Spin\"}"]
- LavishScript portion for the "spin" animation
objectdef myController { method Spin() { ; echo myController:Spin ${Context(type)} ${Context.Element(type)} ${Context.Animation.Type} ${Context.Args} ${Context.Timestamp} ${Context.FrameState} ; can be stopped here with Context.Animation:Stop variable float diffTime=${Context.Animation.FrameElapsed} if !${diffTime} return variable float newOrigin ; rotating clockwise at spinRate degrees per second (e.g. 60 degrees/second, per the "Activating" example below) newOrigin:Set[${Context.Element.Origin}+(${Context.Args[spinRate]}*${diffTime})] Context.Element:SetOrigin[${newOrigin}] } } variable(global) myController MyController
- Activating the "spin" animation via LavishScript
LGUI2.Element[elementName]:Animate["{\"type\":\"spin\",\"name\":\"spin\",\"spinRate\":60}"]
LavishGUI 2 Topics