Difference between revisions of "LGUI2:Animations"

From Lavish Software Wiki
Jump to navigation Jump to search
(Created page with "An Animation is an algorithm applied to an element, which can alter the element over time. This is in contrast to a LGUI2:Style, which alters the element instantly. Each...")
 
Line 21: Line 21:
 
All other properties depend on the Animation Type. For example, "slide" may need a destination and duration.
 
All other properties depend on the Animation Type. For example, "slide" may need a destination and duration.
  
== Example ==
+
=== 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.
 
; 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.
 
  {
 
  {
Line 38: Line 38:
 
  jsonAnimation:Set[name,"\"slide\""]
 
  jsonAnimation:Set[name,"\"slide\""]
 
  jsonAnimation:Set[duration,1000]
 
  jsonAnimation:Set[duration,1000]
 +
 
  variable jsonvalue jsonArray=[]
 
  variable jsonvalue jsonArray=[]
 
  jsonArray:Add[800]
 
  jsonArray:Add[800]
 
  jsonArray:Add[600]
 
  jsonArray:Add[600]
 +
 
  jsonAnimation:Set[destination,"${jsonArray.AsJSON.Escape}"]
 
  jsonAnimation:Set[destination,"${jsonArray.AsJSON.Escape}"]
 +
 
  ; this evaluates to the same as the single-line example above.
 
  ; this evaluates to the same as the single-line example above.
 
  LGUI2.Element[elementName]:Animate["${jsonAnimation.Escape}"]
 
  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" [[LGUI2:Event Handler|Event Handler]]), or access a Method of a specified Object (as with a "method" [[LGUI2:Event Handler|Event Handler]])
 +
 +
{| border="1" style="border-collapse:collapse" cellpadding="5"
 +
!colspan="2"|Animation Type properties
 +
|-
 +
! name
 +
| The name of the new Animation Type
 +
|-
 +
!colspan="2"|Embedded LavishScript
 +
|-
 +
! code
 +
| The embedded LavishScript code. Note that the embedded LavishScript code must be escaped to fit within JSON string syntax.
 +
|-
 +
!colspan="2"|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"
 +
}
 +
 +
; 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}"]
  
 
{{LGUI2:Topic}}
 
{{LGUI2:Topic}}
 
[[Category:LavishGUI 2]]
 
[[Category:LavishGUI 2]]

Revision as of 05:34, 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.

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"
} 
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