Smooth animation in expression blend for window store apps from png images

Question

I want to make animation in Expression Blend for Windows Store Apps as .gif images are not supported. So I have approx 30 png images. I made a storyboard animation in Blend by changing the image source after every 2 sec in timeline. But when it plays, it is not a smooth animation. It looks just as changing images and not like animation.

Is there any way to make smooth animation with images?

Answer 1

So as requested, a quick (VERY quick, like took me about 2 minutes) example of a stick figure animation with XAML instead of dirty .GIF for your consideration.

Put this in your blah.Resources or ResourceDictionary or wherever it can get 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 this in your 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 just to re-iterate, this is a very quick and dirty example made in Blend in less than 2 minutes, but it will give you an idea, and imagine how cool you could make stuff if you spent more than 2 minutes :)

Hope this helps, best of luck...

Answer 2

To have animation, you need to show many frames one after another with relatively high speed. The human eye sees something like 23 frames every second, so you need more than that to have smooth animation. Your idea of changing frames every 2 sec results in a framerate of 0.5, which is no longer an animation. Reduce the time between your frames to something like 0.05 seconds. Also, try to avoid sprite animation (frame animation, gif-style animation) altogether if possible.