Question

我试图找出如何使用WPF故事板（类似于动画gif）创建一个穿过屏幕的角色动画。

我在步行动作的不同阶段有多个角色的图像，我能做的最好的就是使用Blend在不同的时间显示和隐藏不同的图像。结果动画不是特别顺利。

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

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

Answer 1

支持@icebat，sprite动画是可行的方法。

这里的优秀示例：http://www.spottedzebrasoftware.com/blog/xaml-spritesheet-animation.html

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

对于后代，示例中的代码类似于：

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

WPF：角色走过屏幕动画？

1 个答案: