none
Silverlight翻译连载---第六章 变形和动画 RRS feed

  • 常规讨论

  • 变形和动画内容

    Silverlight应用程序即使不借助JavaScript也可以是动态的。它的内容可以被变形和运动,两者都将在本章讨论。对于变形来说,无法观察到其变化的过程,在Silverlight内容被插件渲染时,或多或少会通过计算来影响它。例如,您可以旋转或弯曲元素。动画,从另一方面来说,可以从视觉上改变应用程序的外观:元素可以变换颜色或改变颜色。同之前一样,您将看到很多小而独立的例子来展示最有趣和重要的Silverlight选项。

    变形

    变形在技术上只改变一个或多个值。例如,如果旋转一个元素,它的位置和组成元素的所有像素点的坐标都将改变。如果一个元素移动到另一个位置(这也是变形),元素的边角的位置都要改变(先不管填充)。Silverlight支持五种变形:

    TranslateTransform

    改变元素的位置

    ScaleTransform

    按元素的水平和垂直尺寸进行缩放

    SkewTransform

    使用水平和垂直角度变曲一个元素

    RotateTransform

    使用一个角度旋转一个元素

    MatrixTransform

    通过一个给定矩阵使跟元素所有点相乘,使用结果做为新的值

    让我们从<TranslateTransform>元素开始,它只改变一个元素的位置,跟设置相关属性如Canvas.LeftCanvas.Top效果一样。

    执行一个变形,需要使用<Element.RenderTransform>元素。需要替换进行转换的元素类型。如果想对一个<Rectangle>对象进行变形,就要使用<Rectangle.RenderTransform>。如果想对一个<TextBlock>对象进行变形,就要使用<TextBlock.RenderTransform>

    <Element.RenderTransform>元素内部,需要放置transformation元素;此例中使用<TranslateTransform>。在这个元素内添加两个属性XY,它们指示相关元素左上角的xy坐标,如下所示:

    <TextBlock Text="...">

        <TextBlock.RenderTransform>

          <TranslateTransform X="10" Y="20" />

        </TextBlock.RenderTransform>

    </TextBlock>

    6-1基于第2章的Hello World例子,对矩形和文本块进行了转换。从最后结果中可以看到原来的元素和转换后的元素(如图6-1所示)

    6-1 元素转换,XAML文件(TranslateTransform.xaml

    <Canvas xmlns="http://schemas.microsoft.com/client/2007"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15" />

    <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

                 Foreground="Black" Text="Silverlight" />

    <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15">

        <Rectangle.RenderTransform>

          <TranslateTransform X="350" Y="175"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

                 Foreground="Black" Text="Silverlight">

        <TextBlock.RenderTransform>

          <TranslateTransform X="350" Y="175" />

        </TextBlock.RenderTransform>

    </TextBlock>

    </Canvas>

    6-1 原来元素(左)和转换元素(右)

    使用<ScaleTransform>进行元素缩放。您可以按水平(ScaleX属性)和垂直(ScaleY属性)方向进行缩放,也可以提供中点坐标(CenterXCenterY属性)。缩放值实际上是一个因数。例如,因数值为2可以使水平和垂直方向尺寸变为原来的2倍,0.5的因数则会把它们减半。例6-2演示了以上两种情形,如图6-2所示。

    6-2 元素缩放,XAML文件(ScaleTransform.xaml

    <Canvas xmlns="http://schemas.microsoft.com/client/2007"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15" />

    <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

                 Foreground="Black" Text="Silverlight" />

    <Rectangle Canvas.Left="350" Canvas.Top="175"

                 Width="300" Height="150" Stroke="Orange" StrokeThickness="15">

        <Rectangle.RenderTransform>

          <ScaleTransform ScaleX="1.5" ScaleY="0.5"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="375" Canvas.Top="215"

                 Foreground="Black" Text="Silverlight">

        <TextBlock.RenderTransform>

          <ScaleTransform ScaleX="1.5" ScaleY="0.5"/>

        </TextBlock.RenderTransform>

    </TextBlock>

    </Canvas>


    My blog: http://blog.csdn.net/dotfun http://dotfun.cnblogs.com

    My contact: QQ:372900288 E-mail:372900288@qq.com msn:sellnet007@hotmail.com

    2009年3月11日 8:18
    版主