Usuário com melhor resposta
Repetir storybordy? duplicar e aproveitar o mesmo codigo?

Pergunta
-
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
quinta-feira, 11 de dezembro de 2008 11:58
Respostas
-
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 Snippetprivate 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);
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"
quinta-feira, 11 de dezembro de 2008 13:19
Todas as Respostas
-
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 Snippetprivate 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);
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"
quinta-feira, 11 de dezembro de 2008 13:19 -
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
quinta-feira, 11 de dezembro de 2008 13:51 -
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 Snippetpublic 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);}
{
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"
quinta-feira, 11 de dezembro de 2008 16:12 -
É 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
quinta-feira, 11 de dezembro de 2008 17:30 -
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
quinta-feira, 11 de dezembro de 2008 19:04