WPF制作子窗体的弹出动画效果

创建一个WPF应用程序WpfApplication1，新建个窗体DialogWin

[xhtml] view plaincopyprint?
  1. <Windowx:Class="WpfApplication1.DialogWin" 
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  4.     Title="DialogWin"Height="632"Width="635"WindowStyle="None"   
  5.      Name="DW1"   Background="Transparent"AllowsTransparency="True"WindowStartupLocation="CenterScreen"WindowState="Normal"> 
  6.     <Window.Resources> 
  7.         <!--此样式能去除按钮点击后的虚线框--> 
  8.         <Stylex:Key="MyFocusVisual"> 
  9.             <SetterProperty="Control.Template"> 
  10.                 <Setter.Value> 
  11.                     <ControlTemplate> 
  12.                         <RectangleMargin="-2"StrokeThickness="0"Stroke="Red"StrokeDashArray="1 2"/> 
  13.                     </ControlTemplate> 
  14.                 </Setter.Value> 
  15.             </Setter> 
  16.         </Style> 
  17.         <!--原始旋转出来样例--> 
  18.         <Storyboardx:Key="showDW"> 
  19.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  20.                         Storyboard.TargetProperty="Opacity" 
  21.                         From="0.2"To="1"Duration="0:0:2.5"> 
  22.             </DoubleAnimation> 
  23.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  24.                         Storyboard.TargetProperty="RenderTransform.Children[1].Angle" 
  25.                         From="70"To="0"Duration="0:0:2"> 
  26.             </DoubleAnimation> 
  27.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  28.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
  29.                         From="0"To="1"Duration="0:0:2"  
  30.                         AccelerationRatio="1"> 
  31.             </DoubleAnimation> 
  32.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  33.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
  34.                         From="0"To="1"Duration="0:0:2"  
  35.                         AccelerationRatio="1"> 
  36.             </DoubleAnimation> 
  37.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  38.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
  39.                         To="0.98"BeginTime="0:0:2"Duration="0:0:0.05"  
  40.                         DecelerationRatio="1"> 
  41.             </DoubleAnimation> 
  42.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  43.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
  44.                         To="0.98"BeginTime="0:0:2"Duration="0:0:0.05"  
  45.                         DecelerationRatio="1"> 
  46.             </DoubleAnimation> 
  47.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  48.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
  49.                         To="1"BeginTime="0:0:2.05"Duration="0:0:0.2"   
  50.                         AccelerationRatio="1"> 
  51.             </DoubleAnimation> 
  52.             <DoubleAnimationStoryboard.TargetName="Canvas1"               
  53.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
  54.                         To="1"BeginTime="0:0:2.05"Duration="0:0:0.2"  
  55.                         AccelerationRatio="1"> 
  56.             </DoubleAnimation> 
  57.         </Storyboard> 
  58.         <!--原始的旋转回去样例--> 
  59.         <Storyboardx:Key="closeDW"> 
  60.             <DoubleAnimationStoryboard.TargetName="Canvas1"  
  61.                       Storyboard.TargetProperty="RenderTransform.Children[1].Angle" 
  62.                       To="360"Duration="0:0:1.5"> 
  63.             </DoubleAnimation> 
  64.             <DoubleAnimationStoryboard.TargetName="Canvas1"  
  65.                       Storyboard.TargetProperty="Opacity" 
  66.                       To="0"Duration="0:0:3"> 
  67.             </DoubleAnimation> 
  68.             <DoubleAnimationStoryboard.TargetName="Canvas1"  
  69.                       Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
  70.                       To="0"Duration="0:0:1.5"AccelerationRatio="1"> 
  71.             </DoubleAnimation> 
  72.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  73.                       Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
  74.                       To="0"Duration="0:0:1.5"AccelerationRatio="1"> 
  75.             </DoubleAnimation> 
  76.         </Storyboard> 
  77.         <!--转出来--> 
  78.         <Storyboardx:Key="showDW1"> 
  79.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  80.                         Storyboard.TargetProperty="Opacity" 
  81.                         From="0"To="1"Duration="0:0:0.2"> 
  82.             </DoubleAnimation> 
  83.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  84.                         Storyboard.TargetProperty="RenderTransform.Children[1].Angle" 
  85.                         From="180"To="0"Duration="0:0:0.2"> 
  86.             </DoubleAnimation> 
  87.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  88.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
  89.                         From="0.2"To="1"Duration="0:0:0.2"  
  90.                         AccelerationRatio="1"> 
  91.             </DoubleAnimation> 
  92.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  93.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
  94.                         From="0.2"To="1"Duration="0:0:0.2"  
  95.                         AccelerationRatio="1"> 
  96.             </DoubleAnimation> 
  97.         </Storyboard> 
  98.         <!--弹出来--> 
  99.         <Storyboardx:Key="showDW2"> 
  100.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  101.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
  102.                         From="0.2"To="0.5"Duration="0:0:0.04"> 
  103.             </DoubleAnimation> 
  104.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  105.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
  106.                         From="0.2"To="0.5"Duration="0:0:0.04"> 
  107.             </DoubleAnimation> 
  108.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  109.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
  110.                           From="0.5"To="1"Duration="0:0:0.04"BeginTime="0:0:0.04"> 
  111.             </DoubleAnimation> 
  112.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  113.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
  114.                          From="0.5"To="1"Duration="0:0:0.04"BeginTime="0:0:0.04"> 
  115.             </DoubleAnimation> 
  116.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  117.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
  118.                          From="1"To="1.2"Duration="0:0:0.04"BeginTime="0:0:0.08"AutoReverse="True"> 
  119.             </DoubleAnimation> 
  120.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  121.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
  122.                         From="1"  To="1.2"Duration="0:0:0.04"BeginTime="0:0:0.08"AutoReverse="True"> 
  123.             </DoubleAnimation>           
  124.         </Storyboard> 
  125.         <!--转回去--> 
  126.         <Storyboardx:Key="closeDW1"> 
  127.             <DoubleAnimationStoryboard.TargetName="Canvas1"  
  128.                       Storyboard.TargetProperty="RenderTransform.Children[1].Angle" 
  129.                       To="180"Duration="0:0:0.2"> 
  130.             </DoubleAnimation> 
  131.             <DoubleAnimationStoryboard.TargetName="Canvas1"  
  132.                       Storyboard.TargetProperty="Opacity" 
  133.                       To="0"Duration="0:0:0.2"> 
  134.             </DoubleAnimation> 
  135.             <DoubleAnimationStoryboard.TargetName="Canvas1"  
  136.                       Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
  137.                       To="0.2"Duration="0:0:0.2"AccelerationRatio="1"> 
  138.             </DoubleAnimation> 
  139.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  140.                       Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
  141.                       To="0.2"Duration="0:0:0.2"AccelerationRatio="1"> 
  142.             </DoubleAnimation> 
  143.         </Storyboard> 
  144.          
  145.         <!--弹回去--> 
  146.         <Storyboardx:Key="closeDW2"> 
  147.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  148.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
  149.                         From="1"To="1.2"Duration="0:0:0.04"  AutoReverse="True"> 
  150.             </DoubleAnimation> 
  151.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  152.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
  153.                         From="1"To="1.2"Duration="0:0:0.04"  AutoReverse="True"> 
  154.             </DoubleAnimation> 
  155.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  156.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
  157.                           From="1"To="0.5"Duration="0:0:0.04"BeginTime="0:0:0.04"> 
  158.             </DoubleAnimation> 
  159.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  160.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
  161.                          From="1"To="0.5"Duration="0:0:0.04"BeginTime="0:0:0.04"> 
  162.             </DoubleAnimation> 
  163.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  164.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
  165.                          From="0.5"To="0.2"Duration="0:0:0.04"BeginTime="0:0:0.08"  > 
  166.             </DoubleAnimation> 
  167.             <DoubleAnimationStoryboard.TargetName="Canvas1" 
  168.                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
  169.                         From="0.5"  To="0.2"Duration="0:0:0.04"BeginTime="0:0:0.08"> 
  170.             </DoubleAnimation> 
  171.         </Storyboard> 
  172.     </Window.Resources> 
  173.      
  174.     <Window.Triggers> 
  175.         <!--设置DW1的事件触发--> 
  176.         <!--注意对窗体window的name取为DW1--> 
  177.         <EventTriggerSourceName="DW1"RoutedEvent="Window.Loaded"> 
  178.             <BeginStoryboardName="showQueryCanvasStoryboard2"  
  179.                       Storyboard="{StaticResource showDW}"> 
  180.             </BeginStoryboard> 
  181.         </EventTrigger> 
  182.         <!--设置button1的事件触发--> 
  183.         <!--注意对按钮的name取为button1--> 
  184.         <EventTriggerSourceName="button1"RoutedEvent="Button.Click"> 
  185.             <BeginStoryboardName="closeQueryCanvasStoryboard"  
  186.                       Storyboard="{StaticResource closeDW}"> 
  187.             </BeginStoryboard> 
  188.         </EventTrigger> 
  189.          
  190.     </Window.Triggers> 
  191.      
  192.     <CanvasBackground="Transparent"Height="257"Width="214">         
  193.         <CanvasBackground="Brown"Height="236"Width="201"Canvas.Left="9"Canvas.Top="14"Name="Canvas1"> 
  194.             <!--设置动画--> 
  195.             <Canvas.RenderTransform> 
  196.                 <TransformGroup> 
  197.                     <ScaleTransformCenterX="100"CenterY="50"></ScaleTransform><!--缩放中心为100,50。RenderTransform.Children[0]--> 
  198.                     <RotateTransformCenterX="100"CenterY="50"></RotateTransform><!--旋转中心为100,50。RenderTransform.Children[1]--> 
  199.                 </TransformGroup> 
  200.             </Canvas.RenderTransform> 
  201.             <ButtonMargin="98,107,124,127"Name="button1"  FocusVisualStyle="{DynamicResource MyFocusVisual}" 
  202.                 Click="button1_Click"  Height="28"Width="112"Canvas.Left="-53"Canvas.Top="77">关闭</Button> 
  203.         <CheckBoxHeight="31"HorizontalAlignment="Left"Margin="32,25,0,0"Name="checkBox1"VerticalAlignment="Top"Width="75"Canvas.Left="11"Canvas.Top="-1">CheckBox</CheckBox> 
  204.         <TextBlockHeight="35"Margin="124,21,34,0"Name="textBlock1"VerticalAlignment="Top"Background="BlueViolet"Text="dfdf"Width="60"Canvas.Left="-73"Canvas.Top="43"/> 
  205.         </Canvas> 
  206.     </Canvas>    
  207. </Window> 

cs代码:

添加引用

[c-sharp] view plaincopyprint?
  1. using System.Windows.Threading 

[c-sharp] view plaincopyprint?
  1. privatevoid button1_Click(object sender, RoutedEventArgs e) 
  2. { 
  3.     // this.Close();  
  4.     /////timer定义 
  5.     tm.Tick += new EventHandler(tm_Tick); 
  6.     tm.Interval = TimeSpan.FromSeconds(0.2); 
  7.     tm.Start();  
  8. } 
  9. DispatcherTimer tm = new DispatcherTimer(); 
  10. void tm_Tick(object sender, EventArgs e) 
  11. { this.Close(); } 

其中动画目标为Canvas1，包括：

慢速旋转显示(showDW)、慢速旋转消失(closeDW)

快速旋转显示(showDW1)、快速旋转消失(closeDW1)

快速弹出显示(showDW2)、快速旋转消失(closeDW2)

快速旋转显示(showDW1):

time:0    →   0.2

旋转角度:180→0

   透明度:  0→1

      放大: X向:0.2→1  Y向:0.2→1

快速弹出显示(showDW2):

time:0    →       0.04  →        0.08    →←      0.12

          放大              放大               放大(并复原)

   X向:0.2→0.5     0.5→1             1→1.2→1

   Y向:0.2→0.5     0.5→1             1→1.2→1

最后在主窗口的
1.MainWindow.xaml里的<Grid>之间放上按钮:
    <Grid>
        <Button Content="显示子窗口" Height="23" Click="ShowWindow_Click" Margin="114,138,141,138" />
    </Grid>

2.MainWindow.xaml.cs里加上相应的按钮事件:

public partial class MainWindow : Window
    {
        DialogWin myChildWindow = new DialogWin();
        public MainWindow()
        {
            InitializeComponent();
            //子窗口事件绑定
myChildWindow.Closed += new EventHandler(myChildWindow_Closed);
        }
        #region 子窗口事件代码
void myChildWindow_Closed(object sender, EventArgs e)
        {
         }
        private void ShowWindow_Click(object sender, RoutedEventArgs e)
        {
            myChildWindow.Title = "子窗口信息";
SolidColorBrush(Colors.Yellow);
            myChildWindow.Opacity = 0.9;
            myChildWindow.Foreground = new SolidColorBrush(Colors.Red);
            myChildWindow.FontSize = 14;
            myChildWindow.Show();
        }
        #endregion
    }

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hnfxs/p/3418788.html