silverlight-RenderTransform特效_app

概述变形（RenderTransform）类是为了达到直接去改变某个Silverlight对象的形状（比如缩放、旋转一个元素）的目的而设计的，RenderTransform包含的变形属性成员就是专门用来改变Silverlight对象形状的，它可以实现对元素拉伸，旋转，扭曲等效果，同时变形特效也常用于辅助产生各种动画效果，下面列出RenderTransform类的成员： l TranslateTran

变形（Rendertransform）类是为了达到直接去改变某个Silverlight对象的形状（比如缩放、旋转一个元素）的目的而设计的，Rendertransform包含的变形属性成员就是专门用来改变Silverlight对象形状的，它可以实现对元素拉伸，旋转，扭曲等效果，同时变形特效也常用于辅助产生各种动画效果，下面列出Rendertransform类的成员：

l Translatetransform：能够让某对象的位置发生平移变化。

Rotatetransform：能够让某对象产生旋转变化，根据中心点进行顺时针旋转或逆时针旋转。

Scaletransform：能够让某对象产生缩放变化。

Skewtransform：能够让某对象产生扭曲变化。

transformGroup：能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用。

Matrixtransform：能够让某对象通过矩阵算法实现更为复杂的变形。

　　变形元素包括平移变形、旋转变形、缩放变形、扭曲变形、矩阵变形和组合变形元素，变形特效常用于在不改变对象本身构成的情况下，使对象产生变形效果，所以变形元素常辅助产生Silverlight中的各种动画效果。

　　Translatetransform(平移变化)：包含X、Y 两种属性，以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。

1 <Canvas>
2         Image Canvas.top="160" Canvas.left="140" Source="sun.jpg" Opacity="0.5"></Image3         ="sun.jpg"4             Image.Rendertransform5                 Translatetransform X="120" Y="120"Translatetransform6             </7         8     >

　　Rotatetransform(旋转变化):包括属性Angle（旋转角度），CenterX、CenterY（旋转的中心）

Rotatetransform Angle="45" CenterX="0" CenterY="0"Rotatetransform 　　　　　　　　　　

　　Scaletransform(缩放变化)：包括属性ScaleX、ScaleY、CenterX、CenterY，其中ScaleX、ScaleY属性表示对象在X、Y轴进行缩放的倍数，使用CenterX 和 CenterY属性指定一个中心点。

Scaletransform ScaleX="0.5" ScaleYScaletransform8
　　　　　　　　　　

　　
　　Skewtransform(扭曲变化)：包括属性AngleX、AngleY、CenterX、CenterY。其中使用AngleX让元素相对X轴倾斜角度，AngleY是让元素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。

Skewtransform AngleX="30" AngleY="10"Skewtransform 　　　　　　　　　

　　　　transformGroup：缩放、旋转、扭曲等变化效果合并起来。以上四种基本变化只是单一的变化，如果想要实现多种效果的叠加，那么就要使用到transformGroup，否则会报错。transformGroup的作用类似于在控件布局中的StackPanel内嵌的作用，是把多种变化元素组合成一种变化的容器。

1 Canvas WIDth="640" Height="480" 2 Rectangle ="20"="200" WIDth="400"="300" stroke="Black" strokeThickness="5" 3 Rectangle.Rendertransform 4 transformGroup 5 
6 7 Skewtransform变换 8 ="-10"="50" 9 10 11 Rectangle.Fill12 ImageBrush ImageSourceImageBrush13 14 Rectangle15

-----------------------------------------------------Matrixtransform 矩阵变换------------------------------------------

　　
　　Matrixtransform矩阵变换，其实就是其他变形类的底层实现的代码，其他的类都是基于这个类的扩展，以让用户可以更加简单方便的应用，至于Matrixtransform则是通过一种矩阵算法来进行运算得到相应的变形的效果的。矩阵的一些基本算法就不多总结了，以前上课就学过了，网上也有不少讲解。

　　
　　矩阵中第三列的值是固定不变的！

　　原理：
　　原坐标（x0，y0）通过这个3*3矩阵

得到变换之后的新坐标（x1，y1）的过程如下：

　　　　[x0,y0] *

，通过矩阵乘法可得到坐标 (x0 * M11+x0 * M21,y0 * M12+y0 * M22)之后，再加上 (OffsetX,OffsetY) 即可得到新坐标（x1，y1）。也即是说最终坐标 (x1,y1) : x1 = x0 * M11 + x0 * M21 + OffsetX , y1 = y0 * M12 + y0 * M22 + OffsetY.

1 <!--源码用法--> 
2 
3 <Matrixtransform Matrix="M11 M12 M21 M22 OffsetX OffsetY"></Matrixtransform>

　　下面使用Matrixtransform矩阵变换实现以上五种基本的变换效果。

 1 Canvas WIDth="1200" Height="300">
 2         StackPanel OrIEntation="Horizontal" Canvas.top="50" 3              Translatetransform 平移 -->
 4             Image Source="Images/adobe_Ai.png"="100" WIDth Stretch="Fill"
 5                    margin="10" Opacity="0.5"Image 6              7 ="10" 8                 Image.Rendertransform 9                     ="1 0 0 1 -80 30"10                 </11             12 
13              Rotatetransform 旋转 14             ="Images/adobe_DW.png"15 16             17 18                 19                      90°旋转 20                     ="0 1 -1 0 30 0"21                 22             23 
24              Scaletransform 缩放 25             ="Images/adobe_Fl.png"26 27             28 29                 30                     放大1.5倍31                     ="1.5 0 0 1.5 -80 0"32                 33             34 
35              Skewtransform 扭曲倾斜 36             ="Images/adobe_Fw.png"37 38             39 40                 41                      x轴倾斜 42                     ="1 0 1 1 -80 0"43                 44             45 
46              transformGroup 扭曲、缩放 47             ="Images/adobe_ID.png"48 49             50 51                 52                     53                     54                     ="1.5 0 1 1.5 -120 0"55                 56             57         StackPanel58 Canvas>