Difference between revisions of "LGUI2:AnimationType:repeat"

From Lavish Software Wiki
Jump to navigation Jump to search
 
Line 42: Line 42:
 
; Perform the above example via LavishScript, moving an element named "elementToAnimate" back and forth
 
; Perform the above example via LavishScript, moving an element named "elementToAnimate" back and forth
 
  LGUI2.Element["elementToAnimate"]:Animate["{\"type\":\"repeat\",\"name\":\"loopBackAndForth\",\"animation\":{\"type\":\"chain\",\"name\": \"backAndForth\",\"animations\":[{\"type\":\"slide\",\"name\":\"back\",\"destination\":[0,0],\"duration\":1000},{\"type\":\"slide\",\"name\":\"forth\",\"destination\":[1500,0],\"duration\":1000}]}}"]
 
  LGUI2.Element["elementToAnimate"]:Animate["{\"type\":\"repeat\",\"name\":\"loopBackAndForth\",\"animation\":{\"type\":\"chain\",\"name\": \"backAndForth\",\"animations\":[{\"type\":\"slide\",\"name\":\"back\",\"destination\":[0,0],\"duration\":1000},{\"type\":\"slide\",\"name\":\"forth\",\"destination\":[1500,0],\"duration\":1000}]}}"]
 +
 +
 +
; Repeatedly fade an element to 50% opacity, and back to 100%
 +
{
 +
  "type": "repeat",
 +
  "name": "loopBlink",
 +
  "animation": {
 +
    "type": "chain",
 +
    "name": "blink",
 +
    "animations": [
 +
      {
 +
        "type": "fade",
 +
        "name": "fadeOut",
 +
        "opacity": 0.5,
 +
        "duration": 1.0
 +
      },
 +
      {
 +
        "type": "fade",
 +
        "name": "fadeIn",
 +
        "opacity": 1.0,
 +
        "duration": 1.0
 +
      }
 +
    ]
 +
  }
 +
}
  
  
 
{{LGUI2:AnimationType}}
 
{{LGUI2:AnimationType}}

Latest revision as of 03:14, 16 November 2018

The repeat Animation Type repeats a specified Animation

Animation properties

A repeat Animation uses these properties in addition to those defined by Animation
Animation properties for "repeat"
animation (Required) An Animation definition, specifying the Animation to repeat
maxIterations (Optional) A numeric value specifying the number of times to repeat the specified Animation. If 0, the Animation repeats indefinitely, or until the repeat Animation is Stopped.


Examples

Slide back and forth

Here, we repeat a chain of slide Animations indefinitely, moving the element back and forth between 0,0 and 1500,0

{
  "type": "repeat",
  "name": "loopBackAndForth",
  "animation": {
    "type": "chain",
    "name": "backAndForth",
    "animations": [
      {
        "type": "slide",
        "name": "back",
        "destination": [ 0, 0 ],
        "duration": 1000
      },
      {
        "type": "slide",
        "name": "forth",
        "destination": [ 1500, 0 ],
        "duration": 1000
      }
    ]
  }
}
Perform the above example via LavishScript, moving an element named "elementToAnimate" back and forth
LGUI2.Element["elementToAnimate"]:Animate["{\"type\":\"repeat\",\"name\":\"loopBackAndForth\",\"animation\":{\"type\":\"chain\",\"name\": \"backAndForth\",\"animations\":[{\"type\":\"slide\",\"name\":\"back\",\"destination\":[0,0],\"duration\":1000},{\"type\":\"slide\",\"name\":\"forth\",\"destination\":[1500,0],\"duration\":1000}]}}"]


Repeatedly fade an element to 50% opacity, and back to 100%
{
  "type": "repeat",
  "name": "loopBlink",
  "animation": {
    "type": "chain",
    "name": "blink",
    "animations": [
      {
        "type": "fade",
        "name": "fadeOut",
        "opacity": 0.5,
        "duration": 1.0
      },
      {
        "type": "fade",
        "name": "fadeIn",
        "opacity": 1.0,
        "duration": 1.0
      }
    ]
  }
}


LavishGUI 2 Animation Types

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