WPF 窗体翻转动画（XAML 实现）

发表于 Disqus：

WPF 窗体翻转动画（XAML 实现）

WPF 的动画系统基于 Storyboard，可以在纯 XAML 中完成复杂的界面变换。下面是一段窗体加载时的水平翻转动画，常用于登录界面、卡片切换等场景。

XAML 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<Window x:Class="窗体翻转.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        Foreground="{x:Null}"
        WindowStyle="None"
        ResizeMode="NoResize"
        AllowsTransparency="True"
        Background="{x:Null}"
        Topmost="True">

    <Window.Resources>
        <Storyboard x:Key="fanzhuan">
            <PointAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)"
                Storyboard.TargetName="grid">
                <EasingPointKeyFrame KeyTime="0" Value="0.5,0.5"/>
            </PointAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                Storyboard.TargetName="grid">
                <EasingDoubleKeyFrame KeyTime="0" Value="-1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

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

    <Grid x:Name="grid" Margin="109,29,124,48">
        <Grid.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Grid.RenderTransform>
        <Grid.Background>
            <ImageBrush ImageSource="61.jpg" Stretch="None"/>
        </Grid.Background>
    </Grid>
</Window>

逐段说明

窗体属性

属性 值 说明
WindowStyle="None" 无边框 去掉标题栏和边框
AllowsTransparency="True" 允许透明 配合 Background="{x:Null}" 实现透明背景
ResizeMode="NoResize" 不可调整大小 固定尺寸
Topmost="True" 置顶 窗体始终在最前

Storyboard 动画

  • RenderTransformOrigin="0.5,0.5"：设置变换中心为元素中心点
  • ScaleX 从 -1 到 1：水平翻转效果（-1 表示镜像）
  • CubicEase EaseOut：缓动函数，让动画开始时快、结束时慢，更自然
  • 动画时长 0:0:1：1 秒完成翻转

触发器

FrameworkElement.Loaded 事件在窗体加载完成后触发，自动播放翻转动画。

扩展：双向翻转

如果需要点击按钮再次翻转，可以给按钮添加 Click 事件触发器：

1
2
3
4
5
6
7
<Button Content="翻转">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard Storyboard="{StaticResource fanzhuan}"/>
        </EventTrigger>
    </Button.Triggers>
</Button>

小结

WPF 的 ScaleTransform.ScaleX 取负值即可实现镜像翻转，配合 Storyboard 和 EasingFunction 可以做出流畅的界面动效。整个动画完全在 XAML 中定义，无需 C# 代码。