Выполнение анимации Flip полностью через код WPF

Question

Я пытаюсь добавить флип-анимацию в созданный мной элемент управления. Пользовательский элемент управления прост, он имеет изображение 87x87 спереди и сзади и некоторые свойства. Предположим, я представляю плитку в игре, над которой я работаю ради забавы. Я пытаюсь анимировать эффект, когда пользователь выбирает плитку из колоды. Я чувствую, что мне нужно сделать это с помощью кода вместо xaml по двум причинам: 1. Существует другое преобразование после переворачивания плитки для поворота плитки (в настоящее время работает) 2. После переворачивания плитки я хочу отцепить событие.

Проблема, которую я получаю, заключается в том, что только последние анимации запускаются после выхода из метода. Я думаю, что мне нужен раскадровка, но все примеры, на которые я смотрел, сбили меня с толку двумя способами:

Как я могу изменить изображение в середине сюжета и как установить 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 есть метод с именем 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();
}