原文:
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();
? ? ? ? ? ? }
? ? ? ? }