WPF：角色走过屏幕动画？答案

【问题标题】：WPF: character walking across screen animation?WPF：角色走过屏幕动画？
【发布时间】：2014-06-21 14:11:02
【问题描述】：

我正在尝试研究如何使用 WPF 故事板（类似于动画 gif）创建角色在屏幕上行走的动画。

我在行走动作的不同阶段有多个角色图像，我能做的最好的事情就是使用 Blend 在不同时间显示和隐藏不同的图像。生成的动画不是特别流畅。

我可以通过压缩时间线使其更平滑，但我想知道是否有更好或更抽象的方法来解决这个问题？我已经搜索过，但找不到相关的教程或示例。

我已经看到以下 SO 问题，但我仍然不清楚您将如何做到这一点：

【问题讨论】：

不是一个答案，但是当我需要让一个角色走直线时，我只是制作了一个 .gif 并将其设置为在屏幕上移动。非常简单快速的解决方案。但是如果你需要更复杂的东西，你可以尝试在 WPF 中搜索精灵动画，这个主题可以密切相关。
谢谢，这个主意不错。但我希望让行走看起来更自然，据我所知，这需要角色的四肢处于不同位置的不同图像。

标签： wpf xaml animation

【解决方案1】：

@icebat 的道具，精灵动画是要走的路。

这里有很好的例子：http://www.spottedzebrasoftware.com/blog/xaml-spritesheet-animation.html

基本上，您会得到一张包含角色不同动画阶段的精灵表。然后在页面上放置一个可以用 ImageBrush 填充的 WPF 元素，并将 TranslateTransform 应用到 ImageBrush 以在 sprite sheet 上定期显示不同的图像。

对于后代，示例中的代码如下所示：

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;
}

【讨论】：