wpf - Animation in expression blend VS2013 -

i have 4 balls animating. want animate 4 balls randomly within time limit, 1 minute. should create 4 storyboards (1 each ball)? since want balls independent of each other. how can call storyboards randomly then?

this xaml:

`<usercontrol xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d" x:class="ff2d.level1" x:name="usercontrol" d:designwidth="718" d:designheight="400"> <usercontrol.resources>          <storyboard x:key="targetanimate">         <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)" storyboard.targetname="ellipse1">             <easingdoublekeyframe x:name="targetout" keytime="0:0:1.2" value="-48">                 <easingdoublekeyframe.easingfunction>                     <elasticease easingmode="easeinout"/>                 </easingdoublekeyframe.easingfunction>             </easingdoublekeyframe>             <easingdoublekeyframe x:name="targetin" keytime="0:0:1.8" value="-8">                 <easingdoublekeyframe.easingfunction>                     <elasticease easingmode="easeout"/>                 </easingdoublekeyframe.easingfunction>             </easingdoublekeyframe>         </doubleanimationusingkeyframes>         <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)" storyboard.targetname="ellipse2">             <easingdoublekeyframe keytime="0:0:3" value="2">                 <easingdoublekeyframe.easingfunction>                     <backease easingmode="easeinout"/>                 </easingdoublekeyframe.easingfunction>             </easingdoublekeyframe>             <easingdoublekeyframe keytime="0:0:3.4" value="1">                 <easingdoublekeyframe.easingfunction>                     <backease easingmode="easeout" amplitude="0.5"/>                 </easingdoublekeyframe.easingfunction>             </easingdoublekeyframe>         </doubleanimationusingkeyframes>         <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.y)" storyboard.targetname="ellipse2">             <easingdoublekeyframe keytime="0:0:3" value="-34">                 <easingdoublekeyframe.easingfunction>                     <backease easingmode="easeinout"/>                 </easingdoublekeyframe.easingfunction>             </easingdoublekeyframe>             <easingdoublekeyframe keytime="0:0:3.4" value="2">                 <easingdoublekeyframe.easingfunction>                     <backease easingmode="easeout" amplitude="0.5"/>                 </easingdoublekeyframe.easingfunction>             </easingdoublekeyframe>         </doubleanimationusingkeyframes>         <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.y)" storyboard.targetname="ellipse3">             <easingdoublekeyframe keytime="0:0:7.5" value="-27">                 <easingdoublekeyframe.easingfunction>                     <backease easingmode="easeinout"/>                 </easingdoublekeyframe.easingfunction>             </easingdoublekeyframe>             <easingdoublekeyframe keytime="0:0:7.9" value="1"/>         </doubleanimationusingkeyframes>         <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)" storyboard.targetname="ellipse3">             <easingdoublekeyframe keytime="0:0:7.5" value="0"/>             <easingdoublekeyframe keytime="0:0:7.9" value="-3"/>         </doubleanimationusingkeyframes>     </storyboard> </usercontrol.resources> <usercontrol.triggers>     <eventtrigger routedevent="frameworkelement.loaded">         <beginstoryboard storyboard="{staticresource storyboard1}"/>         <beginstoryboard storyboard="{staticresource targetanimate}"/>     </eventtrigger> </usercontrol.triggers>  <grid x:name="layoutroot">     <image horizontalalignment="left" height="400" verticalalignment="top" width="712" source="lvbk/lv1bk01.jpg"/>     <stackpanel x:name="hud"  height="50" margin="0,350,6,0"  background="{dynamicresource hud}" orientation="horizontal">         <textblock textwrapping="wrap" text="score:" foreground="aqua" width="278.46" />         <textblock x:name="txblevel" textwrapping="wrap" width="206" text="level 1" foreground="greenyellow"></textblock>         <textblock x:name="txbammo" textwrapping="wrap" width="228.617"  ><run language="en-in" text="0/0" foreground="aqua"/></textblock>     </stackpanel>     <stackpanel x:name="timehud" horizontalalignment="left" height="36" margin="310,0,0,0" verticalalignment="top" width="100" background="{dynamicresource hud}">         <textblock x:name="txbtime" textwrapping="wrap" height="35.96"><run language="en-in" text="00:00" foreground="yellow"/></textblock>     </stackpanel>     <canvas margin="0,140,22,126">         <ellipse x:name="ellipse3" horizontalalignment="left" height="28" stroke="black" verticalalignment="top" width="28" rendertransformorigin="0.5,0.5" canvas.left="443" canvas.top="28">             <ellipse.fill>                 <radialgradientbrush spreadmethod="reflect" gradientorigin="0.5,0" center="0.5,0.5" radiusx="0.75" radiusy="0.3">                     <gradientstop offset="0.75" color="red"/>                     <gradientstop offset="0.108" color="white"/>                     <gradientstop color="#fefea4a4" offset="0.353"/>                     <gradientstop color="#ff9e0909" offset="1"/>                     <gradientstop color="#ffc60505" offset="0.909"/>                     <gradientstop color="#ffe60202" offset="0.81"/>                     <gradientstop color="#ffd40303" offset="0.862"/>                 </radialgradientbrush>             </ellipse.fill>             <ellipse.rendertransform>                 <transformgroup>                     <scaletransform/>                     <skewtransform/>                     <rotatetransform/>                     <translatetransform/>                 </transformgroup>             </ellipse.rendertransform>         </ellipse>         <rectangle  horizontalalignment="left" height="35" stroke="black" verticalalignment="top" width="90" canvas.left="401" canvas.top="28">             <rectangle.fill>                 <imagebrush imagesource="/textures/bs01.jpg" />             </rectangle.fill>         </rectangle>         <ellipse x:name="ellipse2" horizontalalignment="left" height="28" stroke="black" verticalalignment="top" width="28" rendertransformorigin="0.5,0.5" canvas.left="259" canvas.top="35">             <ellipse.fill>                 <radialgradientbrush spreadmethod="reflect" gradientorigin="0.5,0" center="0.5,0.5" radiusx="0.75" radiusy="0.3">                     <gradientstop offset="0.75" color="red"/>                     <gradientstop offset="0.108" color="white"/>                     <gradientstop color="#fefea4a4" offset="0.353"/>                     <gradientstop color="#ff9e0909" offset="1"/>                     <gradientstop color="#ffc60505" offset="0.909"/>                     <gradientstop color="#ffe60202" offset="0.81"/>                     <gradientstop color="#ffd40303" offset="0.862"/>                 </radialgradientbrush>             </ellipse.fill>             <ellipse.rendertransform>                 <transformgroup>                     <scaletransform/>                     <skewtransform/>                     <rotatetransform/>                     <translatetransform/>                 </transformgroup>             </ellipse.rendertransform>         </ellipse>         <rectangle  horizontalalignment="left" height="45" stroke="black" verticalalignment="top" width="114" canvas.left="199" canvas.top="28">             <rectangle.fill>                 <imagebrush imagesource="/textures/bs01.jpg" />             </rectangle.fill>         </rectangle>         <ellipse x:name="ellipse" horizontalalignment="left" height="36" stroke="black" verticalalignment="top" width="36" rendertransformorigin="0.5,0.5" canvas.left="65" canvas.top="67">             <ellipse.fill>                 <radialgradientbrush spreadmethod="reflect" gradientorigin="0.5,0" center="0.5,0.5" radiusx="0.75" radiusy="0.3">                     <gradientstop offset="0.75" color="red"/>                     <gradientstop offset="0.108" color="white"/>                     <gradientstop color="#fefea4a4" offset="0.353"/>                     <gradientstop color="#ff9e0909" offset="1"/>                     <gradientstop color="#ffc60505" offset="0.909"/>                     <gradientstop color="#ffe60202" offset="0.81"/>                     <gradientstop color="#ffd40303" offset="0.862"/>                 </radialgradientbrush>             </ellipse.fill>             <ellipse.rendertransform>                 <transformgroup>                     <scaletransform/>                     <skewtransform/>                     <rotatetransform/>                     <translatetransform/>                 </transformgroup>             </ellipse.rendertransform>         </ellipse>         <rectangle  horizontalalignment="left" height="60" stroke="black" verticalalignment="top" width="121" canvas.top="58">             <rectangle.fill>                 <imagebrush imagesource="/textures/bs01.jpg" />             </rectangle.fill>         </rectangle>         <ellipse x:name="ellipse1" horizontalalignment="left" height="36" stroke="black" verticalalignment="top" width="36" rendertransformorigin="0.5,0.5" canvas.left="570" canvas.top="88">             <ellipse.rendertransform>                 <transformgroup>                     <scaletransform/>                     <skewtransform/>                     <rotatetransform/>                     <translatetransform/>                 </transformgroup>             </ellipse.rendertransform>             <ellipse.fill>                 <radialgradientbrush spreadmethod="reflect" gradientorigin="0.5,0" center="0.5,0.5" radiusx="0.75" radiusy="0.3">                     <gradientstop offset="0.75" color="red"/>                     <gradientstop offset="0.108" color="white"/>                     <gradientstop color="#fefea4a4" offset="0.353"/>                     <gradientstop color="#ff9e0909" offset="1"/>                     <gradientstop color="#ffc60505" offset="0.909"/>                     <gradientstop color="#ffe60202" offset="0.81"/>                     <gradientstop color="#ffd40303" offset="0.862"/>                 </radialgradientbrush>             </ellipse.fill>         </ellipse>         <rectangle  horizontalalignment="left" height="67" stroke="black" verticalalignment="top" width="138" canvas.left="558" canvas.top="67">             <rectangle.fill>                 <imagebrush imagesource="/textures/bs01.jpg" />             </rectangle.fill>         </rectangle>     </canvas> </grid> 

`

option 1: if animation each ball different write 4 storyboards option 2: if animation same write 1 storyboard

to make random: use timer call storyboards.

hope helps.