Windows Phone開發(36):動畫之DoubleAnimation

來源:互聯網
上載者:User

從本節開始,我們將圍繞一個有趣的話題展開討論——動畫。

看到動畫一詞,你一定想到Flash,畢竟WP應用的一個很重要的架構是Silverlight,在WP中也發揮了Silverlight的許多優點,可能不少人說,Silverlight就是和Flash差不多吧,當你深入瞭解了Silverlight後,你會發現,其實不然,Silverlight更偏重於資料處和企業級應用。

 

好了,F話不多說,開始吹我們今天的牛皮吧,在吹牛皮之前,我們更應該知道牛皮是從哪裡來的。故在說動畫之前,先想一下,什麼是Storyboard?這個東東你覺得怎麼翻譯好呢,叫示範圖板吧,MSDN是這樣翻譯的,我說一個直觀一點的概念吧,不知道各位玩過Flash沒,Flash裡面有一個“幀面板”,是的,其實這個示範圖板和幀面板有著很嚴重的相似之處。

這樣吧,我們還是接受一下.NET非常強大的事實吧,所以,開啟Express Blend來看看一個圖形化的示範圖板,這樣一來,大家一定會更好理解。

 

這樣一看,一定很形象了,Storyboard從TimeLine派生而來,時間軸在動畫裡面是比較關鍵的,我們都知道,所謂動畫會“動”,正是因為它存在一個時間差,“幀”的概念相信大家能理解,只可意會不可言傳啊,看你跟她能有多少默契了。

 

一個Storyboard可以包含N多個子動畫時間軸,今天我們先來瞭解一個比較簡單的,DoubleAnimation是在一定時間段內對兩個double值進行動畫處理,如可視化元素的寬度,高度,透明度等。

 

嚴重警告:不是所有的屬性都能夠進行動畫處理的,要進行動畫處理的屬性必須是依賴項屬性。

 

好了,理論說多了,很容易讓人走火入魔,還是動手幹一下好吧。

下面我們來做一個演練。

 

第一步,建立一個WP應用程式項目,此處省略35個字。

第二步,在頁面中添加一個矩形,兩個按鈕,矩形是“小白鼠”,是用來給我們做動畫實驗的,至於那兩個按鈕,一個是播放動畫,一個是停止動畫。介面怎麼布置,隨你喜歡。

        <!--ContentPanel - 在此處放置其他內容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Grid.RowDefinitions>                <RowDefinition Height="*"/>                <RowDefinition Height="auto"/>            </Grid.RowDefinitions>            <Rectangle x:Name="rec"                       Grid.Row="0"                       Margin="100"                       Fill="Yellow"/>            <StackPanel Grid.Row="1" Orientation="Horizontal">                <Button Content="播放" Click="play_Click"/>                <Button Content="停止" Click="stop_Click"/>            </StackPanel>        </Grid>

 

第三步,在上面那個叫ContentPanel的Grid中加一個Storyboard,作為資源,並在其中聲明一個DoubleAnimation,把矩形的透明度在5秒鐘內變為0,即使矩形產生淡出的動畫效果。

Storyboard.TargetName附加屬性指定要進行動畫處理的對象的名字,你想幹掉誰,就寫上它的名字吧;Storyboard.TargetProperty是要動畫處理的屬性,由於我們要對透明度進行動畫過度,故這裡用Opacity屬性。Duration就是動畫的時間長度,這裡取5秒鐘。

            <Grid.Resources>                <Storyboard x:Name="std">                    <DoubleAnimation                        Duration="0:0:5"                        Storyboard.TargetName="rec"                        Storyboard.TargetProperty="Opacity"                        To="0"/>                </Storyboard>            </Grid.Resources>

第四步,分別處理兩個按鈕的單擊事件,調用Storyboard的Begin和Stop方法來控制項動畫的播放和停止。

        private void play_Click(object sender, RoutedEventArgs e)        {            this.std.Begin();        }        private void stop_Click(object sender, RoutedEventArgs e)        {            this.std.Stop();        }

 

好,現在運行一下看看。

 

 

 

 

不夠爽嗎?再做一個吧,把一個橢圓的寬度在3秒鐘內從20變為420,如何。

看XAML代碼。

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Grid.RowDefinitions>                <RowDefinition />                <RowDefinition Height="Auto" />            </Grid.RowDefinitions>            <Ellipse Grid.Row="0" Height="325" Name="ell"  Width="15" Fill="DarkOrange" />            <StackPanel Grid.Row="1" Orientation="Horizontal">                <Button Content="播放" Click="onPlay"/>                <Button Content="停止" Click="onStop"/>            </StackPanel>                        <Grid.Resources>                <Storyboard x:Name="std">                    <DoubleAnimation Duration="0:0:3"                                     Storyboard.TargetName="ell"                                     Storyboard.TargetProperty="Width"                                     From="20"                                     To="420"/>                </Storyboard>            </Grid.Resources>        </Grid>

 

後台代碼:

        private void onPlay(object sender, RoutedEventArgs e)        {            this.std.Begin();        }        private void onStop(object sender, RoutedEventArgs e)        {            this.std.Stop();        }

 

 看看運行效果。

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.