Nesta postagem irei mostrar duas coisas interessantes em WPF: como é fácil fazer uma animação e como podemos dar um efeito interessante, mais realista a ela, de maneira muito simples.

Uma animação em WPF é criada usando-se um Storyboard. Nele colocamos os efeitos de animação que queremos dar a um elemento do desenho. Um efeito de animação pode ser gerado, por exemplo, com o DoubleAnimation. O DoubleAnimation, como o nome já diz, anima uma propriedede do objeto que tem tipo Double, como por exemplo a posição (Canvas.Left ou Canvas.Top).

O seguinte código faz que uma elipse fique ziguezagueando na janela quando ela é carregada:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse Width="100" Height="100" Fill="Red">
    <Ellipse.Triggers>
      <EventTrigger RoutedEvent="Ellipse.Loaded">
        <BeginStoryboard>
          <Storyboard >
            <DoubleAnimation From="300" To="0" RepeatBehavior="Forever"
               AutoReverse="True" Duration="0:0:0.5"
               Storyboard.TargetProperty="(Canvas.Top)" />
            <DoubleAnimation From="0" To="600" RepeatBehavior="Forever"
               Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:3"
               AutoReverse="True"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Ellipse.Triggers>
  </Ellipse>
</Canvas>

Esta linha anima a posição vertical (Canvas.Top), da posição 300 até a posição 0, com duração de 5 segundos. Esta animação é repetida indefinidamente e, ao final, o movimento é revertido

<DoubleAnimation From="300" To="0" RepeatBehavior="Forever" AutoReverse="True"  
  Duration="0:0:0.5" Storyboard.TargetProperty="(Canvas.Top)" />

A outra linha anima a posição horizontal, com duração de 3 segundos. A composição das duas animações faz com que a elipse fique fazendo um ziguezague até que a aplicação seja fechada. Mas isso não é tudo. Podemos ainda dar o efeito da gravidade à elipse, fazendo que ela simule uma bola pulando. Para isso usamos o DecelerationRatio. Esta propriedade varia entre 0 e 1 e irá dizer o percentual da animação que será desacelerada. Por exemplo, se o valor dela for 0.33, então o último terço do movimento será desacelerado. Para simularmos o efeito da gravidade, aplicamos o DecelerationRatio na animação da posição vertical:

<DoubleAnimation From="300" To="0" RepeatBehavior="Forever" AutoReverse="True"  
 Duration="0:0:0.5" Storyboard.TargetProperty="(Canvas.Top)" DecelerationRatio="1"/>

Com esta alteração simples, nossa animação que era um simples ziguezague, passa a simular uma bola pulando, com o efeito da gravidade.

3 Thoughts on “Animação com efeitos especiais

  1. Bruno, ótimos artigos!
    Que tal uns screenshots ?

    Abraço

  2. Boa idéia. Vou colocar alguns nos próximos artigos.

    Bruno

  3. Jhosep on April 13, 2010 at 1:56 pm said:

    muito bom, testei aqui funcionou certinho, tudo como escrito acima, gostaria muito de conheçer a windows……

Leave a Reply

Your email address will not be published. Required fields are marked *

Post Navigation