Difference between revisions of "LGUI2:Animations"

From Lavish Software Wiki
Jump to navigation Jump to search
 
(3 intermediate revisions by the same user not shown)
Line 17: Line 17:
 
! name
 
! 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.
 
| 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 may run indefinitely.
 
|}
 
|}
  
Line 49: Line 55:
  
 
== Defining an Animation Type ==
 
== Defining an Animation Type ==
LavihGUI 2 Animation Types are defined by a JSON Object enclosed by {}
+
See [[LGUI2:Animation Types|Animation Types]]
  
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"
 
}
 
 
; 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.Equal[0]}
 
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:AnimationTypes}}
 
{{LGUI2:Topic}}
 
{{LGUI2:Topic}}
 
[[Category:LavishGUI 2]]
 
[[Category:LavishGUI 2]]
 
[[Category:LavishGUI 2 Animations]]
 
[[Category:LavishGUI 2 Animations]]

Latest revision as of 03:40, 5 February 2019

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 may 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