WPF 实现波浪浮动效果

原文:

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 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 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">

    </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();

            }

        }