Размер кнопки анимации, затем возврат к нулю

Question

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

1 - Показать кнопку с BackgroundColor x. (Кнопка теперь имеет Width из null, свойство ActualWidth имеет значение.)

2 - Создайте двойную анимацию, которая изменяет ширину кнопки на ноль.

DoubleAnimation widthAnimation = new DoubleAnimation();
widthAnimation.From = this.ActualWidth;
widthAnimation.To = 0;
widthAnimation.SpeedRatio = 3;
widthAnimation.Duration = TimeSpan.FromMilliseconds(800);

3- Изменить цвет фона кнопки.

ColorAnimation colorAnimation = new ColorAnimation();
colorAnimation.From = State ? _xColor : _yColor;
colorAnimation.To = State ? _yColor : _xColor;
colorAnimation.BeginTime = TimeSpan.FromMilliseconds(400);
colorAnimation.Duration = TimeSpan.Zero;

4- Вернуть ширину обратно к исходному значению.

widthAnimation.AutoReverse = true;

Проблема заключается в том, что при анимации, выполняемой дважды, анимация читает this.ActualWidth во время анимации, что приводит к сбою до исходной ширины. Как я могу решить это? Я хотел бы снова установить Width на null, но мне это кажется невозможным.

Answer 1

Вам лучше использовать стиль и шаблон xaml, чтобы "объявить", что вы хотите, и позволить WPF / Silverlight позаботиться обо всем.

Если вы пытаетесь сделать то же самое с помощью кода, вы можете сделать это, но вам нужно знать, что делает фреймворк за кулисами.

В основном вы можете установить - Стиль для определения значений некоторых свойств элемента управления - DataTemplate для определения визуального представления содержимого элемента управления - ControlTemplate для определения внешнего вида элемента управления

Каждый из них может иметь триггеры - Триггеры собственности установить свойства или запустить действия, такие как анимация при изменении значения свойства или при возникновении события;

• EventTriggers и раскадровки запустить набор действий в зависимости от наступления события

Если вы хотите узнать о стиле и шаблоне XAML, взгляните на http://msdn.microsoft.com/en-us/library/ms745683.aspx Потратьте день, чтобы научиться и сэкономить много часов (или дней) проб и ошибок и разочарований!

Чтобы перейти прямо к делу, в вашем случае, я думаю, вам следует использовать раскадровку. См http://msdn.microsoft.com/en-us/library/ms742868.aspx где вы также можете найти кодовый эквивалент примеров XAML

Answer 2

Я пришел к идее нацелиться на MaxWidth вместо фактического Width.Теперь я использую KeyFrameCollection, который устанавливает MaxWidth в int.MaxValue в начале (а также в конце при использовании автореверс)

Он будет работать нормально, пока не появятся телефоны с разрешением, превышающим максимальное значение int.

Код:

DoubleAnimationUsingKeyFrames widthAnimation = new DoubleAnimationUsingKeyFrames();
widthAnimation.KeyFrames.Add(new DiscreteDoubleKeyFrame()
{
    KeyTime = TimeSpan.Zero,
    Value = int.MaxValue,
});
widthAnimation.KeyFrames.Add(new LinearDoubleKeyFrame()
{
    KeyTime = TimeSpan.FromMilliseconds(1),
    Value = ActualWidth,
});
widthAnimation.KeyFrames.Add(new LinearDoubleKeyFrame()
{
    KeyTime = TimeSpan.FromMilliseconds(400),
    Value = 0,
});
widthAnimation.Duration = TimeSpan.FromMilliseconds(400);
widthAnimation.AutoReverse = true;