Animação com sistema de partículas. Parte I.

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.

<UserControl x:Class=”SistemaParticulas.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” Width=”1024″ Height=”768″> <UserControl.Resources> <Storyboard x:Name=”Move” Duration=”00:00:00″/> </UserControl.Resources> <Canvas x:Name=”LayoutRoot” Width=”800″ Height=”600″ Background=”#FF000000″ RenderTransformOrigin=”0.5,0.5″> </Canvas> </UserControl

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.

<UserControl x:Class=”SistemaParticulas.Particulas” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” Width=”70″ Height=”70″> <Canvas x:Name=”LayoutRoot” RenderTransformOrigin=”0.5,0.5″> <Canvas.RenderTransform> <TransformGroup> <ScaleTransform x:Name=”Escala” ScaleY=”1″ ScaleX=”1″/> <SkewTransform/> <RotateTransform/> <TranslateTransform X=”0″/> </TransformGroup> </Canvas.RenderTransform> <Ellipse x:Name=”eParticula” Fill=”#FF29A526″ Stroke=”#FF000000″ Height=”70″ Width=”70″/> </Canvas> </UserControl>

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.

namespace SistemaParticulas { public partial class Particulas : UserControl { public int TempoVida { get; set; } public int Idade { get; set; } public Point Velocidade; public Particulas() { InitializeComponent(); } } }

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.

private List<Particulas> Particulas; private int _qtParticulas = 150; private Random rand = new Random()

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.

private void CriarParticulas(int _qtParticulas){ for (int i = 0; i < _qtParticulas; i++) { Particulas particulas = new Particulas(); Canvas.SetLeft(particulas, rand.Next((int)LayoutRoot.Width)); Canvas.SetTop(particulas, rand.Next((int)LayoutRoot.Width)); LayoutRoot.Children.Add(particulas); }

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.

public MainPage() { InitializeComponent(); CriarParticulas(numParticulas); }

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.

private void CriarParticulas(int _quantidade) { for (int i = 0; i < _quantidade; i++) { Particulas particulas = new Particulas(); Canvas.SetLeft(particulas, rand.Next((int)LayoutRoot.Width)); Canvas.SetTop(particulas, rand.Next((int)LayoutRoot.Width)); byte[] color = new byte[3]; rand.NextBytes(color); Color c = Color.FromArgb(255, color[0], color[1], color[2]); particulas.eParticula.Fill = new SolidColorBrush(c); particulas.Opacity = rand.NextDouble(); particulas.Escala.ScaleX = particulas.Escala.ScaleY = rand.NextDouble(); if (particulas.Escala.ScaleX < .25) particulas.Escala.ScaleX = particulas.Escala.ScaleY = .25; particulas.Velocidade.X = rand.Next(-5, (int)5); particulas.Velocidade.Y = rand.Next(-5, (int)5); if (particulas.Velocidade.X == 0) particulas.Velocidade.X = 2; if (particulas.Velocidade.Y == 0) particulas.Velocidade.Y = 2; particulas.TempoVida = rand.Next(120); //Particulas.Add(particulas); LayoutRoot.Children.Add(particulas); } }

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