Animação com efeitos especiais

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.