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

            }

        }

最新文章

  1. 从备考PMP到与项目经理同呼吸
  2. Rabin-Karp指纹字符串查找算法
  3. [原创] C# dynamic拼接Json串
  4. python 单例模式
  5. Google Volley框架源码走读
  6. HDU5128 细心、细心、细心
  7. php基础之一
  8. 基于visual Studio2013解决面试题之1007鸡蛋和篮子
  9. bzoj 4196: [Noi2015]软件包管理器
  10. Qt 如何使用 lambda 表达式连接信号和槽?
  11. Java单例模式的实现
  12. 上海高校程序设计联赛 D-CSL的字符串 栈模拟
  13. OVS常用命令与使用总结
  14. 【PS技巧】如何拼图
  15. Java学习笔记:知识总结
  16. 【设计模式】—— 状态模式State
  17. table切换(自己写)
  18. placement new
  19. 汇编语言学习笔记(十二)-浮点指令----ACM
  20. mysql复习-来源考试

热门文章

  1. springboot(十四):springboot整合shiro-登录认证和权限管理(转)
  2. hibernate---java.lang.UnsupportedOperationException: The user must supply a JDBC connection
  3. IOS开发核心动画六:动画组
  4. javascript中定义事件的三种方式 分类: C1_HTML/JS/JQUERY 2014-08-07 10:27 634人阅读 评论(0) 收藏
  5. 菜单之一:Menu基础内容 分类: H1_ANDROID 2013-11-03 00:23 906人阅读 评论(0) 收藏
  6. 并发队列ConcurrentLinkedQueue 和 阻塞队列LinkedBlockingQueue用法
  7. android环境安装
  8. html5+js压缩图片上传
  9. Multi-Tenancy模式,基础服务大规模扩张的时候,是应该推进了。
  10. RSA算法原理(转)