一步一步学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的矩阵，我们通过修改矩阵中成员的值来实现变换，矩阵的定义如下所示：
/]#p(gMk P}~,]!X1Q0
-E Rx[6s"K3SK0

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

<CanvasBackground="#CDFCAE">ITPUB个人空间$Y.v'D/^V9b"Y_
<ImageSource="a1.png"Canvas.Left="120"Canvas.Top="50"Opacity="0.3">
k-V7c$UWV@f4a0</Image>ITPUB个人空间W)FB,XpaE3[8N
<ImageSource="a1.png"Canvas.Left="120"Canvas.Top="50"Opacity="0.5">

`%Q-q4g`"ynC0<Image.RenderTransform>
;^:G
FP4QrH3c0<MatrixTransform>
7I*z_4|[0<MatrixTransform.Matrix>
;w1p1r
bz-ej~)U0<MatrixOffsetX="0"OffsetY="0"M12="0.2"></Matrix>
.]%Uk9yvFlI+Sp0</MatrixTransform.Matrix>
x;jI2f8V%e
c	~:k0</MatrixTransform>
kM)k!@@*K_hW|0</Image.RenderTransform>
)f$_;M3R0Uj.{L#]0</Image>ITPUB个人空间&V2Qv'N3z

*}ozCnzZ
lor0<ImageSource="a1.png"Canvas.Left="120"Canvas.Top="50">
E
dj)}2gS1I1I6[2K5s0<Image.RenderTransform>
!{W6N[-V5|J0<MatrixTransform>
MJTo%AK5]0<MatrixTransform.Matrix>
o3t+tL2o.f0<MatrixOffsetX="0"OffsetY="0"M12="0.4"></Matrix>
b3C2O
f7o2\0</MatrixTransform.Matrix>
P;_jY$ux;gpY0</MatrixTransform>ITPUB个人空间[\2RX,G-]*Cn
</Image.RenderTransform>ITPUB个人空间0E~r%d$S
</Image>ITPUB个人空间r
PM$L@&j2t
</Canvas>

运行后效果如下：
2rJr F#l)f0ITPUB个人空间 @6P.pU;x

实现动画变换

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

<CanvasBackground="#CDFCAE">
F0{u&_z0<Canvas.Resources>
HE}{(o@0<Storyboardx:Name="myStoryboard">
"vq
L+m"`WU0<DoubleAnimationITPUB个人空间ZDN Pn!ry+\p"S
Storyboard.TargetName="myTransform"ITPUB个人空间FSJ/ILW|
Storyboard.TargetProperty="Angle"

X-eW:dA,iE
U.H0From="0"To="180"Duration="0:0:5"RepeatBehavior="Forever" />
%I#m]&YAI1y!N~`0</Storyboard>ITPUB个人空间!^O%H!J@
</Canvas.Resources>
N@.hQ3|
w^-y0<Imagex:Name="imgTarget"Source="a1.png"Canvas.Left="180"Canvas.Top="80"
t;D#[.J.mOl
q0MouseEnter="imgTarget_MouseEnter"MouseLeave="imgTarget_MouseLeave">
f.l	gD@\DXH0<Image.RenderTransform>
Z3m9oE{0<RotateTransform.x:Name="myTransform"Angle="15"CenterX="120"CenterY="68" />ITPUB个人空间9pOlA0R
</Image.RenderTransform>
!k9a&m!E'Q!D N0</Image>ITPUB个人空间-UBsID(h
</Canvas>

在代码中控制Storyboard：

private voidimgTarget_MouseEnter(objectsender,MouseEventArgse)
5KB:q5{8\a@2qen!e0{ITPUB个人空间bJvK7|+b
i;GI
myStoryboard.Begin();ITPUB个人空间Rc2_;u/L!e)x
}
'Y6I`QL'K0
Gs
?}~9I:s0private voidimgTarget_MouseLeave(objectsender,MouseEventArgse)
%J F$m0X
x0{ITPUB个人空间d0_]4|X4\VR
myStoryboard.Stop();ITPUB个人空间JG8M1p*uO2_f
}

运行后效果如下：

Q!L2ZEC}0
{] bO?6Ue0

用代码控制变换

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

<CanvasBackground="#CDFCAE">ITPUB个人空间
vr*_!j8YC!@
<ImageSource="a1.png"Canvas.Left="180"Canvas.Top="80"Opacity="0.3">
Y6?JNBQ.JR:~.i0</Image>
V3Td9J$v}C0<Imagex:Name="imgTarget"Source="a1.png"Canvas.Left="180"Canvas.Top="80"ITPUB个人空间rS3td
HLf"l,Vi"L
MouseLeftButtonDown="imgTarget_MouseLeftButtonDown">ITPUB个人空间'Os1g:i7_&sX
<Image.RenderTransform>

vpzFeOz3s:K)n0<RotateTransform.x:Name="myTransform"Angle="0"CenterX="120"CenterY="68" />
	p*u4@7?K(j3F)}Y0</Image.RenderTransform>
sn @QQ0</Image>ITPUB个人空间!c0cbZ,Ykyk
</Canvas>

后台代码：

private voidimgTarget_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)ITPUB个人空间ei6{.UMb8V-P
{
/S
F	}}Ir;}0myTransform.Angle = myTransform.Angle + 15;
n~!GOMJzK0}

运行后起始界面如下：

结束语

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