概述

Silverlight 2 Beta 1版本發(fā)布了，無(wú)論從Runtime還是Tools都給我們帶來(lái)了很多的驚喜，如支持框架語(yǔ)言Visual Basic, Visual C#, IronRuby, IronPython，對(duì)JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學(xué)Silverlight 2系列》文章將從Silverlight 2基礎(chǔ)知識(shí)、數(shù)據(jù)與通信、自定義控件、動(dòng)畫(huà)、圖形圖像等幾個(gè)方面帶您快速進(jìn)入Silverlight 2開(kāi)發(fā)。

本文我們?cè)賹?shí)現(xiàn)一個(gè)圖形圖像實(shí)例——圖片播放，并利用Storyboard實(shí)現(xiàn)一些動(dòng)畫(huà)效果。

今天我也當(dāng)一回“標(biāo)題當(dāng)”:)，其實(shí)就是實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片播放器，跟“功夫之王”劇照半點(diǎn)關(guān)系也沒(méi)有，只不過(guò)我上網(wǎng)找了幾張即將播出的的電影《功夫之王》的劇照，作為我們的示例圖片。

實(shí)現(xiàn)效果

最終我們實(shí)現(xiàn)的效果如下，初始界面

點(diǎn)擊左邊或者右邊小圖片播放

再來(lái)一張播放中的

主要實(shí)現(xiàn)

在單擊時(shí)動(dòng)態(tài)改變圖片的Source屬性：

void Play(){    currentImg.Source = new BitmapImage(new Uri(index.ToString() + ".png", UriKind.Relative));    int left = index == MIN ? MAX : index - 1;    leftImg.Source = new BitmapImage(new Uri(left.ToString() + ".png", UriKind.Relative));    int right = index == MAX ? MIN : index + 1;    rightImg.Source = new BitmapImage(new Uri(right.ToString() + ".png", UriKind.Relative));}

并通過(guò)Storyboard來(lái)改變Transform的一些值實(shí)現(xiàn)動(dòng)畫(huà)效果：

<Canvas.Resources>    <Storyboard x:Name="myStoryboard">        <DoubleAnimation  Storyboard.TargetName="myTransform"  Storyboard.TargetProperty="AngleY"  From="0" To="180" Duration="0:0:5" RepeatBehavior="1x"/>        <DoubleAnimation  Storyboard.TargetName="leftScaleTransform"  Storyboard.TargetProperty="ScaleX"  From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>        <DoubleAnimation  Storyboard.TargetName="leftScaleTransform"  Storyboard.TargetProperty="ScaleY"  From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>        <DoubleAnimation  Storyboard.TargetName="rightScaleTransform"  Storyboard.TargetProperty="ScaleX"  From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>        <DoubleAnimation  Storyboard.TargetName="rightScaleTransform"  Storyboard.TargetProperty="ScaleY"  From="0" To="1" Duration="0:0:5" RepeatBehavior="1x"/>    </Storyboard></Canvas.Resources

大家可以從這里下載完整示例代碼。

結(jié)束語(yǔ)

本文實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的圖片播放器，并利用Storyboard實(shí)現(xiàn)一些動(dòng)畫(huà)效果。

NET技術(shù)：一步一步學(xué)Silverlight ：圖形圖像綜合實(shí)例--"功夫之王"劇照播放，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。