一步一步学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的矩阵，我们通过修改矩阵中成员的值来实现变换，矩阵的定义如下所示：ITPUB个人空间9M's |plDU
ITPUB个人空间d`G@ j6|

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

<CanvasBackground="#CDFCAE">
 B?*V1Hjma0<ImageSource="a1.png"Canvas.Left="120"Canvas.Top="50"Opacity="0.3">ITPUB个人空间s9\/~!_$l1Kk5e8L
</Image>
d
n!cMe-J%D4B0<ImageSource="a1.png"Canvas.Left="120"Canvas.Top="50"Opacity="0.5">ITPUB个人空间.?M-FdpS
<Image.RenderTransform>
G-L)W4J8EI0<MatrixTransform>
uYK4hW@0<MatrixTransform.Matrix>
$FYHb7gQ*g(j
f`0<MatrixOffsetX="0"OffsetY="0"M12="0.2"></Matrix>
V }pb8tA
\0</MatrixTransform.Matrix>
`9x2no)A(\i0</MatrixTransform>ITPUB个人空间0y8P&Dxj~
</Image.RenderTransform>
:X)~&QU6r&Jv	V5r0</Image>
u&_C&O5Oq?0ITPUB个人空间8u}nJ|q%I
<ImageSource="a1.png"Canvas.Left="120"Canvas.Top="50">
a(X,CbZ+oH0<Image.RenderTransform>ITPUB个人空间-@b ?:j
PW)uzm
<MatrixTransform>
3v}F"ibI
M)K/Nn0<MatrixTransform.Matrix>
qAa.u2_.R5g]0<MatrixOffsetX="0"OffsetY="0"M12="0.4"></Matrix>ITPUB个人空间A?B9^"H;m%@E
</MatrixTransform.Matrix>ITPUB个人空间0K H.tHE`Z
</MatrixTransform>ITPUB个人空间}lAX!XS'S~KN?
</Image.RenderTransform>
6vA'S"SWz|\#t0</Image>
/x1?#n&RBe
j6\0</Canvas>

运行后效果如下：ITPUB个人空间q'P
R Wtv;q~(s(N

:W)k1_:@~B0

实现动画变换

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

<CanvasBackground="#CDFCAE">
^(ATFl%|~0<Canvas.Resources>
4b7RaNAE#mn0<Storyboardx:Name="myStoryboard">ITPUB个人空间O\RLOPm(~+tq
<DoubleAnimationITPUB个人空间^z*dGrx7W
Storyboard.TargetName="myTransform"
1r/M$O4U)|0Storyboard.TargetProperty="Angle"ITPUB个人空间b'J!v
}9J7Or/pY9RA
From="0"To="180"Duration="0:0:5"RepeatBehavior="Forever" />ITPUB个人空间)j'c
q,I^'P&}0j
@H
</Storyboard>
2m,AHSym3_^`:?(P0</Canvas.Resources>ITPUB个人空间"I&?c7K}}A"?
<Imagex:Name="imgTarget"Source="a1.png"Canvas.Left="180"Canvas.Top="80"ITPUB个人空间?~
{3c8H.MF.?*IW
MouseEnter="imgTarget_MouseEnter"MouseLeave="imgTarget_MouseLeave">ITPUB个人空间sf'E,?'{
<Image.RenderTransform>ITPUB个人空间2W)|EP9D,\e,wS
<RotateTransform.x:Name="myTransform"Angle="15"CenterX="120"CenterY="68" />
y9O^8dI,p1Rnim&V0w0</Image.RenderTransform>ITPUB个人空间%}1CgP@b
</Image>
$FA_,Y*](R1~g;s0</Canvas>

在代码中控制Storyboard：

private voidimgTarget_MouseEnter(objectsender,MouseEventArgse)ITPUB个人空间N1RHd#Z:Mh^3d
y
{ITPUB个人空间{PL/pH?MSs
myStoryboard.Begin();ITPUB个人空间td3]"z.p
l
}ITPUB个人空间5{:~X+fm-do
ITPUB个人空间(E9Wzx|J
private voidimgTarget_MouseLeave(objectsender,MouseEventArgse)ITPUB个人空间$G;O&M^4e-FCAr
{ITPUB个人空间b'Y@zJ7`z
myStoryboard.Stop();ITPUB个人空间;Xxt8X,Q)i
}

运行后效果如下：

wI:{:f!q'JQ,aL'h0ITPUB个人空间3r FJxL

用代码控制变换

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

<CanvasBackground="#CDFCAE">ITPUB个人空间JXV'E$n
N1h4W
|
<ImageSource="a1.png"Canvas.Left="180"Canvas.Top="80"Opacity="0.3">ITPUB个人空间-E)\&x-yk'^7R[
</Image>
B(ysP4C[0<Imagex:Name="imgTarget"Source="a1.png"Canvas.Left="180"Canvas.Top="80"ITPUB个人空间
\O$z2qd}-\Ri
MouseLeftButtonDown="imgTarget_MouseLeftButtonDown">ITPUB个人空间BJ;Zcy
<Image.RenderTransform>ITPUB个人空间XW(Rz+N{5y:@j
<RotateTransform.x:Name="myTransform"Angle="0"CenterX="120"CenterY="68" />ITPUB个人空间3t5j5w4HV|cB
</Image.RenderTransform>ITPUB个人空间OY\\Z~/io%i
</Image>ITPUB个人空间9c\(q]v!T3|-kw*T6O
</Canvas>

后台代码：

private voidimgTarget_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)ITPUB个人空间*FzQP#CS
{
+r7n/eu6SM0myTransform.Angle = myTransform.Angle + 15;ITPUB个人空间 bBs/?
fEmr^
}

运行后起始界面如下：

结束语

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