• 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
        }
  • 相关阅读:
    jquery的ready和简写
    javasript之ajax学习笔记
    用 Drupal 创建更好的评分系统的具体步骤
    drupal的FIVESTAR投票模块说明
    drupal中时间自定义格式
    drupal首页不显示默认内容列表方法
    基于 Zen 创建一个 Drupal 7 的主题（模板） ，一份简单的Drupal模板教程
    jquery tooltip事件
    HTML5地区自转代码
    转：Jmeter常见问题 （转载） http://www.51testing.com/?uid-128005-action-viewspace-itemid-84094
  • 原文地址：https://www.cnblogs.com/hnfxs/p/3418788.html
Copyright © 2020-2023  润新知