2014-06-20 48 views
1

我試圖找出如何創建一個角色跨使用WPF故事板(類似於GIF動畫)的畫面走的動畫。WPF:走過屏幕動畫的角色?

我在行走動作的不同階段,我已經能夠做的最好的是使用混合顯示和在不同的時間不同的隱藏圖像中人物的多個圖像。由此產生的動畫並不特別流暢。

我可以使它更加平滑壓縮時間表,但我在想,如果有更好的或者更抽象的方式來處理呢?我搜索了,但找不到相關的教程或示例。

我看到下面的SO問題,但它仍然是我不清楚你會怎麼做:

+0

不是一個答案,但是當我需要做出一個角色走路一個直線,我剛剛製作了一個.gif並將它移動到屏幕上。非常簡單快捷的解決方案。但是如果你需要更復雜的東西,你可以嘗試在WPF中搜索精靈動畫,這個話題可以是密切相關的。 – icebat

+0

謝謝,不是一個壞主意。但我希望,使行走看起來自然它,據我瞭解,就需要在不同的位置上的人物的四肢不同的圖像。 – user783836

回答

1

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