C#高级动画的动态变换

高级动画可以结合变形类使用,就是RenderTransform属性

• 变换提供了自定义元素的最强大方式之一。每个元素都能以两种不同的方式使用 变换，RenderTransform属性和LayoutTransform属性。RenderTransform属性效 率更高。因为是在布局之后应用变换，并且用于变换最终的渲染输 出。LayoutTransform在布局前应用，从而其他控件需要重新排列以适应变换。

三、例子

1、先页面布局，使用StackPanel栈式面板布局，默认状态下是垂直，如果要改变状态就使用Orientation属性

<StackPanel>

        <Image Source="/Image/5.jpg"/>

        <Image Source="/Image/5.jpg" />

        <Image Source="/Image/5.jpg"/>

        <Image Source="/Image/5.jpg"/>

</StackPanel>

 

  

 

     图一

然后定义窗口资源

1. 改变图片样式，比如长、宽、边距
2. 就要利用RenderTransformOrigin改变图片变形，就要利用变形的属性RenderTransform
3. 写触发器，用MouseLeave鼠标进入事件，然后写一个动画，利用动画来操控RotateTransform变形，如果用多个变形的话，可以利用索引值
4. 在写一个鼠标离开还原动画

 <!--窗口资源-->

    <Window.Resources>

        <!—图片样式-->

        <Style TargetType="{x:Type Image}">

            <Setter Property="Width" Value="100"/>

            <Setter Property="Height" Value="60"/>

            <Setter Property="Margin" Value="10"/>

            <!--<Setter Property="FontSize" Value="20"/>-->

            <!--对象中心点用来定义所有RenderTransform变换中相对位置的的参考点,默认为图形的左上即(0,0)就是图一的红点,该属性值为相对值,介于 0 和 1 之间的值被解释为每对 x，y 轴中的当前元素的范围的因素-->

            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>

            <Setter Property="RenderTransform">

                <Setter.Value>

            <!--使用RotateTransform时，一定要使用TransformGroup，否则不能进行动画哦-->                 <TransformGroup>

  <!--RotateTransform：能够让某对象产生旋转变化，根据中心点进行顺时针旋转或逆时针旋转。                        <RotateTransform/>

                    </TransformGroup>

                </Setter.Value>

            </Setter>

            <!--样式关联触发器-->

            <Style.Triggers>

                <!--MouseLeave鼠标进入事件-->

                <EventTrigger RoutedEvent="Image.MouseEnter">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <!--操控变形的旋转元素RotateTransform的角度属性是Angle-->

                            <Storyboard RepeatBehavior="Forever" Storyboard.TargetProperty="RenderTransform.Children[0].Angle">

                                <DoubleAnimation From="0" To="360" Duration="0:0:2"/>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

                <!--MouseLeave鼠标离开事件-->

                <EventTrigger RoutedEvent="Image.MouseLeave">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard Storyboard.TargetProperty="RenderTransform.Children[0].Angle">

                                <DoubleAnimation  To="0" Duration="0:0:1"/>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Style.Triggers>

        </Style>

</Window.Resources>

结果：鼠标进入的时候，图片就会360度旋转，如果离开就会回到原点

 

    如果我们使用LayoutTransform属性，就把RenderTransform属性的代码给换了，俩个属性的不同的地方就是RenderTransform属性会把你相同的地方覆盖，在旋转；LayoutTransform属性会把你相同的地方挤出去，在旋转。