2021-09-18

RenderTransform特效

开发工具与关键技术： WPF
作者：罗培发 
撰写时间：2021.9.18
WPF中的变形（RenderTransform）类是为了达到直接去改变某个Silverlight对象的形状
（比如缩放、旋转一个元素）的目的而设计的，RenderTransform包含的变形属性成员就是专门用来改变Silverlight对象形状的，它可以实现对元素拉伸，旋转，扭曲等效果，同时变形特效也常用于辅助产生各种动画效果。
1. RenderTransform类：该类成员如下：
TranslateTransform：能够让某对象的位置发生平移变化。
RotateTransform：能够让某对象产生旋转变化，根据中心点进行顺时针旋转或逆时针旋转。
ScaleTransform：能够让某对象产生缩放变化。
SkewTransform：能够让某对象产生扭曲(斜角)变化。
TransformGroup：变换集合,能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用(组合多个变换)。
MatrixTransform：能够让某对象通过矩阵算法实现更为复杂的变形。
变形元素包括平移变形、旋转变形、缩放变形、扭曲变形、矩阵变形和组合变形元素，变形特效常用于在不改变对象本身构成的情况下，使对象产生变形效果，所以变形元素常辅助产生Silverlight中的各种动画效果。
通常，对于MediaElement元素使用RenderTransform属性比使用LayoutTransform属性更好，因为RenderTransform属性是轻量级的。而且它还可以使用方便的
RenderTransformOrigin属性值，从而可以为特定的变换（如旋转）使用相对坐标。
1、TranslateTransform(平移变化)：                                                       
平移变化：包含X、Y 两种属性，以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。
XAML
<Canvas>
         <!--定义两张图片-->
         <Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" 
Opacity="0.5"></Image>
         <Image Canvas.Top="160" Canvas.Left="140"  Source="sun.jpg">
             <!--平移变化-->
             <Image.RenderTransform>
                 <TranslateTransform X="120" Y="120">
</TranslateTransform>
             </Image.RenderTransform>
         </Image>
</Canvas>
2、RotateTransform(旋转变化):：
   包括属性Angle（旋转角度），CenterX、CenterY（旋转的中心）
<Canvas>
 <Image Canvas.Top="160" Canvas.Left="140" Source="Image/5.jpg"  
Opacity="0.5"></Image>
 <Image Canvas.Top="160" Canvas.Left="140"
Source="Image/5.jpg">
 <Image.RenderTransform>
 <RotateTransform Angle="45" CenterX="0" CenterY="0">
</RotateTransform>
 </Image.RenderTransform>
 </Image>
</ Canvas>
3、ScaleTransform(缩放变化)：
    包括属性ScaleX、ScaleY、CenterX、CenterY，其中ScaleX、ScaleY属性表示对象在X、Y轴进行缩放的倍 数，使用CenterX 和 CenterY属性指定一个中心点。
  <Canvas>
 <Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg"
Opacity="0.5"></Image>
 <Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg">
 <Image.RenderTransform>
 <ScaleTransform ScaleX="0.5" ScaleY="0.5">
</ScaleTransform>
 </Image.RenderTransform>
 </Image>
</Canvas>
4、SkewTransform(倾斜变化)：
     包括属性AngleX、AngleY、CenterX、CenterY。其中使用AngleX让元素相对X轴倾斜角度，AngleY是让元 素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。
 <Canvas>
 <Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg"
Opacity="0.5"></Image>
 <Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg">
 <Image.RenderTransform>
 <SkewTransform AngleX="30" AngleY="10">
</SkewTransform>
 </Image.RenderTransform>
 </Image>
</Canvas> 














无盈利，只为完成作业！