Animação dinâmica para menu com imagens em Silverlight 2.

Neste artigo será mostrado como criar animação dinâmica para um simples menu com imagens, porém não é o objetivo deste artigo mostrar a criação do design, apenas será mostrado a codificação para criar a animação dinâmica do menu. Esta animação consiste apenas em usar o fator de escala para as imagens, ou seja, quando o mouse estiver sobre a imagem, o fator de escala será mudado e quando o mouse não estiver sobre a imagem, o fator de escala volta para seu estado inicial.  

A Figura 1.0, mostra o menu com as imagens.

 Inicie um projeto no Microsoft Blend 2 ou no Visual Studio 2008.  Adicione algumas imagens no seu projeto e adicione o controle do tipo IMAGE e seta as propriedades: Name, Height, Width, Source  e em Transform, mude a escala, deixe da forma desejada.

Obs: Você deverá deixar a propriedade Transform setada no código, ou irá dar um erro.  Segue o Exemplo, de como deverá ficar  o controle IMAGE na parte do Xaml:

 

 <Image Height=”38″ Width=”38″ Source=”icoHome1.png” Stretch=”Fill” Canvas.Top=”8″ Canvas.Left=”72″ RenderTransformOrigin=”0.5,0.5″ x:Name=”imgHome”>

<Image.RenderTransform>

 <TransformGroup>

<ScaleTransform ScaleX=”1″ ScaleY=”1″/>

<SkewTransform/>

<RotateTransform/>

<TranslateTransform/>

</TransformGroup>

</Image.RenderTransform>

</Image>

 

Eu adicionei 4 imagens em 3D do tipo png .

 

Com todas as suas imagens devidamente configuradas, na parte do codeBehind, iremos adicionar a declaração dos eventos do controle Image  dentro do construtor da classe  page.xaml.cs, Exemplo: 

 

  public ucMenuPrincipal()

                               {

                                               // Required to initialize variables

                                               InitializeComponent();

            SbAnimacaoDowhile();

 

            imgHome.MouseEnter += new MouseEventHandler(imagem_MouseEnter);

            imgContato.MouseEnter += new MouseEventHandler(imagem_MouseEnter);

            imgNewsLetter.MouseEnter += new MouseEventHandler(imagem_MouseEnter);

            imgVideos.MouseEnter += new MouseEventHandler(imagem_MouseEnter);

 

            imgHome.MouseLeave += new MouseEventHandler(imagem_MouseLeave);

            imgContato.MouseLeave += new MouseEventHandler(imagem_MouseLeave);

            imgNewsLetter.MouseLeave += new MouseEventHandler(imagem_MouseLeave);

            imgVideos.MouseLeave += new MouseEventHandler(imagem_MouseLeave);

            }

 

Repare que os eventos MouseEnter de todos os controles usam o mesmo método, o mesmo processo acontece para o MouseLeave.  

 Animação dinâmica:

Crie os objetos:

 private bool _flagMenu = false;  

SplineDoubleKeyFrame _splineIn; 

SplineDoubleKeyFrame _splineOut;

 

 Depois, o primeiro passo é criar  um método para o DoubleAnimationUsingKeyFrames.

 

Note no método que está sendo passado dois parâmetros: O primeiro passa qual objeto irá sofrer a animação, neste caso, o Controle do Tipo Image, e  o segundo qual propriedade será executada, ou seja a escala. 

    public DoubleAnimationUsingKeyFrames GetAnimacao(DependencyObject img, string propertyPath)

        {

          

            DoubleAnimationUsingKeyFrames _dbAnimation = new DoubleAnimationUsingKeyFrames();

            _dbAnimation.BeginTime = TimeSpan.FromSeconds(0);

         

            _splineIn = new SplineDoubleKeyFrame();

            _splineOut = new SplineDoubleKeyFrame();

            _splineIn.KeyTime = TimeSpan.FromSeconds(0.4);

            _splineOut.KeyTime = TimeSpan.FromSeconds(0.4);

 

                if (!_flagMenu)

                {

                _splineIn.Value = 1.5;

                _dbAnimation.KeyFrames.Add(_splineIn);

                 }

                else

                {

                    _splineOut.Value = 1;

                    _dbAnimation.KeyFrames.Add(_splineOut);

                }

 

         

            Storyboard.SetTarget(_dbAnimation, img);

            Storyboard.SetTargetProperty(_dbAnimation, new PropertyPath(propertyPath, new object[0]));

 

            return _dbAnimation;

        }

 

Ciando a Storyboard

   

public void CriaAnimacao(DependencyObject image)

        {

            Storyboard _SbMenu = new Storyboard();

          

            DoubleAnimationUsingKeyFrames scaleX = GetAnimacao(image, “(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)”);

            DoubleAnimationUsingKeyFrames scaleY = GetAnimacao(image, “(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)”);

            _SbMenu.Children.Add(scaleX);

            _SbMenu.Children.Add(scaleY);

            _SbMenu.Begin();

 

        }

 

Os eventos

private void imagem_MouseEnter(object sender, MouseEventArgs e)

        {

          

            CriaAnimacao((Image)sender);

            _flagMenu = true;

        }

 

        void imagem_MouseLeave(object sender, MouseEventArgs e)

        {

 

            CriaAnimacao((Image)sender);

            _flagMenu = false;

        }

 

 

Abraços

Flávia Moreira