Microsoft Silverlight4 step by step

 事先说明，本文是我自己翻译的，翻译的是这本书（下图），所以有什么不到之出希望大家批评指正。

转换和卡通制作

  在完成本章的学习后，你能够学会：

  #使用银光中的转换工具控制对象。

  #使用矩阵定义你自己的转换。

  #通过视角转换创建3D效果。

  #用XAML语言定义动画。

  #使用关键框架高质量的调整动画性能。

  #使用效果调节定义动画。

转换

  在绘图术语中，转换界定一个点如何从一个坐标空间绘制到另个坐标空间中去。这种绘制运算通常使用转换矩阵（transformation matrix） 画出，这种转换矩阵是一种特殊的数学上的编制允许你能够在两个系统之间进行简单的数学转化。

  MS的银光XAML语言支持转换例如旋转（rotation），缩放比例（scaling），相位差（skewing），远景(perspective),转换（transformation）。

你可以把这些矩阵组合成你自己的矩阵。幸运的是，银光XAML语言把转换抽象出来，因此你不用关心数学上的影响，因此在本书中也不会深入介绍数学的细节。

  在本章中，你将了解到如何在web 页面中用XAML语言定义转换。

转换初探

  你将应用对象的呈递转换（RenderTransform）属性完成转换。在本章中，你将通过写每个转换的代码来看每个转换是怎么样工作的。当你把这些转换组合成一个动画时，你就发现你制作了一个效果非常强大的用户界面。

  记住，当你使用转换时，你没有改变对象的属性，然而，你定义了对象如何画的。所以，比如说，如果你的你的对象顶端，或者左端坐标都是0，你使用翻译转换（TranslateTransform）去移动它到一个新的位置,他的坐标依旧是0,0，尽管它在屏幕上移动了。

使用旋转转换（RotateTransform）

  旋转转换可以让你把一个对象围着某个元素围绕一个特定的中心点旋转一个特定的角度（angle）。使用Angle属性设置旋转地角度，属性的值直接就是度。把右边的水平向量看做是0度。顺时针旋转，所以向下垂直方向就是旋转90的结果。

  通过设置ConterX，和ConterY属性旋转中心的坐标，默认是0,0,也就是左上角的点。

在应用中配置旋转转换

1、              创建一个名为SbSCh7_1的应用。

2、          在通过双击工具箱中的Rectangle工具在界面中添加Rectangle元素。

3、          把rectangle的默认标记/>改成</Rectangle>.

4、          在<Rectangle>标签之间添加<Rectangle.RenderTranform>标记，VS将自动产生封闭的标签。

5、          在<Rectangle.RenderTranform>标记之间，添加<RotatTransform>标签。

6、          设置RotateTransform属性，你可以直接输入Angle=”45”,或者在属性界面设置Angle的值为45。

如图所示

图像被旋转了。

1、          你的代码应该是向下面这样的

    <Rectangle Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200" >

            <Rectangle.RenderTransform >

                <RotateTransform Angle=" 45" ></RotateTransform>

            </Rectangle.RenderTransform>

     </Rectangle>             

2、          你将会发现那个默认的旋转中心点是方框的左上角，改变旋转地中心点，设置ConterX和ConterY属性。这些属性定义旋转地中心，也就是你要旋转的对象围着那个点旋转。如果你的矩形是200*100的规格的话，在这里，设置ConterX为200，设置ConterY为100，矩形就会以右侧底部为中心旋转。

3、          正像前面说的，VS会展示在设计窗口展示结果，你需要运行程序看到效果。

 

使用比例尺缩放 

   你可以使用比例尺缩放属性改变对象的大小，这些改变可以基于横轴，也可以基于纵轴，或者同时基于两者。

   当对一个对象进行缩放时，你需要指定最少一个坐标并且以那个坐标为基准你要缩放多少。你可以使用ScaleX属性在横坐标方向上进行缩放，使用ScaleY在纵坐标方向上进行缩放

ScaleX,ScaleY这两个属性的值都是成倍的，最终结果是你现在的尺寸乘以你输入的值。只要你输入的值大于1，你要拉伸的对象就会按照你输入的倍数拉伸。比如你在横轴的方向上设置ScaleX的值为2,你要拉伸的对象就能在X轴方向上拉伸成原来的两倍。要是设定的值小于一但是大于0 ，对象就会收缩。举个例子，设置纵轴方向的值为0.5，就想是对象在纵轴方向上缩小原来的二分之一。

定义一个收缩变换

1、  打开刚才创建的SbSCh7_1项目。

2、  删除旋转变换标签，用<ScaleTransform>标签代替。

3、  在属性窗口中，你能看到CenterX,CenterY,ScaleX,ScaleY属性。

4、  设置ScaleX属性为1.5,矩形的宽将增加百分之50。

5、  设置ScaleY属性为0.5，矩形的高就缩小了百分之50。

 

6、  像RotateTransform属性一样，ScaleTransform属性也有指定的点可用来控制缩放比如CenterX以及CenterY属性。

使用翻转变换

翻转是转换变化的一种，他将一个对象在2-D平面上从一个位置移动到另一个位置上。你可以通过设定翻转对象的X，Y 坐标来设定矢量方向，从而创建一个翻转。可以通过改变X,Y属性来设定。举个例子，你想把一个对象向右移动两个单元格，你就把X属性设置为2，向做移动就使用负值，-2。同样的，在纵坐标上移动对象，改变Y值就可以了，正值是使对象向下移动，负值是向上移动。

 下面我们就在你的应用中添加翻转变换

1、      打开之前创建的SbSCh7_1项目。

2、      删除<ScaleTransform>标签，用<TranslateTransform>标签代替。

3、      选择<TranslateTransform>标签，在属性窗口可以设定X,Y的值。

4、      设置X=100,Y=50.

 

像前面所介绍的，矩形左上角坐标依旧是0,0；银光处理它依旧是以最初的位置处理，但是呈现出来的却是经过转换的位置。

使用倾斜转换

倾斜转换一个对象包括对对象沿着坐标进行统一的变换。比如，把一个区域或者一个矩形转换成平行四边形，这种视觉效果对于在平面上创建平面立体效果是很有用的。

你可以在X轴或者Y轴申请一个角度。以及一个倾斜中心，这些倾斜可以被组合，可以让你同时在两个坐标上倾斜。

倾斜一个对象

1、              打开之前创建的文档。

2、              删除<TranslateTransform>标签，用<SkewTransform>标签代替。

3、              把光标放到SkewTransform标签上，你就可以对AngleX,AngleY,CenterX,CenterY属性进行设置了。

 

4、              设置AngleX属性为45，你将在设计窗口看到一个向左倾斜的平行四边形。

5、              现在把AngleX属性该为0，设置AngleY属性值为45，你将看到矩形沿着Y轴倾斜。

 

6、              像你刚刚看到的，CenterX，CenterY属性能够让你定义倾斜的中心，就像你看到的那些例子一样，默认的中心是0,0点。也就是清晰源自左上角。

你需要花一点时间看看改变中心点属性后倾斜额效果。

使用矩阵转换

所有转换，追根溯源，都是他们的坐标空间乘以转换矩阵后的出来的结果。到目前为止，你在本章中所看到的所有矩阵，都是众所周知的，同时也是显而易见的变换。

 

矩阵在数学上的意思以及转换是如何工作的超出了本章的范围。但为了使整体完全，你需要在Silverlight XAML中浏览他们是如何定义的。

 

注意在MatrixTransform中应用的是几何矩阵。那也就意味着底部行经常被设置为（0 0 1）。这样你只设置头两行就可以了，你可以通过转换的Matrix属性设置。他包含了头两行的值这些值用逗号或者空格隔开的字符串。

 

如果你了解矩阵变换如何定义电脑中的图像的，你就能够运用这种转换去定义你的几何矩阵的第一到两行。

 

在你的应用中添加矩阵变换

1、              打开起始创建的项目。

2、              删除<SkewTransform>标签，用<MatrixTransform>标签代替。

3、              你在属性窗口可以看到只有一个矩阵属性。他默认为恒等式（Identity）,是矩阵没有改变的一种特殊名称。（它等于是1,0,0,1,0,0.）

4、              设置矩形属性为（1,0,0,2,0,0），然后矩形的高就会随之改变。

5、              现在设置矩阵属性为（1,0,1,2,0,1）然后你就可以同时改变对象的高度和倾斜效果。你完成了组合变换。如果你能够明白图像转换后的数学矩阵的意义，你就能够定义你自己的矩阵变换了。

组合变换

对于那些想要明白数学矩阵的人，不要着急，你并不是唯一不知道的，Silverlight提供 不用摆弄数据就能组合变换的功能。想实现这个功能，你就要使用<TransformGroup>标签，可以让你成倍的添加变换。

在变换组中组合变换

1、          打开之前创建的项目。

2、          删除矩阵变换标签，用<TransformGroup>标签代替。

3、          在转换组内部，添加缩放标签然后设置ScaleX属性为1.5，ScaleY属性为0.5。

4、          再在里面添加倾斜标签，设置AngleX为30。

5、          再在里面添加旋转标签，设置Angle属性为45

6、          最后添加翻转标签（TranslateTransform）设置X属性为50。

7、          你的代码就会想下面这个样子。

 

8、          当你添加这些变换的时候，设计页面将会呈现出矩形的变化情况。到你做完了，你就能看到这个矩形同时进行缩放，倾斜，旋转，翻转变换。