Partilhar via

Animação dependendo de uma condição (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. Se uma animação é executada ou não, também pode depender de uma condição na forma de algum código JavaScript.

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. Se uma animação é executada ou não, também pode depender de uma condição na forma de algum código JavaScript.

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ó, use <OnLoad> para executar as animações depois que a página tiver sido totalmente carregada. Em vez de uma das animações regulares, o <Condition> elemento entra em jogo. O código JavaScript fornecido como o valor do ConditionScript atributo é executado em runtime. Se ele for avaliado como true, a animação será executada, caso contrário, não. A marcação a seguir fornece duas animações, cada uma delas sendo executada em 50% dos casos aleatoriamente. Como pode haver apenas uma animação dentro <OnLoad>de , as duas <Condition> animações são unidas usando o <Sequence> elemento :

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
  <Animations>
    <OnLoad>
      <Sequence>
        <Condition ConditionScript="Math.random() &lt; 0.5">
          <Resize Width="1000" Height="150" Unit="px" />
        </Condition>
        <Condition ConditionScript="Math.random() &lt; 0.5">
          <FadeOut Duration="1.5" Fps="24" />
        </Condition>
      </Sequence>
    </OnLoad>
  </Animations>
</ajaxToolkit:AnimationExtender>

Observe que o sinal menor que (<) no ConditionScript atributo deve ser escapado (). Quando você executa esse script, nenhuma animação é executada ou uma das duas executa ou ambas.

O painel está desaparecendo sem redimensionamento, portanto, a segunda animação é executada, a primeira não

O painel está desaparecendo sem redimensionamento, portanto, a segunda animação é executada, a primeira não (Clique para exibir a imagem em tamanho real)

AnteriorAvançar