Compartilhar via

Animação em resposta à interação do usuário (C#)

  • Artigo

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. As animações podem ser iniciadas automaticamente ou podem ser disparadas pela interação do usuário, por exemplo, clicando com o mouse.

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. As animações podem ser iniciadas automaticamente ou podem ser disparadas pela interação do usuário, por exemplo, clicando com o mouse.

Etapas

Em primeiro lugar, inclua o ScriptManager na página; em seguida, a biblioteca ASP.NET AJAX é carregada, possibilitando o uso do Kit de Ferramentas de Controle:

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

A animação 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>

Na classe CSS associada para o painel, defina uma cor de plano de fundo agradável e também defina uma largura fixa para o painel:

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

Em seguida, adicione o AnimationExtender à página, fornecendo um ID, o TargetControlID atributo e o obrigatório runat="server":

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

Dentro do <Animations> nó, há cinco maneiras de iniciar a animação por meio da interação do usuário (o elemento ausente é <OnLoad> executado depois que toda a página é totalmente carregada):

  • <OnClick> (clique no mouse no controle)
  • <OnHoverOut> (o mouse deixa o controle)
  • <OnHoverOver> (o mouse passa o mouse sobre um controle, interrompendo a <OnHoverOut> animação)
  • <OnMouseOut> (o mouse deixa um controle)
  • <OnMouseOver> (o mouse passa o mouse sobre um controle, não parando a <OnMouseOut> animação)

Nesse cenário, <OnClick> é usado. Quando o usuário clica no painel, ele é redimensionado e desaparece ao mesmo tempo.

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Um clique do mouse inicia a animação

Um clique do mouse inicia a animação (Clique para exibir a imagem em tamanho real)

AnteriorAvançar