用于png图片的窗口存储应用程序的Expression Blend中的平滑动画 [英] Smooth animation in expression blend for window store apps from png images

问题描述

我想在Expression Store for Windows Store Apps中制作动画，因为不支持.gif图像.所以我有大约30 png图像.我在Blend中制作了故事板动画，方法是在时间轴上每2秒钟更改一次图像源.但是，当播放时，它不是平滑的动画.它看起来就像是在改变图像，而不是动画.

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?

推荐答案

因此，根据要求，提供了一个快速(非常快，就像我花了大约2分钟的时间)示例，其中包含XAML而不是脏.GIF的简笔画动画供您考虑.

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.

将其放在您的位置.Resources或ResourceDictionary或可以从任何位置访问它的地方.

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>

然后在您看来这

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

因此，仅重申一下，这是一个用Blend在不到2分钟的时间内完成的非常快速且肮脏的示例，但它会带给您一个想法，并想象一下，如果您花费超过2分钟的时间，您可以制作出多么酷的东西:)

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

这篇关于用于png图片的窗口存储应用程序的Expression Blend中的平滑动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！