<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="0ms" />
      <animate targetNode="theControlImage"   targetAttr="x" from="{component.end.x}" to="{component.end.x}" begin="0s" dur="0ms" ease="in" />
      <animate targetNode="theControlImage"   targetAttr="y" from="{component.end.y}" to="{component.end.y}" begin="0s" dur="0ms" ease="in" />
      <animate targetNode="theControlImage"   targetAttr="width" from="{component.end.width}" to="{component.end.width}" begin="0s" dur="0ms" />
  <animate targetNode="theControlImage"   targetAttr="height" from="{component.end.height*0.8}" to="{component.end.height}" begin="0s" dur="200ms" />
   </action>

    <action id="myAction2" on="Disappear" onEnd="FinishedTransition" >
      <animate targetNode="theControlImage"   targetAttr="opacity" from="1" to="0" begin="0s" dur="150ms" />
      <animate targetNode="theControlImage"   targetAttr="x" from="{component.begin.x}" to="{component.begin.x}" begin="0s" dur="0ms" ease="in" />
      <animate targetNode="theControlImage"   targetAttr="y" from="{component.begin.y}" to="{component.begin.y}" begin="0s" dur="0ms" ease="in" />
      <animate targetNode="theControlImage"   targetAttr="width" from="{component.begin.width}" to="{component.begin.width}" begin="0s" dur="0ms" />
  <animate targetNode="theControlImage"   targetAttr="height" from="{component.begin.height}" to="{component.begin.height*0.1}" begin="0s" dur="150ms" />
  </action>
</container>