一步一步学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个人空间{1N|F-| s G"g$O2Yj]bJ

)a6|-t4E*b1cz&p#I0

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

<CanvasBackground="#CDFCAE">
Xy\:atd.vd+v(O3\0<ImageSource="a1.png"Canvas.Left="120"Canvas.Top="50"Opacity="0.3">
J.s D	c'gZ0</Image>
4vro-j!O9s~d0<ImageSource="a1.png"Canvas.Left="120"Canvas.Top="50"Opacity="0.5">
;`9n\A;v{[.t0<Image.RenderTransform>ITPUB个人空间W:d	{^b	S
<MatrixTransform>ITPUB个人空间tj6AQ(Ok1H-h{
<MatrixTransform.Matrix>ITPUB个人空间 S"W1ovx$PEZH
<MatrixOffsetX="0"OffsetY="0"M12="0.2"></Matrix>
"Z6H G]_!@0</MatrixTransform.Matrix>
GH/pT0Y9}f'^&J0</MatrixTransform>
|U
tPl7~0Y(y0</Image.RenderTransform>ITPUB个人空间)W"h"G#B!G
</Image>
	BN6\_
t"F
p*K0
+[0Nh|%^0<ImageSource="a1.png"Canvas.Left="120"Canvas.Top="50">
1m7h
]jvj0<Image.RenderTransform>ITPUB个人空间4yb%mmaO$S0c8C
<MatrixTransform>ITPUB个人空间o9`ul_1pa&HF
<MatrixTransform.Matrix>ITPUB个人空间J
OnD'GBB
<MatrixOffsetX="0"OffsetY="0"M12="0.4"></Matrix>
&X;Z;x3S@p0</MatrixTransform.Matrix>ITPUB个人空间;P;gE2a} Y7\"Q
</MatrixTransform>
Z0Q\8p.D0</Image.RenderTransform>
OVxWV'| X3m0</Image>ITPUB个人空间4?9C3z8l-wl
</Canvas>

运行后效果如下：ITPUB个人空间1fB,Wsi
y

5N)l nrz1E0

实现动画变换

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

<CanvasBackground="#CDFCAE">ITPUB个人空间Zq%]
D+J(m3rtn
<Canvas.Resources>
+o.Tq	Q0u/r%tA2|,V0<Storyboardx:Name="myStoryboard">
6I*Eo'pb0<DoubleAnimationITPUB个人空间/DK
Whf
Storyboard.TargetName="myTransform"
l]j
W'D5}o-Dy0Storyboard.TargetProperty="Angle"ITPUB个人空间6l/KCNSeT)p~
From="0"To="180"Duration="0:0:5"RepeatBehavior="Forever" />

Xrn:M8Cb${kR0</Storyboard>
1aJ6EW
`(?0</Canvas.Resources>ITPUB个人空间zp9^)dRE&Zp@X
<Imagex:Name="imgTarget"Source="a1.png"Canvas.Left="180"Canvas.Top="80"ITPUB个人空间`e4}*['xN&X7?
MouseEnter="imgTarget_MouseEnter"MouseLeave="imgTarget_MouseLeave">
ssm[;e2PW{:o0<Image.RenderTransform>ITPUB个人空间#b
d(v3T.{_O
<RotateTransform.x:Name="myTransform"Angle="15"CenterX="120"CenterY="68" />
5}(iDo}y	Hl\0</Image.RenderTransform>ITPUB个人空间6w0r\J,]q6S0?
</Image>ITPUB个人空间"bn@0Z|w
</Canvas>

在代码中控制Storyboard：

private voidimgTarget_MouseEnter(objectsender,MouseEventArgse)ITPUB个人空间
}2}N4ws?`E
{
A&Kg3z1ww0myStoryboard.Begin();
 d!LY!^0tVY0}ITPUB个人空间*G6Cwq)Q LA
ITPUB个人空间A&OP!D4D4?._Zk
wu
private voidimgTarget_MouseLeave(objectsender,MouseEventArgse)

^:mgWz0{
vN\!X7g d5n
q0myStoryboard.Stop();
]G8w'J;k0}

运行后效果如下：

G4[:H'{%r5j0ITPUB个人空间$Lc)fr!jz

用代码控制变换

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

<CanvasBackground="#CDFCAE">
5kw#K,e,O3g0<ImageSource="a1.png"Canvas.Left="180"Canvas.Top="80"Opacity="0.3">
T#w*Y;{vk_*U0</Image>ITPUB个人空间FMmX,{~8Jx
<Imagex:Name="imgTarget"Source="a1.png"Canvas.Left="180"Canvas.Top="80"ITPUB个人空间Dw8@9K,}:S4X*g p8a:|`
MouseLeftButtonDown="imgTarget_MouseLeftButtonDown">
#S"fG%G8m+k"R0<Image.RenderTransform>
	J2^9X'@.x0<RotateTransform.x:Name="myTransform"Angle="0"CenterX="120"CenterY="68" />
uGnZn+X0</Image.RenderTransform>
#f0V6loRp5S1F0</Image>ITPUB个人空间YKI
X,OX!H
</Canvas>

后台代码：

private voidimgTarget_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)ITPUB个人空间#_8tX%@4c!tLyF0wZ
{ITPUB个人空间"^}:a'f&pe7j
myTransform.Angle = myTransform.Angle + 15;ITPUB个人空间8b*e3j
UW6L
}

运行后起始界面如下：

结束语

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