Silverlight 3 – Storyboard e Easing Animation

Colocado por Alexandre Tadashi na(s) categoria(s): Artigos do Blog, BounceEase, Easing Animation, Storyboard em 11 28th, 2009 | Sem comentários

Nesse artigo vamos utilizar os recursos chamados de Easing Animations. Com esse recurso podemos facilmente criar alguns tipos de animações direto no código XAML, neste exemplo estou utilizando um efeito chamado de bounce que vai simular uma queda, com efeito de gravidade, como se fosse uma bola caindo no chão.

<Storyboard x:Name="bounce">
    <DoubleAnimation From="0" To="100" Duration="0:0:3"
                     Storyboard.TargetName="btnCair"
                     Storyboard.TargetProperty="(Canvas.Top)">
    <DoubleAnimation.EasingFunction>
    <BounceEase
                EasingMode="EaseOut"
                Bounces="10"
                Bounciness="2">
    </BounceEase>
    </DoubleAnimation.EasingFunction>
  </DoubleAnimation>
</Storyboard>

O EasingMode pode receber os valores EaseOut, EaseIn e EaseInOut que define o modo de como será executado o efeito, e em Bounces e Bounciness são definida a quantidade do efeito e velocidade.

Vamos inserir um botão em nosso projeto e em seguida iniciar o Storyboard no evento click do botão. Segue abaixo o código do botão:

<Button x:Name="btnCair" Content="Cair"
                Canvas.Top="10" Canvas.Left="110"
                Width="180" Height="100"
                FontSize="30" Click="btnCair_Click" ></Button>

Executando o projeto e clicando no botão Cair, imediatamente o botão entra em queda com o efeito bounce.

BounceEase é somente um dos onze efeitos de animação disponíveis. Segue a lista completa, dentre eles temos BackEase, CircleEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase, QuarticEase, QuinticEase e SineEase, todos eles mudam a forma de como a animação é executada.

Silverlight 3 – Storyboard e Easing Animation is a post from: silverlight.net.br