Aynı Anda Birkaç Animasyon Yürütme (C#)

  • 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. Birkaç animasyonu paralel bir şekilde çalıştırmaya olanak tanır.

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. Birkaç animasyonu paralel bir şekilde çalıştırmaya olanak tanır.

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> , sayfa tamamen yüklendikten sonra animasyonları çalıştırmak için kullanın <OnLoad> . Genel olarak, <OnLoad> yalnızca bir animasyonu kabul eder. Animasyon çerçevesi, öğesini kullanarak birkaç animasyonu tek bir animasyonda <Parallel> birleştirmenizi sağlar. içindeki <Parallel> tüm animasyonlar aynı anda yürütülür.

Denetimin olası işaretlemesi AnimationExtender , soluklaştırma ve paneli aynı anda yeniden boyutlandırma aşağıdadır:

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

Ve gerçekten: Bu betiği çalıştırdığınızda panel görüntülenir, ardından yeniden boyutlandırılır (genişliğinin sabitlenmesinden ve yüksekliğinin yarıya indirilmesinden daha fazlası) ve aynı anda soluk görünür.

Panel soluklaştırılıyor ve yeniden boyutlandırılıyor (tarayıcının işleme altyapısı sayesinde içeriği dahil)

Panel soluklaştırılıyor ve yeniden boyutlandırılıyor (içeriği, tarayıcının işleme altyapısı sayesinde dahil) (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ÖncekiSonraki