2014-06-20 47 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; 
}