Repetir storybordy? duplicar e aproveitar o mesmo codigo?

Question

 

Pessoal,

 

tem como repetir storybordy? sem ter que criar outra para a mesma animação

duplicar e aproveitar o mesmo codigo?

 

Exemplo, no meu caso:

 

Tenho um fundo da animação que serão 53 (para ser exato) telinhas de tv.

Tem somente 5 imagens, ou seja elas irão se repetir.

Queria fazer só 5 animações (anima de alpha, tipo brilhando em loop) e ir repetindo para não fazer/criar TODAS as 53, já que no codigo lá VS, não terei que colocar:

tv01_loop_ani.Begin();

tv02_loop_ani.Begin();

tv03_loop_ani.Begin();

tv04_loop_ani.Begin();

tv05_loop_ani.Begin();

tv06_loop_ani.Begin();

tv07_loop_ani.Begin();

tv08_loop_ani.Begin();

.

.

.

.

tv53_loop_ani.Begin();

 

 

Mais ai que tá, pelos testes, não posso duplicar a animação somente, tenho que escrever no cod e criar 53 diferentes!

 

Alguém sabe algo para me ajudar?

 

Valeuuu

Answer 1

Ophabyo,

 

Acredito que uma boa solução será você criar sua Storyboard pelo C#. Eu fiz um exemplo e comentei as etapas. Tente fazer este exemplo e entender. Assim irá ficar fácil você aplicar em seu projeto.

 

Eu criei três retangulos, cada um com um x:Name. E chamando o mesmo evento MouseEnter:

 

Code Snippet

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

<Rectangle Width="50" Height="50" x:Name="Rec1" Fill="Red" Margin="10" MouseEnter="Rec1_MouseEnter"></Rectangle>

<Rectangle Width="50" Height="50" x:Name="Rec2" Fill="Green" Margin="10" MouseEnter="Rec1_MouseEnter"></Rectangle>

<Rectangle Width="50" Height="50" x:Name="Rec3" Fill="Blue" Margin="10" MouseEnter="Rec1_MouseEnter"></Rectangle>

</StackPanel>

 

 

Depois, pelo C# eu criei uma animação e defini as suas propriedades. O código está comentado:

 

Code Snippet

private void Rec1_MouseEnter(object sender, MouseEventArgs e)

{

 

//Identifico o retangulo que chamou o evento

Rectangle RecChamado = new Rectangle();

RecChamado = (Rectangle)sender;

 

//Crio minha Storyboard

Storyboard sb = new Storyboard();

 

//Crio minha animacão

DoubleAnimation anim = new DoubleAnimation();

 

//Defino o status iicial e o final

anim.From = 0;

anim.To = 1;

 

//Defino a duracão

anim.Duration = new Duration(TimeSpan.FromMilliseconds(1000));

 

//Defino a animacão e o objeto que deve ser animado

Storyboard.SetTarget(anim, RecChamado);

 

//Defino a propriedade que deve ser  animada, no caso é opacidade

Storyboard.SetTargetProperty(anim, new PropertyPath(FrameworkElement.OpacityProperty));

 

//Adiciono a animacão a minha Storyboard

sb.Stop();

sb.Children.Clear();

sb.Children.Add(anim);

 

//Inicio a animacão

sb.Begin();

}

 

Assim, seu XAML ficará mais limpo e você poderá alterar as propriedades com mais facilidades. É claro que em alguns casos devemos realmente criar animações pelo Blend.

 

Espero ter te ajudado.

 

Abraço,

 

"Se sua pergunta foi respondida, por favor, marque como resposta"

Answer 2

 

Grande Lucas,

 

fiz oque vc sugeriu e a ideia é muito boa, mas.... é quase,

 

os meus quadradinhos (pequenas imagens dentro de uma tela de tv), serão enfeites de fundo e não será acionado pelo mouse, ficará em loop, com alfa ou um brilho vai e vem.

 

 Alguém  ou vc tem alguma outra ideia?

 

Valeuuu

Answer 3

 

Ophabyo,

 

Existe uma maneira de duplicar a animação sim. Bom, fiz um teste aqui e deu certo. Primeiro eu criei uma animação pelo blend. Depois abri o VS e o código XAML gerado para minha animação foi este:

 

Code Snippet

<UserControl.Resources>

<Storyboard x:Name="Sb_Teste">

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Rec1" BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-30"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</UserControl.Resources>

 

Então eu removi a propriedade Storyboard.TargetName="Rec1".

 

Depois, pelo código eu dupliquei a animação e joguei esta propriedade por lá. E assim que estiver completa a minha animação duplicada eu crio outra e a chamo. Assim:

 

Code Snippet

public Page()

{

InitializeComponent();

Storyboard sb1 = new Storyboard();

sb1 = Sb_Teste;

sb1.Stop();

sb1.SetValue(Storyboard.TargetNameProperty, Rec1.Name);

sb1.Begin();

sb1.Completed += new EventHandler(sb1_Completed);

}

 

void sb1_Completed(object sender, EventArgs e)

{

Storyboard sb2 = new Storyboard();

sb2 = Sb_Teste;

sb2.Stop();

sb2.SetValue(Storyboard.TargetNameProperty, Rec2.Name);

sb2.Begin();

sb2.Completed += new EventHandler(sb2_Completed);

}

void sb2_Completed(object sender, EventArgs e)

{

Storyboard sb3 = new Storyboard();

sb3 = Sb_Teste;

sb3.Stop();

sb3.SetValue(Storyboard.TargetNameProperty, Rec3.Name);

sb3.Begin();

}

 

 

Desta maneira, cada Storyboard nova recebe um targetname diferente. Então cada animação será aplicada em um determinado retangulo.

 

Observação: ao criar uma storyboard pelo blend, ele adiciona algumas propriedades no objeto que será animado. Estas propriedades devem ser copiadas para os demais objetos. Ou seja, meus retangulos tiveram que ficar assim:

 

Code Snippet

<Rectangle Width="50" Height="50" x:Name="Rec1" Fill="Red" Margin="10" RenderTransformOrigin="0.5,0.5">

<Rectangle.RenderTransform>

<TransformGroup>

<ScaleTransform/>

<SkewTransform/>

<RotateTransform/>

<TranslateTransform/>

< /TransformGroup>

< /Rectangle.RenderTransform>< /Rectangle>

<Rectangle Width="50" Height="50" x:Name="Rec2" Fill="Green" Margin="10" RenderTransformOrigin="0.5,0.5">

<Rectangle.RenderTransform>

<TransformGroup>

<ScaleTransform/>

<SkewTransform/>

<RotateTransform/>

<TranslateTransform/>

</ TransformGroup>

</ Rectangle.RenderTransform>

</ Rectangle>

<Rectangle Width="50" Height="50" x:Name="Rec3" Fill="Blue" Margin="10" RenderTransformOrigin="0.5,0.5">

<Rectangle.RenderTransform>

<TransformGroup>

<ScaleTransform/>

<SkewTransform/>

<RotateTransform/>

<TranslateTransform/>

</ TransformGroup>

</ Rectangle.RenderTransform>

</ Rectangle>

 

 

O blend gerou estas propriedades apenas para o primeiro retangulo animado. E eu copiei para os demais.

 

Para seu código C# não ficar tão gigante. Você pode fazer apenas uma função de completo e aplicar para as todas as Storyboards duplicadas e depois verificar qual Storyboard que terminou (eu fiz mais ou menos isto no post anterior, porém na função MouseEnter).

 

Abraço,

 

"Se sua pergunta foi respondida, por favor, marque como resposta"

Answer 4

 

É Lucas, acho que me perdi ou ficou complexo demais para uma coisa simples que tinha em mente...

 

Vou bolar outra animação ou outra solução.

 

Valeuuu

Fabio

Answer 5

 

Só para constar, elas formam 6 linhas com televisores.

 

A solução foi fazer elas, cada linha, descerem do alto com fade (com um pequeno intervalo de tempo uma para outra), ficou muito bom!

 

Valeuuu