.NEt专家博客！

一步一步学Silverlight 2系列（32）：图形图像综合实例—“功夫之王”剧照播放

上一篇 / 下一篇 2008-04-11 21:58:48

概述

Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发。

本文我们再实现一个图形图像实例——图片播放，并利用Storyboard实现一些动画效果。

今天我也当一回“标题当”:)，其实就是实现一个简单的图片播放器，跟“功夫之王”剧照半点关系也没有，只不过我上网找了几张即将播出的的电影《功夫之王》的剧照，作为我们的示例图片。

实现效果

最终我们实现的效果如下，初始界面ITPUB个人空间q.Y,anPN)x

~"g{%gj.?RXd[0点击左边或者右边小图片播放
b9W i'e:lP0ITPUB个人空间(]]N2^c8?

D|w^8K;p2?C4G-u0再来一张播放中的
'dd+e[5x0
WmT!n6\0
o ~UEP0

主要实现

在单击时动态改变图片的Source属性：

voidPlay()ITPUB个人空间A~
rF(Kf`t\$@
{
O'`s2s9]"`u9@!B:o9c!\0currentImg.Source =newBitmapImage(newUri(index.ToString() +".png",UriKind.Relative));
(jH0]-a V)a}6s6_E6^:v(ZH0ITPUB个人空间5I.i@%AU;m(K
intleft = index == MIN ? MAX : index - 1;ITPUB个人空间\]d2S1Ql!hRI$Y'T
leftImg.Source =newBitmapImage(newUri(left.ToString() +".png",UriKind.Relative));
2@w%i(l(GFP Y0ITPUB个人空间mT0Ed1S,l
intright = index == MAX ? MIN : index + 1;
[5i8|_a0rightImg.Source =newBitmapImage(newUri(right.ToString() +".png",UriKind.Relative));ITPUB个人空间i3c%I,rc
s~
}

并通过Storyboard来改变Transform的一些值实现动画效果：

<Canvas.Resources>
-V:v\B"HJ6j5P0<Storyboardx:Name="myStoryboard">
?'^8M	W5D+jI}0<DoubleAnimation
L0AED#o0Storyboard.TargetName="myTransform"
r(nMlVfX0Storyboard.TargetProperty="AngleY"ITPUB个人空间bP
~"};tZ!UOm@r
From="0"To="180"Duration="0:0:5"RepeatBehavior="1x"/>ITPUB个人空间
[ Wg \v,[KYg
<DoubleAnimation
7w1_*dQE'y0Storyboard.TargetName="leftScaleTransform"ITPUB个人空间z5EC1rtz,}7O
Storyboard.TargetProperty="ScaleX"ITPUB个人空间4{,J,r\i5y
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>
){[P/q8AEU0<DoubleAnimationITPUB个人空间w
|:RR;??g
Storyboard.TargetName="leftScaleTransform"ITPUB个人空间6x R'a]u|(X
Storyboard.TargetProperty="ScaleY"ITPUB个人空间4y![Iujg H
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>
*V%@:VbjV6Yj0<DoubleAnimation
h)uYG \"P)B&b0Storyboard.TargetName="rightScaleTransform"
O0Gr3TfM0Storyboard.TargetProperty="ScaleX"
:N%DK#swffVE0From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>
:Pq*W
v%tQ&f4b;zw0<DoubleAnimationITPUB个人空间v^}b*H2me0h
Storyboard.TargetName="rightScaleTransform"ITPUB个人空间#`G$F$S*S
Storyboard.TargetProperty="ScaleY"ITPUB个人空间Z^J.Fx
o
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>
*N)J8J(g%Fq0</Storyboard>
 Z9{j	Dztf'Ut.X0</Canvas.Resources