Animate Poster Scaling

components/ItemGrid2/GridItem.brs

@@ -22,18 +22,19 @@ sub itemContentChanged()
 end sub
 
 '
-'Resize Poster and Title Vivbility on focus change
+'Use FocusPercent to animate scaling of Poser Image
+sub focusChanging()
+  scaleFactor = 1 + (m.top.focusPercent * 0.17333)
+  m.itemPoster.scale = [scaleFactor, scaleFactor]
+end sub
+
+'
+'Display or hide title Visibility on focus change
 sub focusChanged()
 
   if m.top.itemHasFocus = true then
-    m.itemPoster.width = 295
-    m.itemPoster.height = 440
-    m.itemPoster.translation = [0,0]
     m.itemText.visible = true
   else
-    m.itemPoster.width = 250
-    m.itemPoster.height = 375
-    m.itemPoster.translation = [21,35]
     m.itemText.visible = false
   end if
 

components/ItemGrid2/GridItem.xml

@@ -1,12 +1,13 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <component name="GridItem" extends="Group">
   <children>
-    <Poster id="itemPoster" width="250" height="375" translation="[21,35]" loadDisplayMode="scaleToZoom" loadingBitmapUri="pkg:/images/PosterLoading.png" failedBitmapUri="pkg:/images/PosterFailed.png" />
+    <Poster id="itemPoster" width="250" height="375" translation="[21,35]" loadDisplayMode="scaleToZoom" loadingBitmapUri="pkg:/images/PosterLoading.png" failedBitmapUri="pkg:/images/PosterFailed.png" scaleRotateCenter="[147.5, 220]" />
     <ScrollingLabel id="itemText" horizAlign="center" font="font:SmallSystemFont" maxWidth="295" translation="[0,442]" repeatCount="-1" visible="false"  />
   </children>
   <interface>
     <field id="itemContent" type="node" onChange="itemContentChanged" />
     <field id="itemHasFocus" type="boolean" onChange="focusChanged" />
+    <field id="focusPercent" type="float" onChange="focusChanging" />
   </interface>
   <script type="text/brightscript" uri="GridItem.brs" />
 </component>