wpf - 完全通过代码 WPF 执行翻转动画

Question

我正在尝试向我构建的用户控件添加翻转动画。用户控件很简单，它有一个 87x87 的前后图像和一些属性。它应该代表我正在玩的游戏中的一个瓷砖。我正在尝试为用户从甲板上挑选瓷砖的翻转效果制作动画。我觉得我需要通过代码而不是 xaml 来执行此操作，原因有两个:1. 翻转磁贴后还有另一个转换以旋转磁贴(当前正在工作) 2. 翻转磁贴后我想取消挂接事件。

我遇到的问题只是方法退出后运行的最后一个动画。
我想我需要一个 Storyboard，但我看到的所有例子都让我在两方面感到困惑:

如何更改图像中间 Storyboard，以及如何将 targetProperty 设置为
我一直在研究这两个博客。

http://www.codeguru.com/csharp/csharp/cs_misc/userinterface/article.php/c12221
http://blogs.msdn.com/tess/archive/2009/03/16/silverlight-wpf-flipimage-animation.aspx

    public void FlipFront()
    {
            DoubleAnimation flipfront = new DoubleAnimation(0, 90, new Duration(new     TimeSpan(0, 0, 1)));
        SkewTransform skew = new SkewTransform();
        this.RenderTransform = skew;
        skew.BeginAnimation(SkewTransform.AngleYProperty, flipfront);         


    }

    public void FlipBack()
    {

        ImageSourceConverter source = new ImageSourceConverter();
        this.ImageFace.Source = new BitmapImage(new Uri("Back.jpg", UriKind.Relative));

        DoubleAnimation flipfront = new DoubleAnimation(90, 0, new Duration(new TimeSpan(0, 0, 1)));
        SkewTransform skew = new SkewTransform();
        this.RenderTransform = skew;
        skew.BeginAnimation(SkewTransform.AngleYProperty, flipfront); 
    }

    public void Flip()
    {
        FlipFront();
        FlipBack();
    }

我将翻转分为两种不同的方法，因为我认为它有助于解决我遇到的问题。

Answer 1

哇，这已经很久没有更新了……以防万一有人跟踪这个:

问题是在立即开始“后翻”之前，您没有等待“前翻”动画完成 - 现在因为您基本上是将 Y 角动画立即强制跳转到 90 度，这就是为什么它看起来像没有正确射击。

有很多方法可以解决这个问题 - 首先想到的是 DoubleAnimation s 有一个方法叫做 CreateClock ，这将返回一个 AnimationClock目的。该对象具有 Completed事件，它会告诉您该动画何时“完成”。附加一个处理程序(请记住，您需要分离它以免泄漏内存)，并在那里调用您的“开始向后翻转”方法。我把一些非常低效的东西放在一起，但它会显示原理:

public AnimationClock StartFlipFrontAnimation()
{
    this.ImageFace.Source = _frontFace;
    DoubleAnimation flipfront = new DoubleAnimation(0, 90, new Duration(new TimeSpan(0, 0, 3)));
    SkewTransform skew = new SkewTransform();
    this.RenderTransform = skew;
    skew.BeginAnimation(SkewTransform.AngleYProperty, flipfront);
    return flipfront.CreateClock();
}

public AnimationClock StartFlipBackAnimation()
{   
    this.ImageFace.Source = _backFace;
    DoubleAnimation flipfront = new DoubleAnimation(90, 0, new Duration(new TimeSpan(0, 0, 3)));
    SkewTransform skew = new SkewTransform();
    this.RenderTransform = skew;
    skew.BeginAnimation(SkewTransform.AngleYProperty, flipfront); 
    return flipfront.CreateClock();
}

public void BeginFlip()
{       
    var frontClk = StartFlipFrontAnimation();       
    frontClk.Completed += FrontFlipDone;        
}

private void FrontFlipDone(object sender, EventArgs args)
{
    var clk = sender as AnimationClock;
    if(clk != null)
    {
        clk.Completed -= FrontFlipDone;
    }
    var backClk = StartFlipBackAnimation();
}