流畅的动画表达混合窗口商店应用程序从png图像
本文关键字：应用程序 图像 png 窗口 混合 动画 | 更新日期: 2023-09-27 17:49:26
我想在Windows Store应用程序的表达式混合中制作动画，因为不支持。gif图像。我有大约30张png图片。我在Blend中制作了一个故事板动画，每隔2秒在时间轴上更改图像源。但是当它播放时，它并不是一个流畅的动画。它看起来就像在改变图像，而不像动画。
是否有任何方法使平滑的动画与图像?
因此，根据要求，一个快速(非常快，像我花了大约2分钟)的例子，用XAML而不是肮脏的。gif的简笔画动画供您考虑。
把这个放进你的废话里。
<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分钟，你可以做出多么酷的东西:)
希望这对你有帮助，祝你好运
要有动画，你需要以相对较高的速度一个接一个地显示许多帧。人眼每秒能看到23帧，所以你需要更多的帧来制作流畅的动画。你的想法是每2秒换一帧，结果是0.5帧，这不再是动画。将帧之间的时间减少到0.05秒。此外，如果可能的话，尽量避免精灵动画(帧动画，gif风格的动画)。