WPF 動畫閃爍效果
技術標籤:WPF
WPF 動畫閃爍效果
一、按鈕外邊緣呼吸閃爍
點選觸發效果;
程式碼:
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Style x:Key="ResourcesButtonStyle" TargetType="{x:Type FrameworkElement}" >
<Setter Property="Width" Value="60"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Effect">
< Setter.Value>
<DropShadowEffect x:Name="OSE" BlurRadius="10"
Color="Lime" Direction="0"
Opacity="1"
RenderingBias="Performance"
ShadowDepth="0" >
<Storyboard.TargetProperty>
BlurRadius
</Storyboard.TargetProperty>
</DropShadowEffect>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(FrameworkElement.Effect).(DropShadowEffect.BlurRadius)"
From="0" To="100"
BeginTime="00:00:00" Duration="00:00:01"
AutoReverse="True" RepeatBehavior="Forever"/>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(FrameworkElement.Effect).(DropShadowEffect.Color)"
RepeatBehavior="Forever" AutoReverse="True">
<EasingColorKeyFrame KeyTime="0" Value="Yellow"/>
<EasingColorKeyFrame KeyTime="0:0:0.4" Value="Purple"/>
<EasingColorKeyFrame KeyTime="0:0:0.8" Value="Green"/>
<EasingColorKeyFrame KeyTime="0:0:1.2" Value="DarkCyan"/>
<EasingColorKeyFrame KeyTime="0:0:1.6" Value="Black"/>
<EasingColorKeyFrame KeyTime="0:0:2.0" Value="OrangeRed"/>
<EasingColorKeyFrame KeyTime="0:0:2.4" Value="Violet"/>
<EasingColorKeyFrame KeyTime="0:0:2.8" Value="CornflowerBlue"/>
<EasingColorKeyFrame KeyTime="0:0:3.2" Value="Lime"/>
<EasingColorKeyFrame KeyTime="0:0:3.6" Value="Azure"/>
<EasingColorKeyFrame KeyTime="0:0:4.0" Value="Turquoise"/>
<EasingColorKeyFrame KeyTime="0:0:4.4" Value="Tomato"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button Content="Hello" Background="#007ACC" Height="30" Width="50" Style="{StaticResource ResourcesButtonStyle}"/>
</Grid>
</Window>
二、實心圓顏色呼吸漸變
效果:
程式碼:
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Storyboard x:Key="OnLoaded" RepeatBehavior="Forever" AutoReverse="True" >
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Ellipse">
<EasingColorKeyFrame KeyTime="0:0:1" Value="#990033"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource OnLoaded}"/>
</EventTrigger>
</Window.Triggers>
<Grid Background="White">
<Ellipse x:Name="Ellipse" Height="20" Width="20" Fill="#FF6666" >
<Ellipse.Effect>
<DropShadowEffect Opacity="1" ShadowDepth="0" Color="#FF6666" BlurRadius="200" Direction="10"></DropShadowEffect>
</Ellipse.Effect>
</Ellipse>
</Grid>
</Window>
三、TextBlock字型呼吸閃爍
程式碼:
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Background="White">
<TextBlock Text="Hello!" FontSize="48" Foreground="#ED4646" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Medium" x:Name="TextBlockRecording">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard BeginTime="0:0:0" Duration="0:0:4" AutoReverse="True" RepeatBehavior="Forever">
<ColorAnimation From="#ED4646" To="#F0F2F7" Duration="0:0:2" RepeatBehavior="Forever" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TextBlockRecording">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Grid>
</Window>
Storyboard類屬性介紹:
AccelerationRatio :獲取或設定一個值,該值指定在將時間消逝從零加速到其最大速率的過程中所佔用時間線的 Duration 的百分比。 (繼承自 Timeline)
AutoReverse :獲取或設定一個值,該值指示時間線在完成向前迭代後是否按相反的順序播放。 (繼承自 Timeline)
BeginTime :獲取或設定此 Timeline 應開始的時間。 (繼承自 Timeline)
CanFreeze :獲取一個值,該值指示是否可將物件變為不可修改。 (繼承自 Freezable)
Children :獲取或設定 TimelineGroup 的直接子 Timeline 物件的集合。 (繼承自 TimelineGroup)
DecelerationRatio :獲取或設定一個值,該值指定在將時間消逝從其最大速率減速到零的過程中所佔用時間線的 Duration 的百分比。 (繼承自 Timeline)
DependencyObjectType :獲取對此例項的 CLR 型別進行包裝的 DependencyObjectType。 (繼承自 DependencyObject)
Dispatcher :獲取與此 Dispatcher 關聯的 DispatcherObject。 (繼承自 DispatcherObject)
Duration :獲取或設定此時間線播放的時間長度,而不是計數重複。 (繼承自 Timeline)
FillBehavior :獲取或設定一個值,該值指定 Timeline 在到達其有效期末尾後的行為。 (繼承自 Timeline)
HasAnimatedProperties :獲取一個值,該值指示一個或多個 AnimationClock 物件是否與此物件的任何依賴項屬性相關聯。 (繼承自 Animatable)
IsFrozen :獲取一個值,該值指示物件當前是否可修改。 (繼承自 Freezable)
IsSealed :獲取一個值,該值指示此例項當前是否為密封的(只讀)。 (繼承自 DependencyObject)
Name :獲取或設定此 Timeline 的名稱。 (繼承自 Timeline)
RepeatBehavior :獲取或設定此時間線的重複行為。 (繼承自 Timeline)
SlipBehavior :獲取或設定一個值,該值指定在其中一個或多個 Timeline 子級滑動時此時間線的行為方式。 (繼承自 ParallelTimeline)
SpeedRatio :獲取或設定此 Timeline 的時間相對於其父級的前進速率。 (繼承自 Timeline)