道具@icebat,精灵动画是要走的路。
优秀这里例如:http://www.spottedzebrasoftware.com/blog/xaml-spritesheet-animation.html
从本质上讲,你得到的角色动画的不同阶段精灵表。然后把可填充页面上的图像刷一个WPF元素,并应用TranslateTransform的图像刷定期展示在精灵表不同的图像。
对于后人,从示例代码看起来是这样的:
XAML
<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
<Rectangle Width="52" Height="40">
<Rectangle.Fill>
<ImageBrush ImageSource="/Assets/Images/animations/sprite_sheet.png"
Stretch="None"
AlignmentX="Left"
AlignmentY="Top">
<ImageBrush.Transform>
<TranslateTransform x:Name="SpriteSheetOffset" X="0" Y="0" />
</ImageBrush.Transform>
</ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
代码背后
private const int NumberOfColumns = 1;
private const int NumberOfFrames = 8;
private const int FrameWidth = 54;
private const int FrameHeight = 40;
public static readonly TimeSpan TimePerFrame = TimeSpan.FromSeconds(1/60f);
private int currentFrame;
private TimeSpan timeTillNextFrame;
private void OnUpdate(object sender, object e)
{
this.timeTillNextFrame += TimeSpan.FromSeconds(1/60f);
if (this.timeTillNextFrame > TimePerFrame)
{
this.currentFrame = (this.currentFrame + 1 + NumberOfFrames) % NumberOfFrames;
var row = this.currentFrame % NumberOfColumns;
var column = this.currentFrame/NumberOfColumns;
this.SpriteSheetOffset.X = -column * FrameWidth;
this.SpriteSheetOffset.Y = -row * FrameHeight;
this.timeTillNextFrame = TimeSpan.FromSeconds(0);
}
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
this.navigationHelper.OnNavigatedTo(e);
CompositionTarget.Rendering += this.OnUpdate;
}
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
this.navigationHelper.OnNavigatedFrom(e);
CompositionTarget.Rendering -= this.OnUpdate;
}
不是一个答案,但是当我需要做出一个角色走路一个直线,我刚刚制作了一个.gif并将它移动到屏幕上。非常简单快捷的解决方案。但是如果你需要更复杂的东西,你可以尝试在WPF中搜索精灵动画,这个话题可以是密切相关的。 – icebat
谢谢,不是一个坏主意。但我希望,使行走看起来自然它,据我了解,就需要在不同的位置上的人物的四肢不同的图像。 – user783836