ASP.net

Ajax Animations - Site που κάνει εντύπωση

Αν και ασχολούμαι καιρό με την Ajax Control Toolkit μπορώ να πω ότι είχα δώσει λίγη σημασία σε έναν extender. Στον animation extender. Χρησιμοποιώντας τον μπορούμε να δημιουργήσουμε animations τα οποία βασίζονται σε javascript και το καλύτερο είναι οτι εμείς δεν χρειάζεται να γράψουμε καθόλου!!!!

Ενα παράδειγμα από αυτά που ακολουθούν βρίσκεται εδώ

Επίσης μπορείτε να κατεβάσετε τον κώδικα από εδώ  

Για να δούμε πως γίνεται αυτό!

Αρχικά δημιουργούμε μια κενή aspx σελίδα και βάζουμε μέσα στο form tag που έχουμε εναν ScriptManager ωστε να υπάροχυν όλες οι διαθέσιμες βιβλιοθήκες του Microsoft Ajax Framework.

Στη συνέχεια προσθέτουμε ένα Button και ένα Animation Extender.

<%-- Animations in a button --%>        <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="myBtn">            <Animations>                    <OnClick>                    <Sequence>                        <EnableAction enabled="false" />                        <FadeOut duration="2" />                    </Sequence>                    </OnClick>            </Animations>        </cc1:AnimationExtender>        <asp:Button ID="myBtn" runat="server" Text="Click Me" OnClientClick="return false;" /> <%-- End of Animations in a button --%>

Εδω με το που κάνει click ο χρήστης στο Button ορίζουμε μια σειρά (sequence) από animations που θα τρέξουν διαδοχικά το ένα μετά το άλλο.

Ορίζουμε αρχικά ότι το Button θα γίνει disable και στη συνέχεια θα κάνει Fade Out με διάρκεια 2 δευτερόλεπτα. Αυτό θα έχει σαν αποτέλεσμα να εξαφανιστεί.

Στη συνέχεια προσθέτουμε ένα Panel, ένα Button, και εναν Animation Extender.

<cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="myBtn2">            <Animations>                    <OnClick>                    <Sequence>                      <EnableAction Enabled="false" />                      <Parallel>                      <Color  AnimationTarget="myPnl"                        Duration="1"                        StartValue="#FF0000"                        EndValue="#666666"                        Property="style"                        PropertyKey="backgroundColor" />                        <Resize Height="0" Width="500" Unit="px" AnimationTarget="myPnl"/>                         <FadeOut  />                        </Parallel>                        <Parallel>                        <Resize Height="200" Width="500" Unit="px" AnimationTarget="myPnl" />                        <Color  AnimationTarget="myPnl"                        Duration="1"                        StartValue="#666666"                        EndValue="#FFFFFF"                        Property="style"                        PropertyKey="backgroundColor" />                        <FadeIn  />                        </Parallel>                        <EnableAction Enabled="true" />                    </Sequence>                    </OnClick>            </Animations>        </cc1:AnimationExtender>        <asp:Panel runat="server" ID="myPnl" Width="500px" Height="200px">            <asp:Button ID="myBtn2" runat="server" Text="Click Me" OnClientClick="return false;" />        </asp:Panel>

Και εδώ κάνουμε τα εξής :

Ορίζουμε σαν target του animation το Button που έχουμε προσθέσει. Δηλαδή όπου δεν το καθορίζουμε explicity με το tag AnimationTarget τότε εννοείτε πως τα animations έχουν ως target το Button.

Άρα όταν ο χρήστης κάνει click στο Button ξεκινάει μια σειρά από animations. Απενεργοποιείται το Button. Στη συνέχεια ακολουθούν 3 Animations που τρέχουν ταυτόχρονα (Parallel) Το 1ο (Color) αλλάζει το background color του target (Panel) από μια καθορισμένη τιμή σε μία άλλη με διάρκεια 1 δευτερόλεπτο. Το 2ο (Resize) αλλάζει το Width και το Height του target (Panel) και το 3ο (FadeOut) προκαλεί το target control (Button) να εξαφανιστεί. Όλα αυτά γίνονται σε 1 δευτερόλεπτο. Αφού έχει καθοριστεί μία φορά σε κάποιο animation που βρίσκεται μέσα στο Parallel οσα έχουν το property duration παίρνουν αυτή την τιμή.

Και παρακάτω γίνονται οι αντίστροφες κινήσεις.

Και όλα αυτά χωρίς ΟΥΤΕ ΜΙΑ ΓΡΑΜΜΗ Javascript.

Links : Animation Reference

Using Animations