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.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();
}
}
最新文章
- 从备考PMP到与项目经理同呼吸
- Rabin-Karp指纹字符串查找算法
- [原创] C# dynamic拼接Json串
- python 单例模式
- Google Volley框架源码走读
- HDU5128 细心、细心、细心
- php基础之一
- 基于visual Studio2013解决面试题之1007鸡蛋和篮子
- bzoj 4196: [Noi2015]软件包管理器
- Qt 如何使用 lambda 表达式连接信号和槽?
- Java单例模式的实现
- 上海高校程序设计联赛 D-CSL的字符串 栈模拟
- OVS常用命令与使用总结
- 【PS技巧】如何拼图
- Java学习笔记:知识总结
- 【设计模式】—— 状态模式State
- table切换(自己写)
- placement new
- 汇编语言学习笔记(十二)-浮点指令----ACM
- mysql复习-来源考试
热门文章
- springboot(十四):springboot整合shiro-登录认证和权限管理(转)
- hibernate---java.lang.UnsupportedOperationException: The user must supply a JDBC connection
- IOS开发核心动画六:动画组
- javascript中定义事件的三种方式 分类: C1_HTML/JS/JQUERY 2014-08-07 10:27 634人阅读 评论(0) 收藏
- 菜单之一:Menu基础内容 分类: H1_ANDROID 2013-11-03 00:23 906人阅读 评论(0) 收藏
- 并发队列ConcurrentLinkedQueue 和 阻塞队列LinkedBlockingQueue用法
- android环境安装
- html5+js压缩图片上传
- Multi-Tenancy模式,基础服务大规模扩张的时候,是应该推进了。
- RSA算法原理(转)