WPF 基础 - Window 启动动画

<Window 
        ...
        WindowStyle="None" 
        AllowsTransparency="True" 
        RenderTransformOrigin="0.5, 0.5">    
    <Window.Resources>
        <Storyboard x:Key="WinBootAnimation">
            <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" 
                             From="0" To="1" Duration="0:0:1" DecelerationRatio="0.3" />
            <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" 
                             From="0" To="1" Duration="0:0:1" DecelerationRatio="0.3" />
            <DoubleAnimation Duration="0:0:0.45" Storyboard.TargetProperty="Opacity" From="0" To="1" />
        </Storyboard>
    </Window.Resources>
    <Window.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <RotateTransform/>
        </TransformGroup>
    </Window.RenderTransform>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard Storyboard="{StaticResource WinBootAnimation}">                    
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>

效果:

  1. Storyboard.TargetProperty 的值可以写成 (RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX) 或 RenderTransform.Children[0].ScaleX,但 ScaleTransform.ScaleX 更直观且会有语法解析错误提示;
  2. ScaleX 、ScaleY 的减速 DecelerationRatio 设置为 0.3,视觉效果比默认的 0 要更平滑;
  3. 同样从 0 到 1 的,让 Opacity 的动画时间比 ScaleX 、ScaleY 的减少一半,视觉效果也更平滑;
  4. Window.AllowsTransparency 为 True 时,Window.WindowStyle 必须为 None,可以通过添加按钮实现关闭、最小化等功能。这里将 RenderTransformOrigin 设置为 0.5 0.5 可以看到窗口从中间向四周放大。
posted @ 2021-02-26 22:36  鑫茂  阅读(686)  评论(0编辑  收藏  举报