WPF图片背景框四周渐入和渐出动画

最新推荐文章于 2025-05-24 18:04:16 发布

原创最新推荐文章于 2025-05-24 18:04:16 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#wpf #动画 #边框渐入渐出 #界面

WPF编程专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用WPF的故事板Storyboard创建界面加载动画效果，通过控制四个边框元素的宽高变化，实现渐显渐隐的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：在WPF开发中，我们常常为了让界面更有质感，和更有流畅感，需要加入动画，比如一个框，效果如下图所示。

加载边框：

加载完成

渐出效果：

在WPF中我们可以用Storyboard(故事板)来实现。稍后附上Demo

新建一个项目，然后在再新建一个用户控件。控件的AXML语言内容代码为：

  <Control.Resources>
        <Storyboard x:Key="Show">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="img_l_t">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="380"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="img_l_t">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="168"/>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="img_r_t">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="380"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="img_r_t">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="168"/>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="img_l_b">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="380"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="img_l_b">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="168"/>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="img_r_b">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="380"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="img_r_b">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="168"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Hide">

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="img_l_t">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="340"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="img_l_t">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="158"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="img_r_t">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="340"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="img_r_t">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="158"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="img_l_b">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="340"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="img_l_b">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="158"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="img_r_b">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="340"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="img_r_b">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="158"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Control.Resources>

    <Grid Margin="10">
        <Border x:Name="img_l_t" Width="0" Height="0" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Border.Background>
                <ImageBrush ImageSource="/Wpf动画背景图展现;component/Images/scan_bg_left_top.png" AlignmentX="Left" AlignmentY="Top" Stretch="None"/>
            </Border.Background>
        </Border>
        <Border x:Name="img_r_t" Width="0" Height="0" HorizontalAlignment="Right" VerticalAlignment="Top">
            <Border.Background>
                <ImageBrush ImageSource="/Wpf动画背景图展现;component/Images/scan_bg_right_top.png" AlignmentX="Right" AlignmentY="Top" Stretch="None"/>
            </Border.Background>
        </Border>
        <Border x:Name="img_l_b" Width="0" Height="0"  HorizontalAlignment="Left" VerticalAlignment="Bottom">
            <Border.Background>
                <ImageBrush ImageSource="/Wpf动画背景图展现;component/Images/scan_bg_left_bottom.png" AlignmentX="Left" AlignmentY="Bottom" Stretch="None"/>
            </Border.Background>
        </Border>
        <Border x:Name="img_r_b" Width="0" Height="0" HorizontalAlignment="Right" VerticalAlignment="Bottom">
            <Border.Background>
                <ImageBrush ImageSource="/Wpf动画背景图展现;component/Images/scan_bg_right_bottom.png" AlignmentX="Right" AlignmentY="Bottom" Stretch="None"/>
            </Border.Background>
        </Border>
    </Grid>

然后后台代码调用动画：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Wpf动画背景图展现
{
    /// <summary>
    /// ShowControl.xaml 的交互逻辑
    /// </summary>
    public partial class ShowControl : UserControl
    {
        public ShowControl()
        {
            InitializeComponent();
        }


        public void Show()
        {
            (this.Resources["Show"] as Storyboard).Begin();
        }

        public void Hide()
        {
            (this.Resources["Hide"] as Storyboard).Begin();
        }
    }
}

主窗口里建一个Button，把控件加入到主窗口

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:SC="clr-namespace:Wpf动画背景图展现"
        x:Class="Wpf动画背景图展现.MainWindow"
        Title="MainWindow" Height="400" Width="800">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="10*"/>
        </Grid.RowDefinitions>
        <Button x:Name="go" Click="Button_Click">走你</Button>
        <SC:ShowControl Grid.Row="2" x:Name="Control"></SC:ShowControl>

    </Grid>

</Window>

主窗口后台程序：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Wpf动画背景图展现
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            
        }

        bool ishow=false;
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (!ishow)
            {
                Control.Show();
                ishow = true;
                go.Content = "回走"; 
            }
            else
            {
                Control.Hide();
                ishow = false;
                go.Content = "走你"; 
            }
        }
    }
}

大功告成，运行看效果。

下载Demo