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?

.Gif animation style, ouch. Can I ask what it is you're animating? It may turn out you didn't even need to do it that way by flipping through individual image files. Sounds like it may be being over-complicated. Also, you might share your attempt so far. — Chris W., Mar 10 '14 at 19:44
I use pivot animator software stykz. I make just a walking animation of about 30 frames then export it to sequence of png images . Then i tried to make make story board animation in blend. Am I right or you could suggest a better way or to make a video file like wma etc ? Thanks for replying. — user3090763, Mar 10 '14 at 20:56
Ya it's likely if you want to show the animation. One of the cool things about animating with XAML is you can fill in the blanks automatically on a lot of things and likely omit image files all together to accomplish the same thing. — Chris W., Mar 10 '14 at 20:59
can you give any example or sample link where I can follow from there — user3090763, Mar 10 '14 at 21:04
There's numerous tutorials out on the web on sites/blogs/youtube/msdn, etc. Except you haven't shared any specifics of what you're trying to do (what animation are you trying to do, "walking" animation is a bit broad terminology) so it's a bit difficult to give a more specific example related directly to what you're trying to accomplish. :) — Chris W., Mar 10 '14 at 21:06
I just want to animate a boy to perform some tasks like walking,eating,waking up etc . Just want to show this through animation for this i use pivot animator app . — user3090763, Mar 10 '14 at 21:09

score 1 · Accepted Answer · answered Mar 11 '14 at 03:45

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...

score 0 · Answer 2 · answered Mar 10 '14 at 20:10

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.

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

2 Answers2

Linked