Animação de partículas em Silverlight

Para simular fogo, fumaça, chuva, neve, fontes d’ água, entre outros fenômenos, precisamos desenvolver um Sistema de Partículas. O termo Sistema de Partículas refere-se a um conjunto de técnicas de animação para simulação de alguns destes fenômenos físicos. Primeiramente, devemos conhecer o que é uma partícula. Uma partícula é definida como o menor elemento de um sistema, e sobre cada partícula atuam forças externas e mútuas. Para os nossos propósitos, vamos definir uma partícula como uma única ocorrência de um objeto.

leia mais…

abraços,

Flávia Moreira

Neste primeiro artigo, eu vou mostrar o inicio de uma animação dinâmica com sistema de partículas básica. A Figura 1.0 mostra o resultado final da animação, porém não é possível ter uma noção ideal com uma Imagem. Sem duvidas é um bom começo para quem quer aplicar mais conhecimentos em animações em Silverlight.

Figura 1.0 – Sistemas de partículas básica

1- Inicie um projeto Silverlight, forneça o nome de SistemaParticulas

2- No arquivo Page.xaml ou MainPage.xaml, adicione o código Xaml, conforme Listagem 1 . O MainPage, caso já esteja utilizando a versão Silverlight 3.

Listagem 01 – Usando um Storyboard

3- Inclua dentro do projeto Silverlight outro UserControl, e forneça o nome de Particulas.xaml

4- No arquivo Particulas.xaml, adicione o código conforme mostrado na Listagem 02.

Listagem 02 – Objeto do tipo Ellipse com suas transformações

Na Listagem 02, você pode visualizar que foi adicionado um objeto do tipo ellipse, e cujo nome é eParticula, e para ela adicionada as transformações.

5- No codeBehind Particula.xaml.cs, adicione as propriedades, como mostra a Listagem 03.

Listagem 03 – Propriedades para a Partícula

As partículas devem possuir uma idade, um tempo de vida e uma velocidade. Note que a velocidade é do tipo Point.

6- Abra o Page.xaml.cs ou MainPage.xaml.cs. Adicione uma variável do tipo inteiro, uma lista do Tipo Particulas e um objeto do tipo Random. A Listagem 04 traz a codificação.

Listagem 04 – Lista e Objetos

7- Agora, será criado um método para criar as partículas, forneça o nome do método, tal como, CriarParticulas. Na Listagem 05, você pode observar a codificação sem grandes novidades.

Listagem 05 – Adicionando as partículas dentro do LayoutRoot

Analisando o código da Listagem 05, é possível observar, que apenas foi feito a Instancia da classe Particulas e adicionada dentro do LayoutRoot, que nada mais é do que um Container Canvas, Neste momento, observe seu Arquivo Page.xaml ou MainPage.Xaml que o container é Canvas. Os métodos SetLeft e SetTop apenas delimitam o espaço das particulas dentro do LayoutRoot, lembre-se que a ellipse é atachada dentro do Canvas, ela depende da propriedade Left e Top. A variavel _qtParticulas, apenas limita a quantidade de particulas dentro do LayoutRoot.

8- Dentro do Construtor da página Page ou MainPage, chame o método CriarParticulas, conforme a Listagem 06.

Listagem 06 – Chamando método

9- A Figura 02, mostra como deve estar o desenvolvimento do sistema de partículas.

Figura 02 – Aplicação executada no navegador

10- Agora vamos adicionar para as partículas, algumas novas propriedades, tal como, a cor, a opacidade e o tamanho. E também, adicionar valores para as propriedades, velocidade e tempo de vida. A Listagem 07 traz a codificação para o método CriarParticulas.

Listagem 07 – Adicionando propriedades e valores

Analisando o código da Listagem 07, para a cor utilizamos o tipo Byte, pois a struct do tipo Color recebe valores do tipo Byte. Evidentemente, quem irá receber o valor do tipo Color, é a eParticula, a qual adicionada no arquivo Particulas.xml.

11- A Figura 03 mostra como deve estar à aplicação.

Figura 03 – Aplicação executada no navegador

Bem, eu vou parando por aqui.

Até o segundo artigo.

Abraços

Flávia Moreira