Difference between revisions of "LGUI2:AnimationType:repeat"
Jump to navigation
Jump to search
(Created page with "The repeat Animation Type repeats a specified LGUI2:Animation == Animation properties == {| border="1" style="border-collapse:collapse" cellpaddi...") |
|||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | The repeat [[LGUI2:Animation Type|Animation Type]] repeats a specified [[LGUI2:Animation]] | + | The repeat [[LGUI2:Animation Type|Animation Type]] repeats a specified [[LGUI2:Animation|Animation]] |
== Animation properties == | == Animation properties == | ||
| + | ; A repeat Animation uses these properties in addition to those defined by [[LGUI2:Animation|Animation]] | ||
{| border="1" style="border-collapse:collapse" cellpadding="5" | {| border="1" style="border-collapse:collapse" cellpadding="5" | ||
!colspan="2"|Animation properties for "repeat" | !colspan="2"|Animation properties for "repeat" | ||
|- | |- | ||
! animation | ! animation | ||
| − | | An [[LGUI2:Animation]] definition, specifying the Animation to repeat | + | | (Required) An [[LGUI2:Animation|Animation]] definition, specifying the Animation to repeat |
|- | |- | ||
! maxIterations | ! maxIterations | ||
| − | | 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. | + | | (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. |
|} | |} | ||
| Line 34: | Line 35: | ||
"destination": [ 1500, 0 ], | "destination": [ 1500, 0 ], | ||
"duration": 1000 | "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 | ||
} | } | ||
] | ] | ||
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
