.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实现一些动画效果。
今天我也当一回“标题当”:),其实就是实现一个简单的图片播放器,跟“功夫之王”剧照半点关系也没有,只不过我上网找了几张即将播出的的电影《功夫之王》的剧照,作为我们的示例图片。
实现效果
最终我们实现的效果如下,初始界面
c4ue!c(nc{+F#AD0
ITPUB个人空间2V#s6fXi
点击左边或者右边小图片播放ITPUB个人空间k:o9xvA r
ITPUB个人空间,m;`LZ1c
o+fk.h'}U5\[d0再来一张播放中的
yu)?'S0K8B0
8H3r3BCe"m9H^%oET0
rUy@}6]0
主要实现
在单击时动态改变图片的Source属性:
voidPlay()ITPUB个人空间$s'`-n8e%Hq
@6c0U
{ITPUB个人空间a%g$J%Zru(e
currentImg.Source =newBitmapImage(newUri(index.ToString() +".png",UriKind.Relative));ITPUB个人空间$T0y`sr
ITPUB个人空间| U i8y#^W0Wd0Q
intleft = index == MIN ? MAX : index - 1;ITPUB个人空间.}U|
^(Q6V
leftImg.Source =newBitmapImage(newUri(left.ToString() +".png",UriKind.Relative));
r G
SSl!U.b:j;Y0
$["pO}.jxRP+s0intright = index == MAX ? MIN : index + 1;ITPUB个人空间:a,q%yx#m
rightImg.Source =newBitmapImage(newUri(right.ToString() +".png",UriKind.Relative));
_v
BHUO8I3E]0}
并通过Storyboard来改变Transform的一些值实现动画效果:
<Canvas.Resources>ITPUB个人空间 M%@-ipk6f
J
<Storyboardx:Name="myStoryboard">ITPUB个人空间%?e _$Q7w
nz"N
<DoubleAnimationITPUB个人空间m6LkSm
j%]
Storyboard.TargetName="myTransform"
#@5PV"|!~B0Storyboard.TargetProperty="AngleY"ITPUB个人空间u @"iy*V
From="0"To="180"Duration="0:0:5"RepeatBehavior="1x"/>
3X1T;k
B1IMH4y0<DoubleAnimation
2Z9~aVL.dQ2F0Storyboard.TargetName="leftScaleTransform"ITPUB个人空间F|;|5ST]!N
Storyboard.TargetProperty="ScaleX"ITPUB个人空间;n U8L8W j#Y.}
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>
Gu ig SQ0<DoubleAnimation
QF^/~/yU.|0Storyboard.TargetName="leftScaleTransform"ITPUB个人空间;W j2eTU$[!Y
Storyboard.TargetProperty="ScaleY"ITPUB个人空间yw U,I2sy
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>ITPUB个人空间gg&A
\8N'PuU
<DoubleAnimationITPUB个人空间'YQ"_/qR8~a2z2J
Storyboard.TargetName="rightScaleTransform"
(R\(XV;F#G4R4U0Storyboard.TargetProperty="ScaleX"ITPUB个人空间.[8w/SR~Z,? k#T
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>
}:{]/_$sF^9B*_0<DoubleAnimationITPUB个人空间O.s"l2u
B.L%eg
Storyboard.TargetName="rightScaleTransform"ITPUB个人空间 `(~I/E:s%s#p Mn
Storyboard.TargetProperty="ScaleY"ITPUB个人空间%Q"[ h3X _'_M0U
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>
R6fvw?i,vMY6v0</Storyboard>
(}u+z7{9t-a~%q$]"b^0</Canvas.Resources
大家可以从这里下载完整示例代码。
结束语
本文实现了一个简单的图片播放器,并利用Storyboard实现一些动画效果。
P uY*_U4fr)J7d0
导入论坛
引用链接
收藏
分享给好友
推荐到圈子
管理
举报
TAG: