.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个人空间3N#h
H5rYUt
ITPUB个人空间Z[d4I5T7g1t
点击左边或者右边小图片播放ITPUB个人空间.uy9YR
][wt7E|

$g
O1h+qw*t/H A6a7zm0ITPUB个人空间7R#C`2QV$sbQ-VD
再来一张播放中的
su/I"M4o0
ITPUB个人空间j}.vFm
M
dD?Bu0
主要实现
在单击时动态改变图片的Source属性:
voidPlay()ITPUB个人空间ZL-d*s7]J
{ITPUB个人空间(syq X`)}J7|
currentImg.Source =newBitmapImage(newUri(index.ToString() +".png",UriKind.Relative));ITPUB个人空间!`(J6C9lD.^
W_D9y#~#SB)Zk0intleft = index == MIN ? MAX : index - 1;
&zI&Yw&}x0leftImg.Source =newBitmapImage(newUri(left.ToString() +".png",UriKind.Relative));
T5x|/E!{e)h0
:`2U&F#`$Z
DY-|h A0intright = index == MAX ? MIN : index + 1;ITPUB个人空间BQ.X:T9z:l7W%\
rightImg.Source =newBitmapImage(newUri(right.ToString() +".png",UriKind.Relative));
^8`4f2}"h J${6f]0}
并通过Storyboard来改变Transform的一些值实现动画效果:
<Canvas.Resources>
9Ab)Y)pY!r2@0<Storyboardx:Name="myStoryboard">ITPUB个人空间ME@I s:s+l;L{t
<DoubleAnimation
Dz"x7N^-zw0Storyboard.TargetName="myTransform"ITPUB个人空间Fe'ZS:Uz
Storyboard.TargetProperty="AngleY"
^af9aB6E+D|U)kn0From="0"To="180"Duration="0:0:5"RepeatBehavior="1x"/>ITPUB个人空间O&u`0N9q}
u}y&x$h
<DoubleAnimationITPUB个人空间0fB.|;s@Z
m8G~d
Storyboard.TargetName="leftScaleTransform"ITPUB个人空间r&z%w/zleTw7Y
Storyboard.TargetProperty="ScaleX"ITPUB个人空间r~@FR+lt JA
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>
N9W*f _o?a'D)y0<DoubleAnimation
oA,L;t
D4Vh0Storyboard.TargetName="leftScaleTransform"
-GK`R6a6C1v0Storyboard.TargetProperty="ScaleY"ITPUB个人空间*z$ql(b7G
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>ITPUB个人空间,BxFZ9y v
<DoubleAnimationITPUB个人空间9{j(A
G bf
Storyboard.TargetName="rightScaleTransform"
.\;N+JIl0Storyboard.TargetProperty="ScaleX"ITPUB个人空间$Mq1D]{
h$Z9Oh
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>ITPUB个人空间I`,meJw#Fq-[${
<DoubleAnimation
(h9Y*d
[5grZi0Storyboard.TargetName="rightScaleTransform"
l1|+r-h?"h+O0e
e0Storyboard.TargetProperty="ScaleY"ITPUB个人空间g/[ u,G.~3~&V
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>ITPUB个人空间8w"L7hhY8I.h
</Storyboard>ITPUB个人空间+tEy]?)zl
</Canvas.Resources
大家可以从这里下载完整示例代码。
结束语
本文实现了一个简单的图片播放器,并利用Storyboard实现一些动画效果。
#i1m)V8G
}m*C0
导入论坛
引用链接
收藏
分享给好友
推荐到圈子
管理
举报
TAG: