WPF - Exemplo simples de animação seqüencial
-
19-09-2019 - |
Pergunta
Estou aprendendo sobre a animação WPF e estou confuso sobre como aplicar animações sequencialmente. Como um exemplo simples, tenho quatro retângulos em uma grade uniforme e gostaria de alterar a cor de cada um sequencialmente. Aqui está o que tenho até agora:
public partial class Window1 : Window
{
Rectangle blueRect;
Rectangle redRect;
Rectangle greenRect;
Rectangle yellowRect;
public Window1()
{
InitializeComponent();
blueRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Blue, Name="Blue"};
redRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Red, Name="Yellow"};
greenRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Green, Name="Green" };
yellowRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Yellow, Name="Yellow" };
UniformGrid1.Children.Add(blueRect);
UniformGrid1.Children.Add(redRect);
UniformGrid1.Children.Add(greenRect);
UniformGrid1.Children.Add(yellowRect);
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
animateCell(blueRect, Colors.Blue);
animateCell(redRect, Colors.Red);
}
private void animateCell(Rectangle rectangle, Color fromColor)
{
Color toColor = Colors.White;
ColorAnimation ani = new ColorAnimation(toColor, new Duration(TimeSpan.FromMilliseconds(300)));
ani.AutoReverse = true;
SolidColorBrush newBrush = new SolidColorBrush(fromColor);
ani.BeginTime = TimeSpan.FromSeconds(2);
rectangle.Fill = newBrush;
newBrush.BeginAnimation(SolidColorBrush.ColorProperty, ani);
//NameScope.GetNameScope(this).RegisterName(rectangle.Name, rectangle);
//Storyboard board = new Storyboard();
//board.Children.Add(ani);
//Storyboard.SetTargetName(rectangle, rectangle.Name);
//Storyboard.SetTargetProperty(ani, new PropertyPath(SolidColorBrush.ColorProperty));
//board.Begin();
}
Qual é a maneira mais fácil de conseguir isso? O código nos comentários é o meu primeiro palpite, mas não está funcionando corretamente.
Solução
Deve haver um evento ani.Completed
- Manuseie esse evento e inicie a próxima fase da animação, inicie a primeira em execução e cada fase acionará a próxima.
ColorAnimation ani = // whatever...
ani.Completed += (s, e) =>
{
ColorAnimation ani2 = // another one...
// and so on
};
newBrush.BeginAnimation(SolidColorBrush.ColorProperty, ani);
ATUALIZAR:
public partial class Window1 : Window
{
Rectangle blueRect;
Rectangle redRect;
Rectangle greenRect;
Rectangle yellowRect;
public Window1()
{
InitializeComponent();
blueRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Blue, Name = "Blue" };
redRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Red, Name = "Yellow" };
greenRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Green, Name = "Green" };
yellowRect = new Rectangle() { Fill = System.Windows.Media.Brushes.Yellow, Name = "Yellow" };
UniformGrid1.Children.Add(blueRect);
UniformGrid1.Children.Add(redRect);
UniformGrid1.Children.Add(greenRect);
UniformGrid1.Children.Add(yellowRect);
}
IEnumerable<Action<Action>> AnimationSequence()
{
for (; ; )
{
yield return AnimateCell(blueRect, Colors.Blue);
yield return AnimateCell(redRect, Colors.Red);
yield return AnimateCell(greenRect, Colors.Green);
yield return AnimateCell(yellowRect, Colors.Yellow);
}
}
private IEnumerator<Action<Action>> _actions;
private void RunNextAction()
{
if (_actions.MoveNext())
_actions.Current(RunNextAction);
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
_actions = AnimationSequence().GetEnumerator();
RunNextAction();
}
private Action<Action> AnimateCell(Rectangle rectangle, Color fromColor)
{
return completed =>
{
Color toColor = Colors.White;
ColorAnimation ani = new ColorAnimation(toColor,
new Duration(TimeSpan.FromMilliseconds(300)));
ani.AutoReverse = true;
ani.Completed += (s, e) => completed();
SolidColorBrush newBrush = new SolidColorBrush(fromColor);
ani.BeginTime = TimeSpan.FromSeconds(2);
rectangle.Fill = newBrush;
newBrush.BeginAnimation(SolidColorBrush.ColorProperty, ani);
};
}
}
Tente colar o seu programa acima. Faz o que você precisa, mas de uma maneira que pode ser útil para você em outros contextos. Ainda é orientado a eventos, mas usa um "método do iterador" (com retorno de rendimento) para criar a impressão de que é uma codificação seqüencial que bloqueia enquanto a animação está acontecendo.
O bom sobre isso é que você pode brincar com o método de sequência de animação de uma maneira muito intuitiva - você pode escrever a linha do tempo da animação em uma série de declarações, ou usar loops ou o que quiser.
Outras dicas
A solução que tentei é usar uma fila como assim. Isso permitirá que você adicione à cadeia de animação dinamicamente. Não tenho certeza se o bloqueio é necessário, mas deixei apenas para estar seguro.
Queue<Object[]> animationQueue = new Queue<Object[]>();
void sequentialAnimation(DoubleAnimation da, Animatable a, DependencyProperty dp)
{
da.Completed += new EventHandler(da_Completed);
lock (animationQueue)
{
if (animationQueue.Count == 0) // no animation pending
{
animationQueue.Enqueue(new Object[] { da, a, dp });
a.BeginAnimation(dp, da);
}
else
{
animationQueue.Enqueue(new Object[] { da, a, dp });
}
}
}
void da_Completed(object sender, EventArgs e)
{
lock (animationQueue)
{
Object[] completed = animationQueue.Dequeue();
if (animationQueue.Count > 0)
{
Object[] next = animationQueue.Peek();
DoubleAnimation da = (DoubleAnimation)next[0];
Animatable a = (Animatable)next[1];
DependencyProperty dp = (DependencyProperty)next[2];
a.BeginAnimation(dp, da);
}
}
}
Isso pode ser realizado usando uma classe com o nome contraditório ParallelTimeline
e ajustar cuidadosamente o BeginTime
propriedade. Nota no exemplo abaixo como o BeginTime
propriedade do segundo DoubleAnimation
está definido para a duração do primeiro.
<ParallelTimeline>
<DoubleAnimation
Storyboard.TargetName="FlashRectangle"
Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:1"/>
<DoubleAnimation BeginTime="0:0:0.05"
Storyboard.TargetName="FlashRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:2"/>
</ParallelTimeline>