<container>
  <image id="theControlImage" x="{component.begin.x}" y="{component.begin.y}" width="{component.begin.width}" height="{component.begin.height}" src="{component.src}" rendering="speed"/>
  <action id="myAction1" on="Appear" onEnd="FinishedTransition" >
      <animate targetNode="theControlImage"   targetAttr="opacity" from="0" to="1" begin="0s" dur="250ms" />
      <animate targetNode="theControlImage"   targetAttr="x" to="{component.end.x}" begin="0s" dur="0ms"/>
      <animate targetNode="theControlImage"   targetAttr="y" from="{screen.height}" to="{component.end.y}"   begin="0s" dur="150ms" ease="in" />
      <animate targetNode="theControlImage"   targetAttr="width" to="{component.end.width}" begin="0s" dur="0ms" />
      <animate targetNode="theControlImage"   targetAttr="height"  to="{component.end.height}" begin="0s" dur="0ms" />
   </action>

    <action id="myAction2" on="Disappear" onEnd="FinishedTransition" >
    <animate targetNode="theControlImage" targetAttr="y" to="{screen.height}" dur="250ms" ease="out" />
    <animate targetNode="theControlImage" targetAttr="opacity" from="1" to="0" begin="0ms" dur="250ms" />
  </action>
</container> 
