.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实现一些动画效果。

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

实现效果

最终我们实现的效果如下,初始界面
QL|s T c!f!{L0ITPUB个人空间Ru9P;O}ajX
点击左边或者右边小图片播放ITPUB个人空间PRD;o*~
ITPUB个人空间_#d#`Ohp
ITPUB个人空间k!FX#M:Q:|@&w
再来一张播放中的ITPUB个人空间+Hg^4J$m&n2_
ITPUB个人空间'w,O)CF6Knv!XE
ITPUB个人空间0E Z-SZ6INEy0e

主要实现

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

voidPlay()
;~p'jA;l_%s0{
(e0Jw4bq;r0currentImg.Source =newBitmapImage(newUri(index.ToString() +".png",UriKind.Relative));ITPUB个人空间q W(Cq^zJ
ITPUB个人空间 wZ t!wgN
intleft = index == MIN ? MAX : index - 1;
&P ZL8oD*a0leftImg.Source =newBitmapImage(newUri(left.ToString() +".png",UriKind.Relative));ITPUB个人空间7K7S T%K$M
ITPUB个人空间t0C$KM,R{:xU
intright = index == MAX ? MIN : index + 1;ITPUB个人空间^/yJ*zB3p/C1~.J0m
rightImg.Source =newBitmapImage(newUri(right.ToString() +".png",UriKind.Relative));
P G}p#e8_L0}

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

<Canvas.Resources>
g A/J;_ k+p2p0<
Storyboardx:Name="myStoryboard">
N mTvIze(u3M0<
DoubleAnimation
J1vJf\|-P*I]%N0
Storyboard.TargetName="myTransform"
-E&OK;~:un;S:E0
Storyboard.TargetProperty="AngleY"
&vM!Ny| i a0
From="0"To="180"Duration="0:0:5"RepeatBehavior="1x"/>ITPUB个人空间b?-u$v5Y:JmGCL A
<
DoubleAnimation
8[pf$s%Uz&l^0
Storyboard.TargetName="leftScaleTransform"
R-R6t0JelwE,?0
Storyboard.TargetProperty="ScaleX"ITPUB个人空间 nL w8K:g
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>
s1C3l'[Gr g#W}(h0<
DoubleAnimationITPUB个人空间 U f2iVm%T;tG
Storyboard.TargetName="leftScaleTransform"
v N2W @7C+fO0
Storyboard.TargetProperty="ScaleY"
p"gKC*pr2Ue \x J0
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>ITPUB个人空间n.b|Cc,]/`i+LY
<
DoubleAnimation
t"g.P%GQ]2R(C5dW4u0
Storyboard.TargetName="rightScaleTransform"
_5\eM0Td'gk0
Storyboard.TargetProperty="ScaleX"ITPUB个人空间 `#ypW2[Y0i,fy
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>ITPUB个人空间0I$}-I&BLF Q
<
DoubleAnimationITPUB个人空间T4OL)QM o
Storyboard.TargetName="rightScaleTransform"
A3MR)`m!j w d0
Storyboard.TargetProperty="ScaleY"
3lwu4]x0
From="0"To="1"Duration="0:0:5"RepeatBehavior="1x"/>ITPUB个人空间{ `)c8f/y@
</
Storyboard>ITPUB个人空间Z'm5am1AyYUdx
</
Canvas.Resources

大家可以从这里下载完整示例代码。

结束语

本文实现了一个简单的图片播放器,并利用Storyboard实现一些动画效果。

作者:TerryLee
L4A,~ j]\ M4l0出处:http://terrylee.cnblogs.com

ITPUB个人空间6l3@2o8V*@A o4S


TAG:

引用 删除 Guest   /   2010-09-01 10:55:27
5
引用 删除 Guest   /   2008-04-30 22:16:28
5
引用 删除 Guest   /   2008-04-23 15:19:30
1
 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

日历

« 2012-02-10  
   1234
567891011
12131415161718
19202122232425
26272829   

数据统计

  • 访问量: 665817
  • 日志数: 3733
  • 影音数: 7
  • 文件数: 1
  • 建立时间: 2008-01-04
  • 更新时间: 2010-12-31

RSS订阅

Open Toolbar