Aracılığıyla paylaş

Kullanıcı Etkileşimine Karşılık Olarak Animasyon Ekleme (VB)

  • Makale

Christian Wenz tarafından

PDF’yi İndir

ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, denetime animasyon eklemek için bir çerçevenin tamamıdır. Animasyonlar otomatik olarak başlatılabilir veya örneğin fareyle tıklanarak kullanıcı etkileşimi tarafından tetiklenebilir.

Genel Bakış

ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, denetime animasyon eklemek için bir çerçevenin tamamıdır. Animasyonlar otomatik olarak başlatılabilir veya örneğin fareyle tıklanarak kullanıcı etkileşimi tarafından tetiklenebilir.

Adımlar

Her şeyden önce, sayfasına öğesini ScriptManager ekleyin; ardından ASP.NET AJAX kitaplığı yüklenerek Denetim Araç Seti'nin kullanılmasını mümkün hale getirir:

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

Animasyon, aşağıdaki gibi görünen bir metin paneline uygulanır:

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

Panelin ilişkili CSS sınıfında, güzel bir arka plan rengi tanımlayın ve ayrıca panel için sabit bir genişlik ayarlayın:

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

Ardından , özniteliğini ve zorunluyu runat="server"sağlayarak IDTargetControlID öğesini sayfaya ekleyinAnimationExtender:

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

Düğüm içinde <Animations> , kullanıcı etkileşimi aracılığıyla animasyonu başlatmanın beş yolu vardır (eksik öğe, <OnLoad> sayfanın tamamı yüklendikten sonra yürütülür):

  • <OnClick> (fareyle denetime tıklama)
  • <OnHoverOut> (fare denetimi bırakır)
  • <OnHoverOver> (fare bir denetimin üzerine gelerek animasyonu <OnHoverOut> durdurur)
  • <OnMouseOut> (fare bir denetimi bırakır)
  • <OnMouseOver> (fare bir denetimin üzerine gelerek animasyonu <OnMouseOut> durdurmaz)

Bu senaryoda <OnClick> kullanılır. Kullanıcı panele tıkladığında yeniden boyutlandırılır ve aynı anda kaybolur.

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

Fare tıklaması animasyonu başlatır

Fare tıklaması animasyonu başlatır (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ÖncekiSonraki