Adição de animação a um controle (C#)

por Christian Wenz

Baixar PDF

O controle Animação no ASP.NET Kit de Ferramentas de Controle AJAX não é apenas um controle, mas uma estrutura inteira para adicionar animações a um controle. Este tutorial mostra como configurar essa animação.

Visão geral

O controle Animação no ASP.NET Kit de Ferramentas de Controle AJAX não é apenas um controle, mas uma estrutura inteira para adicionar animações a um controle. Este tutorial mostra como configurar essa animação.

Etapas

A primeira etapa é como de costume incluir na ScriptManager página para que a biblioteca ASP.NET AJAX seja carregada e o Kit de Ferramentas de Controle possa ser usado:

<asp:ScriptManager ID="asm" runat="server" />

A animação neste cenário será aplicada a um painel de texto semelhante a este:

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
 more interactive and highly-personalized Web experiences that work across all the
 most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
 more interactive and highly-personalized Web experiences that work across all the
 most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
 more interactive and highly-personalized Web experiences that work across all the
 most popular browsers.<br />
</asp:Panel>

A classe CSS associada para o painel define uma cor da tela de fundo e uma largura:

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

Em seguida, precisamos do AnimationExtender. Depois de fornecer um ID e o habitual runat="server", o TargetControlID atributo deve ser definido como o controle para animar em nosso caso, o painel:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">

Toda a animação é aplicada declarativamente, usando uma sintaxe XML, infelizmente atualmente não é totalmente compatível com o IntelliSense do Visual Studio. O nó raiz está <Animations>; dentro desse nó, vários eventos são permitidos que determinam quando as animações ocorrem:

• OnClick (clique no mouse)
• OnHoverOut (quando o mouse sai de um controle)
• OnHoverOver (quando o mouse passa o mouse sobre um controle, interrompendo a OnHoverOut animação)
• OnLoad (quando a página tiver sido carregada)
• OnMouseOut (quando o mouse sai de um controle)
• OnMouseOver (quando o mouse passa o mouse sobre um controle, não parando a OnMouseOut animação)

A estrutura vem com um conjunto de animações, cada uma representada por seu próprio elemento XML. Aqui está uma seleção:

• <Color> (alterando uma cor)
• <FadeIn> (desbotando)
• <FadeOut> (desbotando)
• <Property> (alterando a propriedade de um controle)
• <Pulse> (pulsando)
• <Resize> (alterando o tamanho)
• <Scale> (alterando proporcionalmente o tamanho)

Neste exemplo, o painel deverá desaparecer. A animação deve levar 1,5 segundo (Duration atributo), exibindo 24 quadros (etapas de animação) por segundo (Fps atributo). Aqui está a marcação completa para o AnimationExtender controle:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <FadeOut Duration="1.5" Fps="24" />
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Quando você executa esse script, o painel é exibido e desaparece em um segundo e meio.

O painel está desaparecendo (Clique para exibir a imagem em tamanho real)

Próximo