c# - Smooth animation in expression blend for window store apps from png images -
i want make animation in expression blend windows store apps .gif images not supported. have approx 30 png images. made storyboard animation in blend changing image source after every 2 sec in timeline. when plays, not smooth animation. looks changing images , not animation.
is there way make smooth animation images?
so requested, quick (very quick, took me 2 minutes) example of stick figure animation xaml instead of dirty .gif consideration.
put in blah.resources or resourcedictionary or wherever can accessed from.
<storyboard x:name="runner" repeatbehavior="forever"> <pointanimation duration="0:0:0.5" to="4.99999999999989,133.75" storyboard.targetproperty="(path.data).(pathgeometry.figures)[0].(pathfigure.startpoint)" storyboard.targetname="path" d:isoptimized="true"/> <pointanimation duration="0:0:0.5" to="112,66.7500000000001" storyboard.targetproperty="(path.data).(pathgeometry.figures)[0].(pathfigure.segments)[0].(linesegment.point)" storyboard.targetname="path" d:isoptimized="true"/> <pointanimation duration="0:0:0.5" to="220.505569458008,77.7705929875374" storyboard.targetproperty="(path.data).(pathgeometry.figures)[0].(pathfigure.segments)[1].(linesegment.point)" storyboard.targetname="path1" d:isoptimized="true"/> <pointanimation duration="0:0:0.5" to="173.586108723494,5.00000001880543" storyboard.targetproperty="(path.data).(pathgeometry.figures)[0].(pathfigure.segments)[0].(linesegment.point)" storyboard.targetname="path1" d:isoptimized="true"/> <pointanimation duration="0:0:0.5" to="48.9420914649963,5" storyboard.targetproperty="(path.data).(pathgeometry.figures)[0].(pathfigure.segments)[0].(linesegment.point)" storyboard.targetname="path2" d:isoptimized="true"/> <pointanimation duration="0:0:0.5" to="5.00000052765249,44.9094460223772" storyboard.targetproperty="(path.data).(pathgeometry.figures)[0].(pathfigure.segments)[1].(linesegment.point)" storyboard.targetname="path2" d:isoptimized="true"/> <pointanimation duration="0:0:0.5" to="135.878524780273,59.7591686248779" storyboard.targetproperty="(path.data).(pathgeometry.figures)[0].(pathfigure.segments)[0].(linesegment.point)" storyboard.targetname="path3" d:isoptimized="true"/> <pointanimation duration="0:0:0.5" to="196.118402541036,5.00000015967233" storyboard.targetproperty="(path.data).(pathgeometry.figures)[0].(pathfigure.segments)[1].(linesegment.point)" storyboard.targetname="path3" d:isoptimized="true"/> <pointanimation duration="0:0:0.5" to="101.402907534456,58.195006776908" storyboard.targetproperty="(path.data).(pathgeometry.figures)[0].(pathfigure.startpoint)" storyboard.targetname="path2" d:isoptimized="true"/> <pointanimation duration="0:0:.5" to="64.2758475618351,35.4987322655051" storyboard.targetproperty="(path.data).(pathgeometry.figures)[0].(pathfigure.startpoint)" storyboard.targetname="path3" d:isoptimized="true"/> </storyboard> then in view;
<grid background="white"> <i:interaction.triggers> <i:eventtrigger> <ei:controlstoryboardaction storyboard="{staticresource runner}"/> </i:eventtrigger> </i:interaction.triggers> <path x:name="path3" height="160.716" margin="313.796,154.169,285.086,0" stroke="black" strokethickness="10" uselayoutrounding="false" verticalalignment="top" rendertransformorigin="0.5,0.5"> <path.data> <pathgeometry fillrule="evenodd"> <pathfigure isfilled="true" isclosed="false" startpoint="51.2207794189453,32.3985824584961"> <linesegment point="4.41558456420898,99.835205078125"/> <linesegment point="63.584415435791,156.032379150391"/> </pathfigure> </pathgeometry> </path.data> <path.rendertransform> <compositetransform rotation="21.252" translatex="-9.5494494746518086" translatey="23.183271200406807"/> </path.rendertransform> </path> <path x:name="path2" margin="342.739,208.746,327.779,384.462" stroke="black" strokethickness="10" uselayoutrounding="false" rendertransformorigin="0.5,0.5"> <path.data> <pathgeometry fillrule="evenodd"> <pathfigure isfilled="true" isclosed="false" startpoint="112.702774047852,78.4745101928711"> <linesegment point="65.897575378418,145.9111328125"/> <linesegment point="125.06640625,202.108306884766"/> </pathfigure> </pathgeometry> </path.data> <path.rendertransform> <compositetransform rotation="-76.626" translatex="12.265006431668212" translatey="-58.269041404375344"/> </path.rendertransform> </path> <path data="m388.25,194.5 l393.25,354.5" horizontalalignment="left" height="170" margin="383.25,189.5,0,0" stretch="fill" stroke="black" strokethickness="10" uselayoutrounding="false" verticalalignment="top" width="15"/> <path x:name="path" margin="280.25,352.75,292.75,308.5" stroke="black" strokethickness="10" uselayoutrounding="false"> <path.data> <pathgeometry fillrule="evenodd"> <pathfigure isfilled="true" isclosed="false" startpoint="222,105"> <linesegment point="207,18.25"/> <linesegment point="111,5"/> </pathfigure> </pathgeometry> </path.data> </path> <path x:name="path1" margin="299.174,327.089,275.32,329.932" stroke="black" strokethickness="10" uselayoutrounding="false" rendertransformorigin="0.5,0.5"> <path.data> <pathgeometry fillrule="evenodd"> <pathfigure isfilled="true" isclosed="false" startpoint="75,10.9790048599243"> <linesegment point="81,88.97900390625"/> <linesegment point="5,137.97900390625"/> </pathfigure> </pathgeometry> </path.data> <path.rendertransform> <compositetransform rotation="18.776" translatex="-4.6741916229154441" translatey="22.292244528395429"/> </path.rendertransform> </path> <ellipse height="76" margin="349,110,368,0" stroke="black" strokethickness="10" verticalalignment="top" fill="black"/> </grid> so re-iterate, quick , dirty example made in blend in less 2 minutes, give idea, , imagine how cool make stuff if spent more 2 minutes :)
hope helps, best of luck...
Comments
Post a Comment