地球绕着太阳转 月球绕着地球转(入门)
网上都是介绍些WPF的入门基础,稍微些例子,程序都非常少。
今天弄了个简易的太阳系(仅仅是地球绕着太阳转,月亮绕着地球转),有个样子而已。
以下是效果图,当你点“start”button的时候,地球和月亮将会沿着相应轨道运行。
图中涉及两个路径(轨道),三个圆(太阳,地球,月球),一个按钮。
暂时不考虑按钮触发。我们需要实现的是地球绕着太阳转,月球绕着地球转(两者实现方式差不多),所以我们考虑问题的时候可以分为两个方面:
- 月球绕着地球转
- 地球绕着太阳转(其实是【月球绕着地球转】整体绕着太阳转)
下面给出在xaml文件中主要实现功能的代码:
1.路径(轨道)的实现
1 <!--轨道路径的实现,通过使用EllipseGeometry实现椭圆路径的绘制--> 2 <Path Stroke="#FF686964"> 3 <Path.Data> 4 <EllipseGeometry Center="400 250" RadiusX="400" RadiusY="250" x:Name="e1"/> 5 </Path.Data> 6 </Path>
2.圆(太阳,地球,月球)的实现。其中先不考虑月球绕地球转等动画效果,这只是描绘简单的形状。
<!--球体的简单实现,可以通过笔刷等方式绘制它的效果,以下是简单的通过线性笔刷绘制太阳的Ellipse--> <Ellipse Height="150" HorizontalAlignment="Left" Name="sun" VerticalAlignment="Top" Width="150"><Ellipse.Fill><LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"><GradientStop Color="#FFFAAC0A" Offset="0.246" /><GradientStop Color="#FFF9F00B" Offset="0.967" /></LinearGradientBrush></Ellipse.Fill></Ellipse>
3.图形已经出来了,我们只需要考虑相应的动画效果就可以了。想想,既然是地球绕着太阳转,那月球也要绕着地球转,那就相当于一个小整体(其中包括地球,月球,月球绕着地球转的轨道)绕着整个太阳轨道转了,这样就有趣了,我们可以将它们放在一个控件里,如Gird。下面给出Grid绘制特效,事件的代码。
1 <!--通过设置Grid的RenderTransform来设置它的特效,我们用了是其中的<MatrixTransform--> 2 <Grid.RenderTransform> 3 <MatrixTransform x:Name="grid"/> 4 </Grid.RenderTransform> 5 <!--Grid触发器--> 6 <Grid.Triggers> 7 <!--RouteEvent是设置路由时间由Page.Loaded时候触发,使用MatrixAnimationUsingPath,并指向grid--> 8 <EventTrigger RoutedEvent="Page.Loaded"> 9 <BeginStoryboard> 10 <Storyboard x:Name="sb1" RepeatBehavior="Forever"> 11 <MatrixAnimationUsingPath x:Name="ma1" 12 Storyboard.TargetName="grid" 13 Storyboard.TargetProperty="Matrix" 14 Duration="0:1:0"/> 15 </Storyboard> 16 </BeginStoryboard> 17 </EventTrigger> 18 </Grid.Triggers>
这样整体的Gird绕着太阳的动画效果就实现了,当然,由于在<MatrixAnimationUsingPah>中并不完整,我们需要在Start按钮的点击事件中增加相应代码:
1 PathGeometry pg1 = new PathGeometry(); 2 pg1.AddGeometry(e1); 3 ma1.PathGeometry = pg1; 4 sb1.Begin(grid1);
这样,我们的整个动画效果就差不多完成了,至于月球绕着地球转,不就是把Grid的动画换成Ellipse吗?
新手,欢迎指教!
下面贴出自己的源代码。
http://files.cnblogs.com/tiny-wang/semDemo-2012-4-25.rar
转载于:https://www.cnblogs.com/tiny-wang/archive/2012/04/25/2470556.html
地球绕着太阳转 月球绕着地球转(入门)相关推荐
- canvas 模拟地球绕太阳转动 月球绕地球转动
requestAnimationFrame,Web中写动画的另一种选择 HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes ...
- matlab地球绕太阳,matlab 怎么做地球绕太阳转 同时 月球绕地球转 动态的 可以做成圆周运动 二维的 一分钟左右...
满意答案 sirenlai 2014.04.10 采纳率:53% 等级:8 已帮助:112人 %下面这是一个演示嫦娥卫星绕月运行的程序,去掉卫星轨迹既是你所要的程序 figure('name', ...
- matlab地球绕太阳,matlab 怎么做地球绕太阳转 同时 月球绕地球转 动态的 可以做成圆周运动 二维的 一分钟左右...
%下面这是一个演示嫦娥卫星绕月运行的程序,去掉卫星轨迹既是你所要的程序 figure('name','嫦娥一号与月亮.地球关系');%设置标题名字 s1=[0:.01:2*pi]; hold on;a ...
- 【Scratch】青少年蓝桥杯_每日一题_12.09_地球绕太阳转,月球绕地球转
用心写好每一篇文章 效果图 一.题目背景 本题是Scratch编程问题,出现在2020年9月的STEMA考试中. 二.编程实现 地球绕着太阳转﹐月球绕着地球转. [具体要求] 1)创建太空背景Star ...
- 地球环绕 html5,玩转html5(五)---月球绕着地球转,地球绕着太阳转
关于运动速度的参数与真实速度有点差距,大家可以自行调整 地球绕着太阳转,月球绕着地球转 您的浏览器不支持canvas //获取画布 var canvas=document.getElementById ...
- 玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)...
请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 关于运动速度的参数与真实速度有点差距,大家可以自行调整 <!DOCTYPE html> <html> <head& ...
- 用html5画地球椭圆绕太阳,玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)...
请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 关于运动速度的参数与真实速度有点差距,大家可以自行调整 地球绕着太阳转,月球绕着地球转 您的浏览器不支持canvas //获取画布 var ca ...
- 【小demo】 利用two.js绘制月亮围绕地球转,地球绕着太阳转
一 原理 在Two.js中和Canvas.SVG都不同的有这么几个地方: Two.js中所有的旋转都是以自己为中心 Two.js中的旋转不会累加 Two.js中不使用定时器,使用Two.play()方 ...
- 恒星绕太阳转css,地球绕太阳转,太阳绕银河系中心转,银河系绕着什么转?
本文参加百家号 #科学了不起# 系列征文赛. 爱因斯坦的相对论表明,宇宙中没有绝对静止的参照系,所谓的静止不过是相对的概念,运动才是绝对的.小到粒子,大到天体都存在某种运动,它们并不会保持绝对静止. ...
最新文章
- 屏幕输出语句_2.2 数据输入与输出
- [转]C++/CLI与C#常用语法对比
- shell__常用命令__awk
- 18.6 负载均衡集群介绍 18.7 LVS介绍 18.8 LVS调度算法 18.9/18.10 LVS NAT模式搭建
- 计算机网络实验ifconfig,《计算机网络》操作系统网络配置实验.doc
- 记一次vue项目yarn打包环境配置失效的解决方案
- 领域驱动设计学习心得
- 关键词文章自动生成工具-关键词组合工具-关键词文章采集工具
- 模具设计进程中应注意哪些问题
- c语言 牛逼代码,装逼技巧:程序员如何用代码证明自己牛逼!
- 图像处理研究中心系统 包含去噪 蜕变 去痘痘等操作
- 应用多开,定位,机型伪装这都有
- 关于字符、字符集、编码和Unicode
- Java------IO流之文件专属流
- 排查内存orJVM内存飙高
- “茶界茅台”竹叶青的数字化营销玩法 | 案例
- 微信人工客服电话号码是多少
- 枚举法用什么算法结构计算机,计算机常用算法枚举算法2-2014
- MacBook Pro如何修改Type C网口适配器的Mac地址
- 社群营销运营分类包括哪些内容