Animating multiple objects on a single path.


here issue. can animate 1 object on path, need animate multiple objects (4) on same path need spaced out accordingly.

senario:

i want 4 buttons rotate counter clockwise around circular toggle button. can animating each individual button on own, don't want have create new path each one. seems kind of inefficant. if can point me in right direction great.


thanks

hi,

1) first have add 1 circle using ellipse control
2) add 4 button on form
3) select circle , choose menu -> objects -> path -> convert mothion path -> in popup dialog select first button
now first button mapped circle path. once convert motion path default 2 seconds there story board move button on circle path 1 complete round.
4) selecting circle come story board timeline , move yellow time line 0 .5 seconds holding yellow timeline handle.
5) select circle , choose menu -> objects -> path -> convert mothion path -> in popup dialog select the second button
now the second button mapped circle path.
6) selecting circle come story board timeline , move yellow time line from .5 to 1 seconds holding yellow timeline handle.
7) select circle , choose menu -> objects -> path -> convert mothion path -> in popup dialog select the third button
now the third button mapped circle path.
8) selecting circle come story board timeline , move yellow time line from 1 to 1.5 seconds holding yellow timeline handle.
9) select circle , choose menu -> objects -> path -> convert mothion path -> in popup dialog select the fourth button
now the fourth button mapped circle path.
10) in objects , timeline panel
      expand/drill down  each button till motion path -> right click on motion path -> in popup menu select "edit repeat count" menu , in edit repeat dialog click on forever button , click on [ok]


here source code...

i hope :)

<window
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:class="untitledproject1.window3"
 x:name="window"
 title="window3"
 width="640" height="480">
 <window.resources>
  <storyboard x:key="storyboard1">
   <doubleanimationusingpath begintime="00:00:00" duration="00:00:02" storyboard.targetname="button" storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)" source="x" repeatbehavior="forever">
    <doubleanimationusingpath.pathgeometry>
     <pathgeometry>
      <pathfigure isclosed="true" startpoint="520.5,173">
       <beziersegment point1="520.5,276.829532968189" point2="434.314814342428,361" point3="328,361" issmoothjoin="true"/>
       <beziersegment point1="221.685185657572,361" point2="135.5,276.829532968189" point3="135.5,173" issmoothjoin="true"/>
       <beziersegment point1="135.5,69.1704670318108" point2="221.685185657572,-15" point3="328,-15" issmoothjoin="true"/>
       <beziersegment point1="434.314814342428,-15" point2="520.5,69.1704670318108" point3="520.5,173" issmoothjoin="true"/>
      </pathfigure>
     </pathgeometry>
    </doubleanimationusingpath.pathgeometry>
   </doubleanimationusingpath>
   <doubleanimationusingpath begintime="00:00:00" duration="00:00:02" storyboard.targetname="button" storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.y)" source="y" repeatbehavior="forever">
    <doubleanimationusingpath.pathgeometry>
     <pathgeometry>
      <pathfigure isclosed="true" startpoint="520.5,173">
       <beziersegment point1="520.5,276.829532968189" point2="434.314814342428,361" point3="328,361" issmoothjoin="true"/>
       <beziersegment point1="221.685185657572,361" point2="135.5,276.829532968189" point3="135.5,173" issmoothjoin="true"/>
       <beziersegment point1="135.5,69.1704670318108" point2="221.685185657572,-15" point3="328,-15" issmoothjoin="true"/>
       <beziersegment point1="434.314814342428,-15" point2="520.5,69.1704670318108" point3="520.5,173" issmoothjoin="true"/>
      </pathfigure>
     </pathgeometry>
    </doubleanimationusingpath.pathgeometry>
   </doubleanimationusingpath>
   <doubleanimationusingpath begintime="00:00:00.5000000" duration="00:00:02" storyboard.targetname="button1" storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)" source="x" repeatbehavior="forever">
    <doubleanimationusingpath.pathgeometry>
     <pathgeometry>
      <pathfigure isclosed="true" startpoint="520.5,122">
       <beziersegment point1="520.5,225.829532968189" point2="434.314814342428,310" point3="328,310" issmoothjoin="true"/>
       <beziersegment point1="221.685185657572,310" point2="135.5,225.829532968189" point3="135.5,122" issmoothjoin="true"/>
       <beziersegment point1="135.5,18.1704670318108" point2="221.685185657572,-66" point3="328,-66" issmoothjoin="true"/>
       <beziersegment point1="434.314814342428,-66" point2="520.5,18.1704670318108" point3="520.5,122" issmoothjoin="true"/>
      </pathfigure>
     </pathgeometry>
    </doubleanimationusingpath.pathgeometry>
   </doubleanimationusingpath>
   <doubleanimationusingpath begintime="00:00:00.5000000" duration="00:00:02" storyboard.targetname="button1" storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.y)" source="y" repeatbehavior="forever">
    <doubleanimationusingpath.pathgeometry>
     <pathgeometry>
      <pathfigure isclosed="true" startpoint="520.5,122">
       <beziersegment point1="520.5,225.829532968189" point2="434.314814342428,310" point3="328,310" issmoothjoin="true"/>
       <beziersegment point1="221.685185657572,310" point2="135.5,225.829532968189" point3="135.5,122" issmoothjoin="true"/>
       <beziersegment point1="135.5,18.1704670318108" point2="221.685185657572,-66" point3="328,-66" issmoothjoin="true"/>
       <beziersegment point1="434.314814342428,-66" point2="520.5,18.1704670318108" point3="520.5,122" issmoothjoin="true"/>
      </pathfigure>
     </pathgeometry>
    </doubleanimationusingpath.pathgeometry>
   </doubleanimationusingpath>
   <doubleanimationusingpath begintime="00:00:01" duration="00:00:02" storyboard.targetname="button2" storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)" source="x" repeatbehavior="forever">
    <doubleanimationusingpath.pathgeometry>
     <pathgeometry>
      <pathfigure isclosed="true" startpoint="520.5,75">
       <beziersegment point1="520.5,178.829532968189" point2="434.314814342428,263" point3="328,263" issmoothjoin="true"/>
       <beziersegment point1="221.685185657572,263" point2="135.5,178.829532968189" point3="135.5,75" issmoothjoin="true"/>
       <beziersegment point1="135.5,-28.8295329681892" point2="221.685185657572,-113" point3="328,-113" issmoothjoin="true"/>
       <beziersegment point1="434.314814342428,-113" point2="520.5,-28.8295329681892" point3="520.5,75" issmoothjoin="true"/>
      </pathfigure>
     </pathgeometry>
    </doubleanimationusingpath.pathgeometry>
   </doubleanimationusingpath>
   <doubleanimationusingpath begintime="00:00:01" duration="00:00:02" storyboard.targetname="button2" storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.y)" source="y" repeatbehavior="forever">
    <doubleanimationusingpath.pathgeometry>
     <pathgeometry>
      <pathfigure isclosed="true" startpoint="520.5,75">
       <beziersegment point1="520.5,178.829532968189" point2="434.314814342428,263" point3="328,263" issmoothjoin="true"/>
       <beziersegment point1="221.685185657572,263" point2="135.5,178.829532968189" point3="135.5,75" issmoothjoin="true"/>
       <beziersegment point1="135.5,-28.8295329681892" point2="221.685185657572,-113" point3="328,-113" issmoothjoin="true"/>
       <beziersegment point1="434.314814342428,-113" point2="520.5,-28.8295329681892" point3="520.5,75" issmoothjoin="true"/>
      </pathfigure>
     </pathgeometry>
    </doubleanimationusingpath.pathgeometry>
   </doubleanimationusingpath>
   <doubleanimationusingpath begintime="00:00:01.5000000" duration="00:00:02" storyboard.targetname="button3" storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)" source="x" repeatbehavior="forever">
    <doubleanimationusingpath.pathgeometry>
     <pathgeometry>
      <pathfigure isclosed="true" startpoint="520.5,29">
       <beziersegment point1="520.5,132.829532968189" point2="434.314814342428,217" point3="328,217" issmoothjoin="true"/>
       <beziersegment point1="221.685185657572,217" point2="135.5,132.829532968189" point3="135.5,29" issmoothjoin="true"/>
       <beziersegment point1="135.5,-74.8295329681892" point2="221.685185657572,-159" point3="328,-159" issmoothjoin="true"/>
       <beziersegment point1="434.314814342428,-159" point2="520.5,-74.8295329681892" point3="520.5,29" issmoothjoin="true"/>
      </pathfigure>
     </pathgeometry>
    </doubleanimationusingpath.pathgeometry>
   </doubleanimationusingpath>
   <doubleanimationusingpath begintime="00:00:01.5000000" duration="00:00:02" storyboard.targetname="button3" storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.y)" source="y" repeatbehavior="forever">
    <doubleanimationusingpath.pathgeometry>
     <pathgeometry>
      <pathfigure isclosed="true" startpoint="520.5,29">
       <beziersegment point1="520.5,132.829532968189" point2="434.314814342428,217" point3="328,217" issmoothjoin="true"/>
       <beziersegment point1="221.685185657572,217" point2="135.5,132.829532968189" point3="135.5,29" issmoothjoin="true"/>
       <beziersegment point1="135.5,-74.8295329681892" point2="221.685185657572,-159" point3="328,-159" issmoothjoin="true"/>
       <beziersegment point1="434.314814342428,-159" point2="520.5,-74.8295329681892" point3="520.5,29" issmoothjoin="true"/>
      </pathfigure>
     </pathgeometry>
    </doubleanimationusingpath.pathgeometry>
   </doubleanimationusingpath>
  </storyboard>
 </window.resources>
 <window.triggers>
  <eventtrigger routedevent="frameworkelement.loaded">
   <beginstoryboard storyboard="{staticresource storyboard1}"/>
  </eventtrigger>
 </window.triggers>

 <grid x:name="layoutroot">
  <ellipse margin="173,38,73,38" fill="#ffffffff" stroke="#ff000000"/>
  <button horizontalalignment="left" margin="8,38,0,0" verticalalignment="top" width="60" height="31" content="button" x:name="button" rendertransformorigin="0.5,0.5">
   <button.rendertransform>
    <transformgroup>
     <scaletransform scalex="1" scaley="1"/>
     <skewtransform anglex="0" angley="0"/>
     <rotatetransform angle="0"/>
     <translatetransform x="0" y="0"/>
    </transformgroup>
   </button.rendertransform>
  </button>
  <button horizontalalignment="left" margin="8,89,0,0" verticalalignment="top" width="60" height="31" content="button" x:name="button1" rendertransformorigin="0.5,0.5">
   <button.rendertransform>
    <transformgroup>
     <scaletransform scalex="1" scaley="1"/>
     <skewtransform anglex="0" angley="0"/>
     <rotatetransform angle="0"/>
     <translatetransform x="0" y="0"/>
    </transformgroup>
   </button.rendertransform>
  </button>
  <button horizontalalignment="left" margin="8,136,0,0" verticalalignment="top" width="60" height="31" content="button" x:name="button2" rendertransformorigin="0.5,0.5">
   <button.rendertransform>
    <transformgroup>
     <scaletransform scalex="1" scaley="1"/>
     <skewtransform anglex="0" angley="0"/>
     <rotatetransform angle="0"/>
     <translatetransform x="0" y="0"/>
    </transformgroup>
   </button.rendertransform>
  </button>
  <button horizontalalignment="left" margin="8,182,0,0" verticalalignment="top" width="60" height="31" content="button" x:name="button3" rendertransformorigin="0.5,0.5">
   <button.rendertransform>
    <transformgroup>
     <scaletransform scalex="1" scaley="1"/>
     <skewtransform anglex="0" angley="0"/>
     <rotatetransform angle="0"/>
     <translatetransform x="0" y="0"/>
    </transformgroup>
   </button.rendertransform>
  </button>
 </grid>
</window>







Expression  >  Expression Blend + SketchFlow



Comments

Post a Comment

Popular posts from this blog

Azure DocumentDB Owner resource does not exist

having same error microsoft.azure.documents.documentclientexception: message: {"errors":["owner resource not exist"]} , scenario. when deployed webapp azure , try document docdb throws error. docdb exists in azure , contains document looking for. weird local machine(running vs) works fine. i'm using same settings in azure , local. have , idea this. thanks Microsoft Azure  >  Azure Cosmos DB
Read more

RFC_ERROR_SYSTEM_FAILURE with SAP ECC 6 Unicode

hi all, i using biztalk 2006 r2, microsoft biztalk adapter v2.0 mysap business suite sp1 & sql server 2005 database server. we have developed orchestrations communicating sap version 4.7.   currently sap has been upgraded in ecc 6(unicode) system. i have configured new send port on dev server. orchestration can communicate sap ecc 6.0 (non- unicode) system while trying connect sap ecc 6.0 (unicode) getting error. a message sent adapter "sap" on send port "ecc 6 sendport" uri "sap://as:***.**.***.***/**/***/" suspended.   error details: rfc_error_system_failure   messageid:   {b7dd677e-0ef3-480b-835a-d389f2e24179} is there can configure setting unicode ?   thanks in advance     ajay dabhade problem solved: standard table data types appear not unicode compatible in sap ecc 6.0. make rfcgetfunctiondesc raise error. solution: used other data types scratch in rfcs in sap   ajay dabhad...
Read more

C# System.Data.Common DbCommand and getting Datasets from Oracle

i found no oracle specific forum area, decided post here. getting dataset oracle c# system.data.common library's dbcommand seems tricky task. i using command object in project along dbproviderfactory , dbdataadapter because meant allow use same library multiple database providers, , don't have clutter data access layer of project separate classes accessing each individual database provider. my problem is, stored procedures fetching data oracle require refcursor object added in parameters. however, dbtype library not contain definition object. using "object"-type not work. i have read many places not have add refcursor parameter, endless failed attempts @ running command without refcursor object has brought me conclusion leaving out refcursor object not option when using system.data.common library. here coded example connectionstring purposefully left out.                 dbconnection.ope...
Read more