wpf动画效果（转）

一 平移

1、 xaml代码

 

-----在资源中定义动画效果------

<UserControl.Resources>

 <!--出场动画-->
        <Storyboard x:Key="InTransition">

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="gbSearch" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:02.5000000" Value="1"/>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="gbSearch" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-50"/>
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="-101"/>
                <SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:03.5000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="gbAdd" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="gbAdd" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-72"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-157"/>
                <SplineDoubleKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:01.5000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard> 

</UserControl.Resources>

 ------定义触发的事件----------

<UserControl.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource InTransition}"/>
        </EventTrigger>
    </UserControl.Triggers>

 

------应用效果的两个控件--------

 <GroupBox Header="违章信息查询" Name="gbSearch" BorderBrush="LightBlue" Foreground="Blue">
            <GroupBox.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </GroupBox.RenderTransform>

</GroupBox>

 <GroupBox Header="违章车辆信息采集" Name="gbAdd" BorderBrush="LightBlue" Foreground="Blue">
            <GroupBox.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </GroupBox.RenderTransform>

</GroupBox>

蓝色xaml说明：所应用效果的控件必须要些否则会出岔子

2、C# 后台代码控制效果

 

在前台xaml中设置spDataGrid的Visibility="Collapsed"；

后台代码如下：

            this.spDataGrid.Visibility = Visibility.Visible;
            Storyboard myStoryboard = new Storyboard();
            DoubleAnimation OpacityDoubleAnimation = new DoubleAnimation();
            OpacityDoubleAnimation.From = 0;
            OpacityDoubleAnimation.To = 1;
            OpacityDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.4));
            Storyboard.SetTargetName(OpacityDoubleAnimation, spDataGrid.Name);
            Storyboard.SetTargetProperty(OpacityDoubleAnimation, new PropertyPath(DataGrid.OpacityProperty));
            spDataGrid.RenderTransform = new TranslateTransform();
            DependencyProperty[] propertyChain = new DependencyProperty[]
            {
                DataGrid.RenderTransformProperty,
                TranslateTransform.XProperty
            };
            DoubleAnimation InDoubleAnimation = new DoubleAnimation();
            InDoubleAnimation.From = -200;
            InDoubleAnimation.To = 0;
            InDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.4));
            Storyboard.SetTargetName(InDoubleAnimation, spDataGrid.Name);
            Storyboard.SetTargetProperty(InDoubleAnimation, new PropertyPath("(0).(1)", propertyChain));
             myStoryboard.Children.Add(OpacityDoubleAnimation);
            myStoryboard.Children.Add(InDoubleAnimation);
            myStoryboard.Begin(this);

二 旋转

多用于弹出窗体

 <Window.Resources>
               <!--原始旋转出来样例-->
        <Storyboard x:Key="showDW">
            <DoubleAnimation Storyboard.TargetName="Canvas2" 
                        Storyboard.TargetProperty="Opacity" 
                        From="0.2" To="1" Duration="0:0:2.5">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas2" 
                        Storyboard.TargetProperty="RenderTransform.Children[1].Angle" 
                        From="70" To="0" Duration="0:0:2" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas2" 
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
                        From="0" To="1" Duration="0:0:2"  
                        AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas2" 
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
                        From="0" To="1" Duration="0:0:2"  
                        AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas2" 
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
                        To="0.98" BeginTime="0:0:2" Duration="0:0:0.05"  
                        DecelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas2" 
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
                        To="0.98" BeginTime="0:0:2" Duration="0:0:0.05"  
                        DecelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas2" 
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
                        To="1" BeginTime="0:0:2.05" Duration="0:0:0.2"   
                        AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas2"               
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
                        To="1" BeginTime="0:0:2.05" Duration="0:0:0.2"  
                        AccelerationRatio="1">
            </DoubleAnimation>
        </Storyboard>

        <!--原始的旋转回去样例-->
        <Storyboard x:Key="closeDW">
            <DoubleAnimation Storyboard.TargetName="Canvas2"  
                      Storyboard.TargetProperty="RenderTransform.Children[1].Angle" 
                      To="360" Duration="0:0:1.5" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas2"  
                      Storyboard.TargetProperty="Opacity" 
                      To="0" Duration="0:0:3">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas2"  
                      Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
                      To="0" Duration="0:0:1.5" AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="Canvas2" 
                      Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
                      To="0" Duration="0:0:1.5" AccelerationRatio="1">
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>

<Window.Triggers>
        <!--弹出窗体-->
        <EventTrigger SourceName="gv" RoutedEvent="Window.Loaded">
            <BeginStoryboard Name="showQueryCanvasStoryboard2"  
                      Storyboard="{StaticResource showDW}">
            </BeginStoryboard>
        </EventTrigger>

        <!--弹回窗体-->
        <EventTrigger SourceName="btnClose" RoutedEvent="Button.Click">
            <BeginStoryboard Name="closeQueryCanvasStoryboard"  
                      Storyboard="{StaticResource closeDW}">
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>

 

//取消按钮旋转回去的效果

 <Button Grid.Column="2" Content="取消" Name="btnClose" Style="{StaticResource buttonStyle}"/>