Quando eu vi uma pergunta de um usuário nos forums do MSDN sobre animação de um user control para dar o efeito de saída ao clicar um botão, eu pensei que esta seria uma excelente oportunidade de criar uma série de posts aqui no blog, mostrando diversas maneiras de fazê-lo.

Apesar de colocar as alternativas aqui, algumas podem não ser tão boas: este post onde eu ponho animação no code behind, apesar de ser fácil de implementar, tem algumas desvantagens:

  • O código da animação é posto no code behind, uma técnica que eu não gosto. Eu nao acho que o padrão MVVM deva ter zero code behind, mas eu não gosto de por código lá, a menos que seja indispensável e estritamente relacionado com a view.
  • Não é design-friendly – se o designer quer mudar a animação, o código deve ser alterado.
  • Não é portável – se você quer criar a mesma animação em outros lugares, o código deve ser copiado ou refatorado para ser acessado de outros lugares.
  • Não é fácil de manipular – tudo é feito em código. Quaisquer mudanças, como a duração da animação deve ser alterado em código.

Temos o seguinte problema: temos um controle na janela e queremos escondê-lo quando o botão é clicado, usando uma animação, como vemos abaixo:

image_thumbimage_thumb1image_thumb3image_thumb4

Para fazer isso, devemos criar uma animação para o controle, do tipo RenderTransform e animá-la. Podemos fazer tudo em código desta maneira: no clique do botão, criamos a transformação, adicionamos ao controle e animamos ela:

 

private void Button_Click(object sender, RoutedEventArgs e) { // create the transformation and add it to the control var translate = new TranslateTransform(0, 0); gridLogin.RenderTransform = translate; // create the animation and start it var da = new DoubleAnimation(0, -ActualWidth, new Duration(TimeSpan.FromMilliseconds(1000))); translate.BeginAnimation(TranslateTransform.XProperty, da); }

Este código tem muitos inconvenientes:

  • Ele só pode ser aplicado ao nosso controle. Para adicioná-lo a outro controle, devemos copiar o código.
  • A duração da animação é 1 segundo – a duração é fixa.
  • Somente anima da direita para a esquerda.

Nesta primeira fase, refatoraremos o código para deixá-lo mais genérico:

public enum AnimationType { Right, Left, Up, Down } private void Button_Click(object sender, RoutedEventArgs e) { AnimateControl(gridLogin, TimeSpan.FromMilliseconds(1000), AnimationType.Left); } private void AnimateControl(UIElement control, TimeSpan duration, AnimationType type) { double xEnd = 0; double yEnd = 0; if (type == AnimationType.Left) xEnd = -ActualWidth; else if (tipo == AnimationType.Right) xEnd = ActualWidth; else if (tipo == AnimationType.Up) yEnd = -ActualHeight; else if (tipo == AnimationType.Down) yEnd = ActualHeight; // create the transformation and add it to the control var translate = new TranslateTransform(0, 0); control.RenderTransform = translate; // create the animation and start it if (tipo == AnimationType.Left || tipo == AnimationType.Right) { var da = new DoubleAnimation(0, xEnd, new Duration(duration)); translate.BeginAnimation(TranslateTransform.XProperty, da); } else { var da = new DoubleAnimation(0, yEnd, new Duration(duration)); translate.BeginAnimation(TranslateTransform.YProperty, da); } }

Apesar do código ser maior, ele é mais genérico e permite ser reutilizado. Podemos usar qualquer controle, configurar a deuração e a direção da animação. Ainda não é o idela, mas é melhor que o código anterior, não reutilizável. Nos próximos posts veremos outras maneiras de fazer isso. Até lá!

When I saw a question from an user in the MSDN forums about animating an user control to give the exit effect while clicking a button, I thought this would be an excelent opportunity to create a series of posts here in the blog, showing many ways to do it.

Although I will put the alternatives here, some can be not so good: this post, putting animation on the code behind, although easy to implement, has these disadvantages:

  • The animation code is put on the code behind, a technique I don’t like. I don’t think that the MVVM pattern should have zero code behind, but I don’t like to put code behind, unless is indispensable and strictly related to the view.
  • It’s not design friendly – if the designer wants to change the animation, the code should be changed.
  • It’s not portable – if you want to create the same animation on other places, the code must be copied or refactored to be accessed from other places.
  • It’s not easy to manipulate – everything is on the code. Any changes, like the duration of the animation must be changed in code.

We have the following problem: we have a control in the window and we want to hide it when the button is clicked with an animation, like we see below:

imageimageimageimage

To do that, we should create a transformation for the control, of type RenderTransform and animate it. We can do everything in code this way: at the button click, we create the transform, add it to the control and animate it:

private void Button_Click(object sender, RoutedEventArgs e) { // create the transformation and add it to the control var translate = new TranslateTransform(0, 0); gridLogin.RenderTransform = translate; // create the animation and start it var da = new DoubleAnimation(0, -ActualWidth, new Duration(TimeSpan.FromMilliseconds(1000))); translate.BeginAnimation(TranslateTransform.XProperty, da); }

This code has many shortcomings:

  • It can only be applied to our control. To add it to another control, we must copy the code.
  • The animation duration is 1 second – the duration is fixed.
  • It only animates from right to left.

In this first phase, we can refactor the code and leave it more generic:

public enum AnimationType { Right, Left, Up, Down } private void Button_Click(object sender, RoutedEventArgs e) { AnimateControl(gridLogin, TimeSpan.FromMilliseconds(1000), AnimationType.Left); } private void AnimateControl(UIElement control, TimeSpan duration, AnimationType type) { double xEnd = 0; double yEnd = 0; if (type == AnimationType.Left) xEnd = -ActualWidth; else if (tipo == AnimationType.Right) xEnd = ActualWidth; else if (tipo == AnimationType.Up) yEnd = -ActualHeight; else if (tipo == AnimationType.Down) yEnd = ActualHeight; // create the transformation and add it to the control var translate = new TranslateTransform(0, 0); control.RenderTransform = translate; // create the animation and start it if (tipo == AnimationType.Left || tipo == AnimationType.Right) { var da = new DoubleAnimation(0, xEnd, new Duration(duration)); translate.BeginAnimation(TranslateTransform.XProperty, da); } else { var da = new DoubleAnimation(0, yEnd, new Duration(duration)); translate.BeginAnimation(TranslateTransform.YProperty, da); } }

Although the code is larger, it is more generic and allows to be reutilized. We can use any control, set the duration and the animation direction. It still isn’t ideal, but it’s better than last code, non reutilizable. On the next posts, we will see other ways to do it. See you then!