SequentialAnimation
Node class that runs a set of child animations in sequence
Extends AnimationBase
The SequentialAnimation node class allows you to specify that a set of animations should occur sequentially. The children of the SequentialAnimation node specify the set of animations to be executed. Note that the use of the delay field in the child animations allows a delay between any two animations to be specified, if desired.
The state field is set to running when any of the child animations is in progress. Once all the animations have run to completion, the state field is set to stopped.
Example
The following example animates a group of rectangles to expand and change opacity sequentially from left to right.
SequentialAnimation Node Class Example
<?xml version="1.0" encoding="utf-8" ?>
<component name="animationsequentialtest" extends="Group">
<script type="text/brightscript">
<![CDATA[
function init()
m.testsequentialanimation = m.top.FindNode("testSequentialAnimation")
m.testsequentialanimation.repeat = "true"
m.testsequentialanimation.control = "start"
m.top.setFocus(true)
end function
]]>
</script>
<children>
<LayoutGroup id="dancingbars" translation="[640,360]" itemSpacings="[10]" layoutDirection="horizontal" horizAlignment="center" vertAlignment="center">
<Rectangle id="R1" color="0x00FF00FF" opacity=".2" width="50" height="100" scaleRotateCenter="[25, 50]" translation="[0, 0]" />
<Rectangle id="R2" color="0x00FF00FF" opacity=".2" width="50" height="100" scaleRotateCenter="[25, 50]" translation="[60, 0]" />
<Rectangle id="R3" color="0x00FF00FF" opacity=".2" width="50" height="100" scaleRotateCenter="[25, 50]" translation="[120, 0]" />
<Rectangle id="R4" color="0x00FF00FF" opacity=".2" width="50" height="100" scaleRotateCenter="[25, 50]" translation="[180, 0]" />
<Rectangle id="R5" color="0x00FF00FF" opacity=".2" width="50" height="100" scaleRotateCenter="[25, 50]" translation="[240, 0]" />
</LayoutGroup>
<Label text="Bars Should Be Dancing" width="1280" translation="[0,500]" horizAlign="center" vertAlign="center" />
<SequentialAnimation id="testSequentialAnimation">
<Animation id="R1Animation" duration="2" easeFunction="linear">
<Vector2DFieldInterpolator key="[0, 0.5, 1]" keyValue="[ [1, 1], [1, 2], [1, 1] ]" fieldToInterp="R1.scale" />
<FloatFieldInterpolator key="[0, 0.5, 1]" keyValue="[ 0.2, 1, 0.2 ]" fieldToInterp="R1.opacity" />
</Animation>
<Animation id="R2Animation" duration="2" easeFunction="linear">
<Vector2DFieldInterpolator key="[0, 0.5, 1]" keyValue="[ [1, 1], [1, 2], [1, 1] ]" fieldToInterp="R2.scale" />
<FloatFieldInterpolator key="[0, 0.5, 1]" keyValue="[ 0.2, 1, 0.2 ]" fieldToInterp="R2.opacity" />
</Animation>
<Animation id="R3Animation" duration="2" easeFunction="linear">
<Vector2DFieldInterpolator key="[0, 0.5, 1]" keyValue="[ [1, 1], [1, 2], [1, 1] ]" fieldToInterp="R3.scale" />
<FloatFieldInterpolator key="[0, 0.5, 1]" keyValue="[ 0.2, 1, 0.2 ]" fieldToInterp="R3.opacity" />
</Animation>
<Animation id="R4Animation" duration="2" easeFunction="linear">
<Vector2DFieldInterpolator key="[0, 0.5, 1]" keyValue="[ [1, 1], [1, 2], [1, 1] ]" fieldToInterp="R4.scale" />
<FloatFieldInterpolator key="[0, 0.5, 1]" keyValue="[ 0.2, 1, 0.2 ]" fieldToInterp="R4.opacity" />
</Animation>
<Animation id="R5Animation" duration="2" easeFunction="linear">
<Vector2DFieldInterpolator key="[0, 0.5, 1]" keyValue="[ [1, 1], [1, 2], [1, 1] ]" fieldToInterp="R5.scale" />
<FloatFieldInterpolator key="[0, 0.5, 1]" keyValue="[ 0.2, 1, 0.2 ]" fieldToInterp="R5.opacity" />
</Animation>
</SequentialAnimation>
</children>
</component>Sample app
AnimationSequentialExample is a sample app demonstrating SequentialAnimation in action.
Updated 13 days ago