8 passos para construir uma animação "Wave" no silverlight

Assunto:

Neste artigo veremos um pouco sobre como usar algumas funcionalides do Microsoft Expression Blend 3, a partir da criação de uma animação que aqui estou chamando de "Wave".

Introdução
:

A cada dia, as aplicações ricas vem avançando no cenário do desenvolvimento. Com a implementação do WPF e a crição do Silverlight a Microsoft possibilitou
, com o seu incrivel pacote de ferramentas, que nós desenvolvedores ingressássemos nesse universo RIA. Aplicações de interfaces ricas são famosas por sua riquesa em animação e designer. Nesta primeira participação, gostaria de colaborar com o grupo demonstrando como criar uma animação no silverlight que simula um enfeito "wave" (onda). Para isso, usaremos os recursos do Microsft Expression Blend 3 para nos auxiliar na construção desta animação. Vamos lá?!

Passo à passo

1. Primeiramente, abra o Microsoft Expression Blend (estou usando a versão 3) e crie um novo projeto silverlight. Em seguida, selecione o elemento layoutRoot e mude a cor do background para preto (#FF000000).
O resultado será este:


2. Agora selecione a ferramenta Pen e faça um traço no LayoutRoot. Para isto, selecione
um ponto da margem esquerda do com a ferramenta PenGrid, pressione a tecla shift e clique na outra margem. O resultado sera este:

Obs:O nome do elemento está como Path. na palheta Brush, altere a propriedade fill para "No brush" e altere a cor do stoke para #FF83B1FF.

3. O próximo passo é transformar esta linha. Selecione a ferramenata Direct Selection (A) e pressionando a tecla Alt, clique sobre a linha, e arraste o ponteiro para criar uma curva. Posteriormente, aparecerão dois pontos que servem para criar curvas nas extremidades. A sequência deve ser esta:

a) Cuvar a linha


b) Curvar as extremidades:


c) O resultado final parecerá com este:


4. Selecione este elemento (path) copie-o e cole-o. Após este procedimento, você terá uma cópia deste elemento path sobreposto ao outro. Não o retire desta posição. Para assegurar isto, você pode agrupá-los em uma Grid ou canvas. É só selecionar os dois elementos ir com botão direito e selecionar a opção group into.


5. Copiado o elemento você selecionará o primeiro, na paleta Objects and Timeline, e aplicará um effeito BlurEffect. Para isto, basta ir na Paleta Properties / Appearance / Effect, clicar em New e escolher a opção

BlurEffect. Logo após, mude as propriedades Radius e StrokeThickness. como indicado abaixo.

O resultado será este:


6. Iremos agora fazer a animação. Selecione os dois elementos paths e crie um novo storybord.



Selecione no timeline a posição 0 e clique no botão RecordKeyFrame, como indicado na imagem abaixo:



7. Agora, com os dois elementos Path selecionados e na posição 0 do Timeline aplique o gradiente na propriedade Stroke comoindicado na imagem abaixo:

Obs: É importante que você mude a direção do gradiente. Nativamente ele é colocado na posição vertical. Voce deverá mudá-lo para a posição horizontal. Para isto, use a ferramenta Gradiente Tool (G). Outro fato importante é a transparência do Gradiente. Na posição 0 do timeline ele será predominante. Procure deixar este gradiente como indicado na paleta Brushes na imagem acima.


8. Agora vamos concluir a animação: Com os dois elementos path selecionados, você selecionará a posição 1 do timeline e mudará o Gradiente da propriedade Stroke, deixando predominate, não a transparência, mas sim a cor azul. Pronto, aí está! É so clicar no botão play e o efeito deverâ ficar parecido como no exemplo abaixo:





Espero que esta dica ajude aos colegas desenvolvedores.

Aprofunde seus conhecimentos sobre este tema na comunidade Silverlight

Yan Justino


Exibições: 434

Comentar

Você precisa ser um membro de DevBrasil para adicionar comentários!

Entrar em DevBrasil

Comentário de Diego Silva em 23 novembro 2010 às 7:37
Ótimo tutorial e de fácil execução.
Muito bom Yan, o Silverlight está com tudo .
Comentário de Claudio Soares da Costa Junior em 18 julho 2010 às 0:25
Boa noite, achei fantastico o tutorial porem não consegui fazer a parte do 7, quando eu eu coloco o degrade ele não funciona... ele não oculta o tracejado...:( , poderia me dizer a onde estou errando ? pode me responder pelo email clacostta@hotmail.com

[]´s
Comentário de Plinio Oliveira em 26 março 2010 às 13:34
Legal rapaz!
Se voce bolar uma video aula sobre o aplicativo, eu compro.
Eu topo comprar.
Comentário de Herbert Agles da Silva em 26 fevereiro 2010 às 16:29
show de bola simples, rapido e facil
ja estou esperando o proximo!!!!
valeu
Ab+
Comentário de Yan de Lima Justino em 26 fevereiro 2010 às 14:23
Obrigado pelos comentários! Fico feliz em poder compartilhar minha experiêcia com a comunidade. Valeu!!!
Comentário de Adriano Lisboa Corrêa em 26 fevereiro 2010 às 11:05
Excelente artigo mesmo, parabéns
Na espera dos próximos.
Comentário de Thiago Oliveira em 26 fevereiro 2010 às 7:15
Bacana o post

Parabéns
Comentário de Anderson Bezerra Castro Sá em 25 fevereiro 2010 às 19:19
Excelente Artigo.Parabens !!
Comentário de Fernanda Sallai em 25 fevereiro 2010 às 19:12
Parabéns Yan .. Ótimo artigo.
Comentário de Thaís Simonato de Paula em 25 fevereiro 2010 às 19:04
Muito bom seu artigo Yan. Parabéns!

© 2019   Criado por Ramon Durães.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço