WPF 实现波浪浮动效果

Posted 2021-01-08 lonelyxmas

原文:WPF 实现波浪浮动效果

目标：实现界面图标Load时，整体图标出现上下波浪浮动效果，如下图：

前台代码：

<Window
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:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" mc:Ignorable="d"
x:Class="目录波浪效果.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480" Loaded="Window_Loaded" Background="#FF97B7DE">
<Window.Resources>
? ? ? ? <Storyboard x:Key="Storyboard2">
? ? ? ? ? ? <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" >
? ? ? ? ? ? ? ? <EasingDoubleKeyFrame ?Value="-300">
? ? ? ? ? ? ? ? ? ? <EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut"/>
? ? ? ? ? ? ? ? ? ? </EasingDoubleKeyFrame.EasingFunction>
? ? ? ? ? ? ? ? </EasingDoubleKeyFrame>
? ? ? ? ? ? </DoubleAnimationUsingKeyFrames>
? ? ? ? </Storyboard>
? ? </Window.Resources>


<Grid x:Name="LayoutRoot">
<Ellipse x:Name="ellipse1" Fill="#FF0707F3" HorizontalAlignment="Left" Margin="31.5,0,0,20" Stroke="Black" Width="100" Height="100" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5" >
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
? ? ? ? <Ellipse x:Name="ellipse2" Fill="#FF27E40C" Margin="152.5,0,0,20" Stroke="Black" HorizontalAlignment="Left" Height="100" Width="100" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5">
? ? ? ? <Ellipse.RenderTransform>
? ? ? ? ? ? <TransformGroup>
? ? ? ? ? ? ? ? <ScaleTransform/>
? ? ? ? ? ? ? ? <SkewTransform/>
? ? ? ? ? ? ? ? <RotateTransform/>
? ? ? ? ? ? ? ? <TranslateTransform/>
? ? ? ? ? ? </TransformGroup>
? ? ? ? ? ? </Ellipse.RenderTransform>
? ? ? ? </Ellipse>
? ? ? ? <Ellipse x:Name="ellipse3" Fill="#FFF57406" Margin="268.5,0,265.5,20" Stroke="Black" Height="90" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5">
? ? ? ? ? ? <Ellipse.RenderTransform>
? ? ? ? ? ? ? ? <TransformGroup>
? ? ? ? ? ? ? ? ? ? <ScaleTransform/>
? ? ? ? ? ? ? ? ? ? <SkewTransform/>
? ? ? ? ? ? ? ? ? ? <RotateTransform/>
? ? ? ? ? ? ? ? ? ? <TranslateTransform/>
? ? ? ? ? ? ? ? </TransformGroup>
? ? ? ? ? ? </Ellipse.RenderTransform>
? ? ? ? </Ellipse>
? ? ? ? <Ellipse x:Name="ellipse4" Fill="#FF02FFE2" HorizontalAlignment="Right" Margin="0,0,148.5,20" Stroke="Black" Width="90" Height="90" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5">
? ? ? ? ? ? <Ellipse.RenderTransform>
? ? ? ? ? ? ? ? <TransformGroup>
? ? ? ? ? ? ? ? ? ? <ScaleTransform/>
? ? ? ? ? ? ? ? ? ? <SkewTransform/>
? ? ? ? ? ? ? ? ? ? <RotateTransform/>
? ? ? ? ? ? ? ? ? ? <TranslateTransform/>
? ? ? ? ? ? ? ? </TransformGroup>
? ? ? ? ? ? </Ellipse.RenderTransform>
? ? ? ? </Ellipse>
? ? ? ? <Ellipse x:Name="ellipse5" Fill="#FFDE0BE9" Height="100" Width="100" Margin="0,0,33,20" Stroke="Black" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Right" d:LayoutOverrides="Width">
? ? ? ? ? ? <Ellipse.RenderTransform>
? ? ? ? ? ? ? ? <TransformGroup>
? ? ? ? ? ? ? ? ? ? <ScaleTransform/>
? ? ? ? ? ? ? ? ? ? <SkewTransform/>
? ? ? ? ? ? ? ? ? ? <RotateTransform/>
? ? ? ? ? ? ? ? ? ? <TranslateTransform/>
? ? ? ? ? ? ? ? </TransformGroup>
? ? ? ? ? ? </Ellipse.RenderTransform>
? ? ? ? </Ellipse>
? ? </Grid>
</Window>

后台代码：

private void Window_Loaded(object sender, RoutedEventArgs e)
? ? ? ? {
? ? ? ? ? ? int t = 0;
? ? ? ? ? ? foreach (FrameworkElement element in this.LayoutRoot.Children)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? t++;
? ? ? ? ? ? ? ? Storyboard storyboard = this.FindResource("Storyboard2") as Storyboard;
? ? ? ? ? ? ? ? DoubleAnimationUsingKeyFrames frames = storyboard.Children[0] as DoubleAnimationUsingKeyFrames;
? ? ? ? ? ? ? ? EasingDoubleKeyFrame eas = frames.KeyFrames[0] as EasingDoubleKeyFrame;
? ? ? ? ? ? ? ? eas.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(2000 + t * 200));
? ? ? ? ? ? ? ? Storyboard.SetTargetName(frames, element.Name);
? ? ? ? ? ? ? ? storyboard.Begin();
? ? ? ? ? ? }
? ? ? ? }