Executar animações usando o código do lado do cliente (C#)

por Christian Wenz

Baixar PDF

O controle Animação no kit de ferramentas de controle ASP.NET AJAX não é apenas um controle, mas uma estrutura inteira para adicionar animações a um controle. A execução da animação também pode ser disparada usando código JavaScript personalizado do lado do cliente.

Visão geral

O controle Animação no kit de ferramentas de controle ASP.NET AJAX não é apenas um controle, mas uma estrutura inteira para adicionar animações a um controle. A execução da animação também pode ser disparada usando código JavaScript personalizado do lado do cliente.

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">

<Animations> No nó , use <OnClick> para executar as animações depois que o usuário clicar no painel. Adicione duas animações a serem executadas em paralelo:

<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

Para fins de demonstração, essa animação (e qualquer outra animação criada usando o Kit de Ferramentas de Controle) é executada usando o código JavaScript, depois que a página é executada. Em primeiro lugar, precisamos de acesso ao AnimationExtender controle. A biblioteca AJAX do ASP.NET fornece a $find() função para esta tarefa:

var ae = $find("ae");

O AnimationExtender controle expõe uma API avançada, incluindo métodos com nomes idênticos aos manipuladores de eventos usados na marcação XML: OnClick(), OnLoad()e assim por diante. Por exemplo, uma chamada do OnClick() método executa a animação dentro do <OnClick> elemento do AnimationExtender controle :

ae.OnClick();

Aqui está o código JavaScript completo do lado do cliente que emula o clique no painel depois que a página tiver sido totalmente carregada observe que o nome da pageLoad() função é usado, que é chamado por ASP.NET AJAX depois que a página e todas as bibliotecas JavaScript incluídas tiverem sido carregadas.

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>

A animação é executada imediatamente, sem um clique do mouse (clique para exibir a imagem em tamanho real)

AnteriorAvançar