anximxactdion

7/27/2019 Anximxactdion

1/35

Animao noSilverlight

Jos Antnio da Cunha

IFRN

14/12/2012 [email protected]


2/35

Animao no Silverlight

A plataforma Silverlight permite a adio de efeitos visuais dinmicos atravs daintroduo de animaes. Uma animao pode ser vista como uma iluso, criada pela

passagem rpida de um conjunto de imagens, onde cada uma ligeiramente diferente

da anterior.



3/35

Animao

Entendendo como a Animao funciona no Silverlight

Muitas vezes, uma animao pensada como uma srie de quadros. Para executar

a animao, esses quadros so apresentados um aps o outro.

Essencialmente, uma animao uma maneira de modificar o valor de uma

propriedade de dependncia durante um intervalo de tempo. Por exemplo, para criar

um boto que aumenta e diminui, voc pode modificar sua propriedade Largura

(Width).

Para um objeto brilhar, voc pode alterar as propriedades do LinearGradientBrush

que ele usa. O segredo para criar a animao correta determinar quais

propriedades voc precisa modificar.



4/35

Animao

As regras de Animao

Voc precisa estar ciente das seguintes regras fundamentais:


Animao do Silverlight so baseadas no tempo. Voc define o

estado inicial, o estado final, e a durao de sua animao. O Silverlight

calcula a taxa de quadros.

Animao age sobre propriedades. A animao do Silverlight pode

fazer apenas uma coisa: modificar o valor de uma propriedade em um

intervalo de tempo.

Cada tipo de dado exige uma classe de animao diferente. Por

exemplo, a propriedade Button.Width usa o tipo de dados double. Para

anim-lo, voc usa a classe DoubleAnimation.


5/35

Animao

Criando uma animao simples

Criar uma animao um processo de mltiplas etapas. Voc precisa criar trs

componentes distintos: um objeto para realizar a sua animao, um storyboard para

gerenciar sua animao, e um manipulador de evento (um gatilho de eventos) para

iniciar o seu storyboard.



6/35

Animao

A Classe de animao

O Silverlight inclui dois tipos de classes de animao. Cada tipo de animao utiliza

uma estratgia diferente para o valor de variveis :

Linear interpolation(Interpolao linear): O valor da propriedade varia suavemente e

continuamente ao longo da durao da animao. O Silverlight inclui trs classes:

DoubleAnimation, PointAnimation e ColorAnimation.

Key-frame animation: Os valores podem saltar repentinamente de um valor paraoutro, ou eles podem combinar saltos e perodos de interpolao linear. O silverlight

inclui quatro classes: ColorAnimationUsingKeyFrames,

DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, e

ObjectAnimationUsingKeyFrames.



7/35

Animao

As animaes so definidas usando marcao XAML. Por exemplo, veja o exemplo

para criar uma DoubleAnimation.

Esta animao dura 5 segundos (conforme indicado pela propriedade Durao, que

tem um valor de tempo no formato horas: minutos: Segundos.FraoSegundos).

Enquanto a animao est sendo executada, ela muda o valor-alvo 160-300. Esta

mudana ocorre de forma suave e contnua, porque o DoubleAnimation usa a

interpolao linear.



8/35

Animao

A classe Storyboard

O Storyboard gere a linha do tempo da sua animao. Voc pode usar um storyboard

para agrupar vrias animaes, e tambm tem a capacidade de controlar a

reproduo da animao paus-la, interromp-la e alterar sua posio.

Mas a caracterstica mais bsica fornecida pela classe Storyboard a suacapacidade de apontar para uma determinada propriedade de um elemento

especfico usando as propriedades TargetProperty. Em outras palavras, o

storyboard faz a ponte entre a animao e a propriedade que voc deseja animar.



9/35

Animao

Veja um exemplo que define como um storyboard aplica um DoubleAnimation para a

propriedade Widthde um retngulo chamado rct.


10/35

Animao

Iniciando uma animao com evento Trigger


11/35

Animao

Iniciando uma animao com cdigo


12/35

Animao

Configurando as propriedades da animao

From valor inicial da animao. No exemplo anterior, a animao inicia com 160

pixels.

TO valor final da animao. No exemplo anterior, a animao inicia com 300

pixels.

By Ao invs de usar TO, voc pode usar a propriedade By. A propriedade By

usada para criar uma animao que altera um valor por um valor definido, ao invs

de um alvo especfico. Por exemplo, voc pode criar uma animao que amplia um

boto por 10 pixels mais do que seu tamanho atual, como mostrado aqui:

Duration A propriedade Duration, define o intervalo de tempo entre o momento do

incio da animao e o final.



13/35

Animao

RepeatBehavior

A propriedade RepeatBehavior permite que voc controle como uma animao se

repete. Se voc deseja repetir um determinado nmero de vezes, indicar o nmero de

vezes para repetir, seguido por um x. Por exemplo, essa animao se repete duas

vezes:



14/35

Animao

Animaes simultneas

A classe Storyboard tem a capacidade de manter mais do que uma animao. Melhor

de tudo, essas animaes so gerenciados como um grupo. O que significa que

comearam ao mesmo tempo.



15/35


16/35

Animao

Easing Function

Antes de considerar as funes easing, importante compreender quando uma

funo de easing aplicada.

Cada classe (funo) Easing deriva de EasingFunctionBase e herda uma

propriedade nica chamada EasingMode. Esta propriedade tem trs valores

possveis: EasingIn (o que significa que o efeito aplicado para o incio da

animao), EaseOut (que significa que aplicada ao final), e EaseInOut (quesignifica que aplicada tanto no incio e no final).



17/35

Animao

Easing Function

Em animaes que usam interpolao linear, o crescimento e o encolhimento

acontecem de forma constante e mecnica. Para um efeito mais natural, voc pode

adicionar a funo de atenuao. O exemplo a seguir adiciona uma funo de

atenuao chamado ElasticEase. O resultado final que o boto se move como uma

molas, oscilando para trs e para frente, sobre seu tamanho. O movimento elstico,

diminue gradualmente, at parar depois de dez oscilaes. Vejam que quem controla

as oscilaes a propriedade oscillation.



18/35

Animao

Easing Function

A easing function requer muito menos trabalho do que outras abordagens, comoanimao baseada em quadros. Basta voc definir a propriedade EasingFunction de

um objeto de animao.



19/35

Animao

Easing Function (Outras propriedades)

EBackEase;

lasticEase;

BounceEase;

CircleEase;

CubicEase;

QuadraticEase;

QuarticEase;QuinticEase;

SineEase;

PowerEase;

ExponentialEase.

Veja os exemplos no site: http://tinyurl.com/animationeasing



20/35

Animao

TransformaoQuando voc usa as transformaes, no apenas altera os limites de um elemento.

Em vez disso, voc pode alterar, inverter, distorcer, esticar, ampliar, encolher, ou

rotacionar o elemento.

private void Button_MouseEnter(object sender, MouseEventArgs e)

{

rotateStoryboard.Begin();

}



21/35

Animao

Transformao


22/35

Animao

Projees e Perspectivas

Assim como voc pode animar e transformar, voc tambm pode animar projees

em perspectiva, ou seja, a classe PlaneProjection permite simular uma superfcie

plana, ttulo 3-D, etc. Por exemplo, imagine que voc tenha um grupo de elementos

envolvidos em um controle Border, e que usa uma border PlaneProjection, como

mostro aqui:

Veja a animao com a projeo a seguir:



23/35

Animao

Projees e Perspectivas



24/35

Animao

Animaes Brushes

Animaes Brushes uma outra tcnica comum em animaes em Silverlight, e tofcil como animar transformaes. Novamente, a tcnica consiste em modificar uma

sub-propriedade que voc deseja mudar, usando o tipo de animao adequadas.

No exemplo, o ponto central do gradiente radial deriva ao longo da elipse, dando-lhe

um efeito tridimensional. Ao mesmo tempo, a cor exterior do gradiente muda de azul

para preto



25/35

Animao

Animaes Brushes para o exemplo anterior



26/35

Animao

Animao Pixel Shaders

Pixel shaders um recurso interessante, mas apenas ocasionalmente til. Mas

combinado com animao, eles se tornam muito mais verstil. Voc pode us-los

para criar efeitos impressionantes interatividade com o usurio (por exemplo,

aumentando o brilho em um boto quando o usurio move o mouse sobre ele). O

melhor de tudo, voc pode animar as propriedades de um pixel shader to facilmente

como voc animar qualquer outra coisa.



27/35

Animao

Animating Brushes


A i


28/35

Animao

Animao por key-Frame

A animao key-Frame uma animao que feita de muitos pequenos segmentos.Cada segmento representa um valor inicial, final ou intermedirio na animao.

Quando voc executa a animao, move-se suavemente de um valor para outro.

Veja o exemplo usando PointAnimatio.


A i


29/35

Animao

O exemplo anterior usando key-Frame

Esta animao inclui dois key-Frames. O primeiro define o valor dos pontos quando a

animao comea. O segundo key-Frame define o valor final, que alcanado aps

10 segundos. O objeto PointAnimationUsingKeyFrames executa uma interpolao

linear para mover-se suavemente a partir do valor de 1 key-Frame para o segundo,

assim como faz PointAnimation para ir de From pata To.


A i


30/35

AnimaoExemplo usando key-Frame


A i


31/35

Animao

Discrete key-Frame

A animao por key-Frame que voc viu nos exemplos anteriores usava key frameslinear. Como resultado, a transio entre os valores dos key-frame suave. Outra

opo usar Discrete key frames. Neste caso, a animao feita sem interpolao.

Quando o key time atingido, a propriedade muda abruptamente para o novo valor.


A i


32/35

Animao

Exemplo usando Discrete key-Frame


A i


33/35

Animao

Exemplo usando Easing key-Frame


A i


34/35

Animao

Spline key-Frame

Como os Linear Key Frames, Spline key frames usam interpolao para moversuavemente de um valor chave para o outro. A diferena que cada spline key

frame esporte uma propriedade KeySpline. Usando a propriedade KeySpline, voc

define uma curva de Bzier cbica que influencia como modo de interpolao

executada.


A i


35/35

Animao

Exemplo usando Spline key-Frame

14/12/2012 35jose cunha@ifrn edu br

anximxactdion

Documents