我想在Expression Blend for Windows Store Apps中制作动画，因为不支持.gif图像。所以我有大约30个png图像。我在Blend中通过在时间线中每2秒更改一次图像源来制作故事板动画。但是当它播放时，它不是一个流畅的动画。它看起来就像改变图像而不是动画。
有没有办法用图像制作流畅的动画？
答案 0 :(得分：1)
根据要求，快速（非常快，就像我花了大约2分钟）使用XAML而不是脏.GIF的棒图动画示例供你考虑。
将它放在你的blah.Resources或ResourceDictionary中，或者从哪里可以访问它。
<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>
所以只是为了重新迭代，这是一个非常快速和肮脏的例子，在不到2分钟内在Blend中制作，但它会给你一个想法，并想象如果你花了超过2分钟，你可以制作多么酷的东西：）
希望这有帮助，祝你好运......
答案 1 :(得分：0)
要制作动画，您需要以相对较高的速度一个接一个地显示多个帧。人眼每秒钟会看到23帧，所以你需要更多才能拥有流畅的动画效果。您每2秒更换一次帧的想法会导致帧率为0.5，这不再是动画。将帧之间的时间缩短到0.05秒。另外，如果可能的话，尽量避免使用精灵动画（帧动画，gif风格的动画）。