一步一步学Silverlight 2系列（30）：使用Transform实现更炫的效果（下）

概述

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

本文为使用 Transform实现更炫的效果第二部分，在Silverlight中提供了四种基本变换：旋转变换（RotateTransform. ）、缩放变换（ScaleTransform）、倾斜变换（SkewTransform）、移动变换（TranslateTransform）和两种复杂 的变换：变换组（TransformGroup）、矩阵变换（MatrixTransform. ），这些变换可以运用到任何控件或者图形图像。

矩阵变换（MatrixTransform. ）

矩阵变换MatrixTransform是所有变换中功能最强大最灵活也是最复杂的一种变换，如果前面讲解的几种基本变化不能满足我们在实际开发中的需求，可以使用矩阵变换进行自定义，它允许我们直接对变换矩阵进行操作。

在Silverlight中，变换是提供一个3*3的矩阵，我们通过修改矩阵中成员的值来实现变换，矩阵的定义如下所示：
R x'W4H o;z8]0Or P*IC0ITPUB个人空间AvC8f3Y4QsB)V

如修改OffsetX，元素将会在X轴上进行移动；修改OffsetY，元素将在Y轴上移动；修改M22为2，元素的高度将会拉伸2倍，通过该矩 阵，我们能实现前面提到的几种基本变换的所有功能。更详细的解释大家可以参考SDK。如下面的例子，我们使用矩阵变换，仍然能实现前面示例中的变换效果：

<CanvasBackground="#CDFCAE">
f4{l5gn3sVC0<ImageSource="a1.png"Canvas.Left="120"Canvas.Top="50"Opacity="0.3">
L#[h1Q,tI0</Image>ITPUB个人空间`y*Xtc ]H@,?/g
<ImageSource="a1.png"Canvas.Left="120"Canvas.Top="50"Opacity="0.5">
:z$J%v$P&TqP~l6I0<Image.RenderTransform>
Wm,E#g6Xm0<MatrixTransform>
h/gj/t?Y2u0SC0<MatrixTransform.Matrix>ITPUB个人空间_H`Q
M)}
<MatrixOffsetX="0"OffsetY="0"M12="0.2"></Matrix>

mT1s zouXSNq^0</MatrixTransform.Matrix>ITPUB个人空间:[4Vvn
w#X/~
[
</MatrixTransform>
$^Fl)Q4q.d j0</Image.RenderTransform>
aT"HR ihx)N2rm0</Image>ITPUB个人空间4~8l_U9uTCa5b

XK7C-LJ0<ImageSource="a1.png"Canvas.Left="120"Canvas.Top="50">
O+Ab5n4y&C#R|0<Image.RenderTransform>
6b8c"AET7{I	q0<MatrixTransform>
4bL-G@)i~y0<MatrixTransform.Matrix>
%~m*w
Xi]z'V)?!k0<MatrixOffsetX="0"OffsetY="0"M12="0.4"></Matrix>
1G(i1Y1t?l)h*Q0</MatrixTransform.Matrix>ITPUB个人空间	P$g!@5ZBLPMD5l
</MatrixTransform>
@3^5S*k"u8T4K0</Image.RenderTransform>
l	rg
N-t
u0</Image>
G8O#P`PR%c:u"A#E0</Canvas>

运行后效果如下：
6d2G!{x X/b+L0ITPUB个人空间k3{tP#e8PQCC%@

实现动画变换

Transform与Silverlight中的Storyboard结合，可以很容易的实现出动画变换的效果，如下面的例子，当鼠标放在上去的时候，图片开始旋转；鼠标离开时停止旋转：

<CanvasBackground="#CDFCAE">ITPUB个人空间fq
k\1?Q QF\
<Canvas.Resources>
	@R8@"fQ
l0<Storyboardx:Name="myStoryboard">ITPUB个人空间G5nmk&?5G
<DoubleAnimation
0b:wQ
nc0Storyboard.TargetName="myTransform"
(SQ*Aw
LyF]'u0Storyboard.TargetProperty="Angle"ITPUB个人空间yL8M;N6wX^;j
From="0"To="180"Duration="0:0:5"RepeatBehavior="Forever" />
RnI(_;RkD0</Storyboard>
#b
cO	`Mf&R
Lt/C0</Canvas.Resources>
3Gl}+gMU$RA0<Imagex:Name="imgTarget"Source="a1.png"Canvas.Left="180"Canvas.Top="80"
,CXD\mU"j8{7?5w0MouseEnter="imgTarget_MouseEnter"MouseLeave="imgTarget_MouseLeave">ITPUB个人空间5Qs#T.T!c4nl
<Image.RenderTransform>ITPUB个人空间A)u!}#x:W
<RotateTransform.x:Name="myTransform"Angle="15"CenterX="120"CenterY="68" />ITPUB个人空间Rg-\$u	b"O
</Image.RenderTransform>ITPUB个人空间6P\KZ
Y N
</Image>ITPUB个人空间3|
K
Z*WB.wr"Z2|1J
</Canvas>

在代码中控制Storyboard：

private voidimgTarget_MouseEnter(objectsender,MouseEventArgse)
E$tj}
D/D0{
/fXy/Y.iY0myStoryboard.Begin();
Em9g7`R0}ITPUB个人空间L!\!F*sSUK0K7`1]+g!xp
ITPUB个人空间LZ e7Wj~
private voidimgTarget_MouseLeave(objectsender,MouseEventArgse)
/Afix]6]d*_0{

sx.v,Lkyp `NS0myStoryboard.Stop();ITPUB个人空间
{*w8Bs3h#n6y/R^
}

运行后效果如下：

o%NC!ybN;a7t f#D;_A0
+UK{^ILdn0

用代码控制变换

这个话题其实没什么好讲的，在后台代码中对Transform进行控制，如下面的例子，每次点击图片时，都让RotateTransform的角度增加15度：

<CanvasBackground="#CDFCAE">
qD
[,s!Y#L?'g'YF
V
Q0<ImageSource="a1.png"Canvas.Left="180"Canvas.Top="80"Opacity="0.3">ITPUB个人空间:LEd\9[M'D!X
</Image>
qqPjAv0<Imagex:Name="imgTarget"Source="a1.png"Canvas.Left="180"Canvas.Top="80"ITPUB个人空间DW5QY6Z
MouseLeftButtonDown="imgTarget_MouseLeftButtonDown">

F
an#PZ~(oUK0<Image.RenderTransform>ITPUB个人空间:bKr.E'f3E,~z
<RotateTransform.x:Name="myTransform"Angle="0"CenterX="120"CenterY="68" />ITPUB个人空间
X9VFeGc4C8sNP*`
</Image.RenderTransform>
f/zI8elML
WS$L8C0</Image>ITPUB个人空间$_x,t?	OS%`A
</Canvas>

后台代码：

private voidimgTarget_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)
;z]w5j'ZR0{
&]?8z,TDp5v0myTransform.Angle = myTransform.Angle + 15;
9kU\9c{s'l7Y0}

运行后起始界面如下：

结束语

本文为使用Transform实现更炫的效果第二部分，介绍了矩阵变换以及如何实现动画变换、在代码中控制变换，接下来我将会运用前面几篇关于图形图像处理的知识写一个综合实例。