Animating multiple objects on a single path.
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
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