How to apply animation in Roku scene graph applications
Posted By : Prashant Grover | 28-Jun-2017
In Roku scene graph application there are several nodes provided by scene graph API to animate screen elements, Using animation scene graph api we can easily move elements, disappear, reappear and change color of any elements on which we have applied animation. classes used for animation are :
1. Animation.
2. Sequential Animation.
3. Parallel Animation.
4. Float Field Interpolator.
5. Vector 2D Field Interpolator.
6. color Field Interpolator.
Example of Animation
<?xml version="1.0" encoding="utf-8" ?>
<component name="SimpleAnimation" extends="Group" >
<script type="text/brightscript" uri="pkg:/components/SimpleAnimation.brs" />
<children>
<Poster id="myPoster"
width="500.0"
height="500.0"
translation="[50,50]"
visible="false"
opacity="0.0"
uri="http://devtools.web.roku.com/samples/images/Landscape_1.jpg" />
<Label id="myLabel"
horizAlign="center"
vertAlign="center"
visible="false"
translation="[1000.0, 100.0]"
text="Scene Graph Animations" />
<Rectangle
id="bottomRect"
color="0x0000FFFF"
width="1280"
height="100"
opacity="0.5"
translation="[0, 720]">
<Label id="MenuLabel"
width="1280"
height="100"
horizAlign="center"
vertAlign="center"
text="Your Menu Here" />
</Rectangle>
<Animation id="myAnimation"
duration="3"
repeat="true"
easeFunction="linear" >
<FloatFieldInterpolator id = "myInterp"
key="[0.0, 0.50, 0.75, 1.0]"
keyValue="[0.0, 0.50, 0.75, 1.0]"
fieldToInterp="myPoster.opacity" />
</Animation>
<Animation id="myAnimation2"
duration="5"
repeat="true"
easeFunction="linear" >
<Vector2DFieldInterpolator id = "myInterp2"
key="[0.0, 0.25, 0.5, 0.75, 1.0]"
keyValue="[ [50.0, 50.0], [715.0, 100.0], [715.0, 450.0], [365.0, 450.0], [365.0, 100.0] ]"
fieldToInterp="myPoster.translation" />
</Animation>
<Animation id="myAnimation3"
duration="5"
repeat="true"
easeFunction="linear" >
<Vector2DFieldInterpolator id = "myInterp3"
key="[0.0, 0.25, 0.5, 0.75, 1.0]"
keyValue="[ [1000.0, 100.0], [850.0, 150.0], [650.0, 300.0], [300.0, 450.0], [0.0, 600.0]]"
fieldToInterp="myLabel.translation" />
</Animation>
<Animation
id="colorChangeAnimation"
duration="4"
repeat="true"
control="start"
easeFunction="linear" >
<ColorFieldInterpolator
id = "changeBarColor"
key="[0.0, 0.25, 0.5, 0.75, 1.0]"
keyValue="[ 0x000000FF, 0xFF0000FF, 0x00FF00FF, 0x0000FFFF, 0x00FFFFFF]"
fieldToInterp="myLabel.color"
/>
</Animation>
<Animation id="bottomRectUpAnimation"
duration="0.5"
repeat="false"
easeFunction="linear" >
<Vector2DFieldInterpolator id = "myInterp4"
key="[0.0, 0.25, 0.5, 0.75, 1.0]"
keyValue="[ [0.0, 700.0], [0.0, 680.0], [0.0, 660.0], [0.0, 640.0], [0.0, 620.0] ]"
fieldToInterp="bottomRect.translation" />
</Animation>
<Animation id="bottomRectDownAnimation"
duration="0.5"
repeat="false"
easeFunction="linear" >
<Vector2DFieldInterpolator id = "myInterp4"
key="[0.0, 0.25, 0.5, 0.75, 1.0]"
keyValue="[ [0.0, 640.0], [0.0, 660.0], [0.0, 680.0], [0.0, 700.0], [0.0, 720.0] ]"
fieldToInterp="bottomRect.translation" />
</Animation>
</children>
</component>
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Prashant Grover
Prashant is a bright Java developer, his area of expertise are Core Java, Android , Spring . Grails etc. Apart from that he spends his time playing volleyball.