Alterar uma animação usando o código do lado do cliente (VB)
por Christian Wenz
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 animação também pode ser alterada 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 animação também pode ser alterada 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>
A animação real é iniciada por um botão HTML:
<input type="button" id="Button1" runat="server" value="Launch Animation" />
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="Button1" />
Observe que não há nenhum <Animations> nó dentro do AnimationExtender controle . O código JavaScript personalizado é usado para fornecer as animações a serem usadas com o controle .
Assim como acontece com a API do servidor do AnimationExtender, ainda não há uma maneira fácil de atribuir uma animação ao extensor. No entanto, o extensor expõe vários métodos para ler e gravar animações registradas com os vários eventos (OnClick, OnLoade assim por diante). Estes são alguns exemplos:
get_OnClick()set_OnClick()get_OnLoad()set_OnLoad()...
O formato do valor retornado das get_*() funções e o formato do argumento para as set_*() funções é uma cadeia de caracteres JSON, fornecendo uma representação de objeto do que seria a marcação XML. Atualmente, não há como passar um objeto, mas é possível ler um objeto de uma determinada animação (get_OnXXXBehavior() métodos).
Aqui está uma cadeia de caracteres JSON (sem as aspas delimitador e formatadas corretamente) que representa uma animação disparada pelo botão, mas animando o painel redimensionando-o e esmaecendo-o ao mesmo tempo:
{
"AnimationName":"Sequence",
"AnimationChildren":[
{
"AnimationName":"EnableAction",
"Enabled":"false",
"AnimationChildren":[]
},
{
"AnimationName":"Parallel",
"AnimationChildren":[
{
"AnimationName":"FadeOut",
"Duration":"1.5",
"Fps":"24",
"AnimationTarget":"Panel1",
"AnimationChildren":[]
},
{
"AnimationName":"Resize",
"Width":"1000",
"Height":"150",
"Unit":"px",
"AnimationTarget":"Panel1",
"AnimationChildren":[]
}]
}]
}
O código JavaScript a seguir atribui esse descritor JSON à OnClick animação do extensor atual e o executa:
<script type="text/javascript">
function pageLoad()
{
var ae = $find("ae");
var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';
ae.set_OnClick(animation);
ae.OnClick();
}
</script>
A animação é executada imediatamente, sem um clique do mouse (e com muito pouca marcação) (Clique para exibir a imagem em tamanho real)
