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
