道具@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