Executando várias animações ao mesmo tempo (VB)

por Christian Wenz

Baixar PDF

O controle de animação no ASP.NET AJAX Control Toolkit não é apenas um componente, mas uma estrutura inteira para adicionar animações a um controle. Ele permite executar várias animações de forma paralela.

Visão geral

O controle de animação no ASP.NET AJAX Control Toolkit não é apenas um componente, mas uma estrutura inteira para adicionar animações a um controle. Ele permite executar várias animações de forma paralela.

Steps

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 atributo TargetControlID e o obrigatório runat="server".

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

No nó <Animations>, use <OnLoad> para executar as animações depois que a página tiver sido totalmente carregada. Em geral, <OnLoad> aceita apenas uma animação. A estrutura de animação permite que você ingresse várias animações em uma usando o elemento <Parallel>. Todas as animações dentro <Parallel> são executadas ao mesmo tempo.

Aqui está uma possível marcação para o AnimationExtender controle, atenuando e redimensionando o painel simultaneamente.

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

E, de fato: quando você executa esse script, o painel é exibido, em seguida, redimensiona (mais do que triplicando sua largura e reduzindo pela metade sua altura) e esmaece ao mesmo tempo.

O painel está desaparecendo e redimensionando (incluindo seu conteúdo, graças ao mecanismo de renderização do navegador) (Clique para exibir a imagem em tamanho real)