Silverlight - Animação
A animação permite que você crie interfaces de usuário verdadeiramente dinâmicas. Geralmente é usado para aplicar efeitos, por exemplo, ícones que crescem quando você os move, logotipos que giram, texto que rola para a vista e assim por diante.
Às vezes, esses efeitos parecem brilho excessivo. Se usadas corretamente, as animações podem aprimorar um aplicativo de várias maneiras. Eles podem fazer um aplicativo parecer mais responsivo, natural e intuitivo.
Por exemplo, um botão que desliza quando você clica parece um botão físico real, não apenas outro retângulo cinza. As animações também podem chamar a atenção para elementos importantes e guiar o usuário nas transições para novos conteúdos.
A abordagem do Silverlight para animação é declarativa, em vez de focar em sequências de quadros de animação.
Definindo animações
As animações são normalmente definidas em seções de recursos. Na verdade, eles geralmente estão envolvidos em um elemento de storyboard, que veremos em detalhes em breve.
Ele fornece um método Begin (), para que a animação possa ser chamada a partir do código.
As animações também podem ser colocadas dentro dos elementos do estado visual em um modelo de controle.
Animação Declarativa
As animações no Silverlight são declarativas. Eles descrevem o que gostaria que acontecesse. Deixe que o Silverlight descubra como fazer isso acontecer. Portanto, as animações geralmente seguem o padrão que dizemos ao Silverlight o que gostaríamos de alterar.
Esta é sempre alguma propriedade em alguns elementos nomeados, ou seja, TargetName e TargetProperty.
<DoubleAnimation
Storyboard.TargetName = "myRectangle"
Storyboard.TargetProperty = "Opacity"
From = "0" To = "1"
Duration = "0:0:5"
/>Dizemos como gostaríamos que essa propriedade mudasse; neste caso, estamos mudando a opacidade de um valor de zero para um valor de um. Em outras palavras, gostamos que os elementos de destino desapareçam de opacos para transparentes.
Finalmente, dizemos quanto tempo gostaríamos que isso durasse; neste caso, levará cinco segundos.
o significado do double nesta animação dupla é que ele tem como alvo uma propriedade do tipo double, portanto, um valor de ponto flutuante.
Se você deseja animar uma propriedade que representa uma cor, use uma animação colorida.
Vamos dar uma olhada em um exemplo simples de animação dupla. A seguir está o código XAML no qual dois botões, um retângulo e dois storyboards são adicionados.
<UserControl x:Class = "DoubleAnimationExample.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480">
<UserControl.Resources>
<Storyboard x:Name = "fadeDown">
<DoubleAnimation
Storyboard.TargetName = "myRectangle"
Storyboard.TargetProperty = "Opacity"
From = "1" To = "0"
Duration = "0:0:5" />
</Storyboard>
<Storyboard x:Name = "fadeUp">
<DoubleAnimation
Storyboard.TargetName = "myRectangle"
Storyboard.TargetProperty = "Opacity"
From = "0" To = "1"
Duration = "0:0:5" />
</Storyboard>
</UserControl.Resources>
<Grid x:Name = "LayoutRoot">
<Rectangle x:Name = "myRectangle"
Fill = "Blue" Width = "300" Height = "100"
HorizontalAlignment = "Center"
VerticalAlignment = "Top" Margin = "0,30" />
<Button x:Name = "fadeUpButton" Content = "Up" Width = "80"
Height = "30" HorizontalAlignment = "Left"
VerticalAlignment = "Top" Margin = "50,140,0,0"
Click = "fadeUpButton_Click" />
<Button x:Name = "fadeDownButton" Content = "Down"
Width = "80" Height = "30" HorizontalAlignment = "Left"
VerticalAlignment = "Top" Margin = "50,180,0,0"
Click = "fadeDownButton_Click" />
</Grid>
</UserControl>Aqui está a implementação para diferentes eventos em C #.
using System.Windows;
using System.Windows.Controls;
namespace DoubleAnimationExample {
public partial class MainPage : UserControl {
public MainPage() {
InitializeComponent();
}
private void fadeUpButton_Click(object sender, RoutedEventArgs e) {
fadeUp.Begin();
}
private void fadeDownButton_Click(object sender, RoutedEventArgs e) {
fadeDown.Begin();
}
}
}Quando o código acima for compilado e executado, você verá a seguinte saída.
Repetindo e revertendo
As animações oferecem algumas propriedades para repetir automaticamente e todas as animações reversas.
Se você definir a propriedade de comportamento de repetição para um spam de tempo, a animação será repetida até que o período de tempo especificado tenha decorrido ou você pode apenas dizer quantas vezes deseja que ela se repita.
Isso suporta pontos decimais para que você possa repetir quatro vezes e meia.
Você pode repetir para sempre e também pode dizer à animação que, uma vez que chega ao fim, deve ser executada ao contrário, de volta ao início.
Animação de quadro chave
Freqüentemente, uma animação simples de A a B é um pouco simples demais. Por exemplo, você deseja animar uma bola quicando no chão. Este não é um movimento simples ponto a ponto. A bola cai, acelerando gradualmente e depois inverte sua direção ao atingir o fundo. Abrandando novamente conforme ele volta ao topo de sua viagem.
Vamos dar uma olhada em um exemplo simples de Key Frame animation.
A seguir é fornecido o código XAML, que contém uma elipse e uma animação dupla com quadros-chave.
<UserControl x:Class = "LinearKeyFrames.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d"
Width = "400" Height = "300">
<UserControl.Resources>
<Storyboard x:Name = "ballAnim" SpeedRatio = "0.2">
<DoubleAnimation From = "0" Duration = "00:00:03" To = "96"
Storyboard.TargetName = "ellipse"
Storyboard.TargetProperty = "(Canvas.Left)" />
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName = "ellipse"
Storyboard.TargetProperty = "(Canvas.Top)">
<LinearDoubleKeyFrame KeyTime = "00:00:00" Value = "0"/>
<LinearDoubleKeyFrame KeyTime = "00:00:00.5" Value = "16" />
<LinearDoubleKeyFrame KeyTime = "00:00:01" Value = "48"/>
<LinearDoubleKeyFrame KeyTime = "00:00:01.5" Value = "112"/>
<LinearDoubleKeyFrame KeyTime = "00:00:02" Value = "48"/>
<LinearDoubleKeyFrame KeyTime = "00:00:02.5" Value = "16"/>
<LinearDoubleKeyFrame KeyTime = "00:00:03" Value = "0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name = "LayoutRoot" Background = "White">
<Canvas>
<Ellipse x:Name = "ellipse" Fill = "Aqua" Width = "50" Height = "50" />
</Canvas>
</Grid>
</UserControl>Aqui está a implementação para mouse left evento de botão, que começará a animação quando o usuário pressionar o botão esquerdo do mouse na página da web.
using System.Windows.Controls;
using System.Windows.Input;
namespace LinearKeyFrames {
public partial class MainPage : UserControl {
public MainPage() {
InitializeComponent();
this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown);
}
void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
ballAnim.Begin();
}
}
}Quando o código acima for compilado e executado, você verá a seguinte saída.
Ao clicar na página da web, você verá que a bola começa a se mover.
