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

Question

我正在尝试为我构建的用户控件添加翻转动画。该用户控件很简单，它有一个87x87的图片正反面和一些属性。它应该代表我正在为娱乐而开发的游戏中的一个方块。我正在尝试通过代码实现用户从牌堆中选择方块时的翻转效果。我觉得我需要通过代码来完成这个目标，而不是使用XAML，原因有两个：1.在方块翻转后还有另一个变换来旋转方块（当前正在工作）2.在方块翻转后，我想取消事件的挂钩。

我遇到的问题是方法退出后只有最后一个动画运行。我认为我需要一个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();
    }

我将flip拆分为两个独立的方法，因为我认为这样可以帮助解决我遇到的问题。

- Mike

Answer 1

哇，这个好久没有更新了……以防有人在追踪这个问题：

问题在于你没有等待“翻转前面”动画完成，就立即开始“翻转后面”-现在由于你基本上是强制跳转Y角度动画立即到90度，所以看起来它不像是正确地触发。

有很多方法可以解决这个问题-首先想到的是DoubleAnimation上有一个叫做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();
}

- JerKimball