Bir Denetime Animasyon Ekleme (C#)

  • Makale

Christian Wenz tarafından

PDF’yi İndir

ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, bir denetime animasyon eklemek için bir çerçevenin tamamıdır. Bu öğreticide böyle bir animasyonu ayarlama işlemi gösterilmektedir.

Genel Bakış

ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, bir denetime animasyon eklemek için bir çerçevenin tamamıdır. Bu öğreticide böyle bir animasyonu ayarlama işlemi gösterilmektedir.

Adımlar

İlk adım, ASP.NET AJAX kitaplığının yüklenmesi ve Denetim Araç Seti'nin kullanılabilmesi için sayfasına eklemektir ScriptManager :

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

Bu senaryodaki 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ı bir arka plan rengi ve genişlik tanımlar:

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

Bir sonraki adımda, . AnimationExtender.. ve ID sağlandıktan runat="server"sonra özniteliği, TargetControlID bizim örneğimizde animasyon eklemek için denetime ayarlanmalıdır, panel:

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

Animasyonların tamamı, XML söz dizimi kullanılarak bildirim temelli olarak uygulanır; ne yazık ki şu anda Visual Studio'nun IntelliSense'i tarafından tam olarak desteklenmemektedir. Kök düğüm bu düğümün içindedir <Animations>; ve animasyonların ne zaman gerçekleşeceğini belirleyen çeşitli olaylara izin verilir:

  • OnClick (fare tıklaması)
  • OnHoverOut (fare bir denetimden ayrıldığında)
  • OnHoverOver (fare bir denetimin üzerine geldiğinde animasyonu OnHoverOut durdurur)
  • OnLoad (sayfa yüklendiğinde)
  • OnMouseOut (fare bir denetimden ayrıldığında)
  • OnMouseOver (fare bir denetimin üzerine geldiğinde, animasyonu OnMouseOut durdurmadığında)

Çerçeve, her biri kendi XML öğesiyle temsil edilen bir animasyon kümesiyle birlikte gelir. İşte bir seçim:

  • <Color> (rengi değiştirme)
  • <FadeIn> (sönen)
  • <FadeOut> (sönerek)
  • <Property> (denetimin özelliğini değiştirme)
  • <Pulse> (pulsating)
  • <Resize> (boyutu değiştirme)
  • <Scale> (boyutu orantılı olarak değiştirme)

Bu örnekte panel kaybolacaktır. Animasyon 1,5 saniye (Duration öznitelik) sürer ve saniyede 24 kare (animasyon adımları) (Fps öznitelik) görüntülenir. Denetimin tam işaretlemesi aşağıdadır AnimationExtender :

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <FadeOut Duration="1.5" Fps="24" />
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Bu betiği çalıştırdığınızda panel görüntülenir ve bir buçuk saniye içinde kaybolur.

Panel tükeniyor

Panel soluk görüntüleniyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Sonraki