python代码流星雨_HTML5梦幻之旅——炫丽的流星雨效果实现过程_html5教程技巧
徐家破镜昏如雾。半面人间露。等闲相约是看灯。谁料人间天上、似流星。朱门帘影深深雨。憔悴新人舞。天涯海角赏新晴。惟有桥边卖镜、是闲行。
——宋·刘辰翁·《虞美人》
流星出现的时候,人们都喜欢对着它们许愿,因为传说对着流星许下愿望后,愿望就能实现。不过流星很少见,至少我没有见到过,因此从来没有对着它许愿。最近出于兴趣,制作一个拖尾效果,后来想到可以通过拖尾效果来实现一下流星雨的效果。因此今天就来实现一下,也好让我等没有看到过流星的童鞋长长见识。
先发几个截图吧:
测试连接:http://www.cnblogs.com/yorhom/articles/3237944.html
一,准备工作
本次开发需要用到开源引擎lufylegend.js,引擎的下载地址&详细信息如下
引擎官方网站:
http://lufylegend.com/lufylegend
引擎API网站:
http://lufylegend.com/lufylegend/api
二,拖尾效果
实现流星雨,要用到拖尾效果,但lufylegend中没有添加拖尾的功能,所以只有自己写了,其实实现起来也不难,就是lufy太懒了,没有封装而已(愿lufy不要看到这句话啊……)。今天我就帮他老人家来实现一下这个效果。
拖尾这个效果在游戏中很常见,比如人物移动时的幻影,子弹等。因此我们把它封装为一个Smearing类,这个类主要负责实现拖尾效果。代码如下:
复制代码
代码如下:
/**
* Smearing
* @param $object 添加拖尾的对象
*/
function Smearing($object){
var self = this;
base(self,LSprite,[]);
self.x = 0;
self.y = 0;
self.mode = “”;
self.smearingSprite = new LSprite();
self.addChild(self.smearingSprite);
self.object = $object;
self.originalSprite = new LSprite();
self.addChild(self.originalSprite);
self.originalSprite.addChild(self.object);
self.addEventListener(LEvent.ENTER_FRAME,self.smeared);
}
代码清单1
接下来由我逐字逐句地解释一番。
第一行代码就不讲解了,地球上的IT人都知道。因此从第二行开始说起。
首先我们将这个类用base继承自LSprite,如代码清单2(至于base和LSprite是什么,可以到API文档里去看看,或者看看我以前的文章)。
复制代码
代码如下:
base(self,LSprite,[]);
代码清单2
接下来,我们加入一个用来添加拖尾的层。如代码清单3
复制代码
代码如下:
self.smearingSprite = new LSprite();
self.addChild(self.smearingSprite);
代码清单3
然后我们保存一下添加拖尾效果的对象,这样方便以后使用。如代码清单4所示
复制代码
代码如下:
self.object = $object;
代码清单4
然后添加放置要添加拖尾效果对象的层,并将它显示出来。如代码清单5
复制代码
代码如下:
self.originalSprite = new LSprite();
self.addChild(self.originalSprite);
self.originalSprite.addChild(self.object);
代码清单5
最后添加一个时间轴事件,方便添加拖尾。
复制代码
代码如下:
self.addEventListener(LEvent.ENTER_FRAME,self.smeared);
代码清单6
到这里,Smearing构造器就写完了,也解释完了,看不懂的话可能是你不了解lufylegend,里面的addChild,LSprite都是lufylegend中封装的。
我们在上面的代码中已经加入了时间轴事件。为什么要加入呢?因为我不妨说一下拖尾的原理。拖尾其实就是不断地将原对象克隆出来,然后放在现在所在的位置上,相当于不断地向画面上盖章。当原对象移开时,我们克隆的对象并没有移开,而原对象移开了,如果我们增加的对象有很多,那就会形成一条链接原对象的线。这时我们再遍历一下这个线里的每个成员,通过缓动来改变当前对象的透明度。然后判断该对象的透明度是否为0,如果是就移除,避免占太多空间。因此,我们添加时间轴事件用来不断添加拖尾对象。
Smearing成员函数smeared起到这点作用,代码如下:
复制代码
代码如下:
Smearing.prototype.smeared = function(self){
var smearingChild = new SmearingChild(self.originalSprite,self.object);
self.smearingSprite.addChild(smearingChild);
for(var key in self.smearingSprite.childList){
LTweenLite.to(self.smearingSprite.childList[key],0.5,{
alpha: 0,
onComplete:function(o){
self.smearingSprite.removeChild(o);
}
});
}
};
代码清单7
这些代码按照我在上面所说的原理执行。可以看到我们在最后遍历了拖尾层的成员,然后改变遍历到的对象的透明度,并且在缓动结束后移除自身。其中的缓动类用的是lufylegend中封装好了的LTweenLite,可以去API文档里看看,写得很详细。
主要是上面两行代码,如代码清单8:
复制代码
代码如下:
var smearingChild = new SmearingChild(self.originalSprite,self.object);
self.smearingSprite.addChild(smearingChild);
代码清单8
可以看到又用到了一个名为SmearingChild的类,这个便是传说中的拖尾类。这个类不容忽视,虽然代码很少,但是很重要,里面的代码如代码清单9:
复制代码
代码如下:
/**
* SmearingChild
* @param $parent 确定拖尾位置的对象
* @param $object 要添加拖尾效果的对象
*/
function SmearingChild($parent,$object){
var self = this;
base(self,LSprite,[]);
self.addChild($object);
self.x = $parent.x;
self.y = $parent.y;
self.alpha = 0.8;
}
代码清单9
以上的类实例化时有两个参数,第一个用来确定这个拖尾位置的,第二个是原对象。首先来解释一下“用来确定这个拖尾位置的”是神马意思,其实我们对象的移动,不是让整个Smearing对象移动,而是让他里面的originalSprite对象移动,所以不干smearingSprite的事,为什么这样设计呢?其实是有原因的(废话,请忽略),原因所在就是,如果我们的拖尾的坐标设置为整个Smearing对象的坐标位置,那加到smearingSprite的对象也会跟着移动,拖尾就会错位,从而达不到效果。所以我采取了以上的办法:不移动本身,而是移动originalSprite。因此,我们要把originalSprite的数据传到SmearingChild中,因此就通过$parent来获取。
讲了一通,大伙应该也明白了些。后面放出代码,大家可以拿下去研究,或者在文章下方提出问题或者用新浪微博@Yorhom,还可以用邮箱,邮箱地址:wangyuehao1999@gmail.com。(联系方式多多啊 (^o^))
Smearing这个类还差个功能,那就是让对象缓缓移动,实现起来也很简单,加入to函数:
复制代码
代码如下:
Smearing.prototype.to = function($duration,$vars){
var self = this;
$vars.onComplete = function(){
self.mode = “complete”;
}
LTweenLite.to(self.originalSprite,$duration,$vars);
};
代码清单10
第一个参数是移动执行的时间;第二个参数是执行缓动的数据,和LTweenLite.to方法最后一个参数是一样的,参照API文档即可。不过值得注意的是,为了方便操作,我们在移动结束时,将该对象的mode属性改为“complete”。这样做是为了让大家根据mode属性的值来决定是否作出其他的操作,比如移除该对象,或者往其他地方移动。
Smearing这个类封装好了,使用起来就简单了,如下:
复制代码
代码如下:
init(10,”mylegend”,500,400,main);
var back;
function main(){
LStage.setDebug(true);
back = new LSprite();
back.graphics.drawRect(0,””,[0,0,50,50],true,”blue”);
smearing = new Smearing(back,50);
smearing.to(2,{
x: 200,
y: 200
});
addChild(smearing);
}
代码清单11
演示效果图如下:
测试连接:http://www.cnblogs.com/yorhom/articles/3237266.html
三,炫丽的流星雨效果有了,Smearing这个类,我们的流星雨就简单多了。首先把所有代码展示一下:
复制代码
代码如下:
init(10,”mylegend”,500,400,main);
var backLayer,meteorLayer;
var back,meteor;
var maxFrame = 40,indexFrame = 0;
function main(){
LStage.setDebug(true);
//加入底板层
backLayer = new LSprite();
addChild(backLayer);
//加入流星层
meteorLayer = new LSprite();
addChild(meteorLayer);
//画一个黑色矩形作为背景
back = new LGraphics();
back.drawRect(0,””,[0,0,LStage.width,LStage.height],true,”black”);
backLayer.addChild(back);
//画一个黄色矩形作为一颗流星
meteor = new LSprite();
meteor.graphics.drawRect(0,””,[0,0,10,10],true,”yellow”);
backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
}
function onframe(){
if(indexFrame > maxFrame){
indexFrame = 0;
//为每个流星添加一个拖尾
var smearing = new Smearing(meteor,50);
smearing.x = Math.floor(Math.random() * 250);
smearing.y = 0;
smearing.to(2,{
x: Math.floor(Math.random() * (500 – 480) + 480),
y: 400
});
meteorLayer.addChild(smearing);
}
for(var key in meteorLayer.childList){
if(meteorLayer.childList[key].mode == “complete”){
meteorLayer.removeChild(meteorLayer.childList[key]);
}
}
indexFrame ++;
}
代码清单12
每行代码都加入了注释,理解起来一定很简单了。如果实在是理解不到,可能是因为你没有了解lufylegend罢了。可以参照API文档学习一下。
最后是代码打包,下载地址
本篇文章就到此结束了。文章如有什么地方写得不妥,欢迎提出。另外,如果有任何不解的地方,可以在博客下方留言,我会尽我所能帮你解决。
支持就是最大的鼓励!
python代码流星雨_HTML5梦幻之旅——炫丽的流星雨效果实现过程_html5教程技巧相关推荐
- 代码 抠图_3 行 Python 代码 5 秒抠图的 AI 神器,根本无需 PS,附教程
曾几何时,「抠图」是一个难度系数想当高的活儿,但今天要介绍的这款神工具,只要 3 行代码 5 秒钟就可以完成高精度抠图,甚至都不用会代码,点两下鼠标就完成了. 感受下这款抠图工具抠地有多精细: 是不是 ...
- python自动修图软件_3 行 Python 代码实现 5 秒抠图的 AI 神器,告别PS(附教程)...
文 | 苏克 1900@高级农名工 推荐 | 编程派公众号(ID:codingpy) 曾几何时,「抠图」是一个难度系数想当高的活儿,但今天要介绍的这款神工具,只要 3 行代码 5 秒钟就可以完成高精度 ...
- python开发ps插件_3 行 Python 代码实现 5 秒抠图的 AI 神器,告别PS(附教程)
文 | 苏克 1900@高级农名工 推荐 | 编程派公众号(ID:codingpy) 曾几何时,「抠图」是一个难度系数想当高的活儿,但今天要介绍的这款神工具,只要 3 行代码 5 秒钟就可以完成高精度 ...
- 炫酷!200 行 Python 代码实现马赛克拼图!
在一图胜千言的时代,没有什么比一张图片更有冲击力的了,那如果一千张图片拼接起来是什么效果呢? 别问,问就是两字 -- 炫酷! 你有没有想过上面的图片是怎么实现的,难道这是用 ps 一张张拼起来的?当然 ...
- Python代码写得丑怎么办?推荐几个神器拯救你
Python编程语言需要遵循PEP8规范,但是初学者往往记不住这个规范,代码写得比较丑.本文推荐几个神器来拯救奇丑无边的python代码. 一.Jupyter notebook 篇 Jupyter n ...
- 『HTML5梦幻之旅』-缤纷多姿的烟花效果
天花无数月中开,五采祥云绕绛台.堕地忽惊星彩散,飞空旋作雨声来.怒撞玉斗翻晴雪,勇踏金轮起疾雷.更漏已深人渐散,闹竿挑得彩灯回. --明·瞿佑·<烟火戏> 记得每年过春节的那段时间,除了欣 ...
- Python 代码规范
前言 Python 学习之旅,先来看看 Python 的代码规范,让自己先有个意识,而且在往后的学习中慢慢养成习惯 目录 Python代码规范 一.简明概述 1.编码 如无特殊情况, 文件一律使用 U ...
- 初学者怎样看懂python代码_新手入门必看,最常用的Python代码片段
对于编程开发人员来讲,Python语法一开始可能看起来很奇怪.如果我们看到Python使用其他编程语言(例如Java)完成常见的工作,那会不会很意思?我们常见的代码片段称为"代码惯用法&qu ...
- Python代码规范和命名规范
http://www.imooc.com/article/19184?block_id=tuijian_wz#child_5_1 Python代码规范和命名规范 前言 Python 学习之旅,先来看看 ...
最新文章
- Matlab在ubuntu上运行速度,ubuntu环境下VLFeat在MATLAB上的运行
- python 合并区间
- 题目3:文本文件单词的检索与计数(实验准备)
- Immutable-不变模式与不变类-一版
- php实时上传多张图片,php实现多图片上传程序代码
- Zygote和System进程的启动过程
- 查看oracle的块大小,查看操作系统块大小
- oracle放在内存里,oracle如中何把小表钉住在内存中
- C#/java 求最大公约数和最小公倍数
- 基于JAVA+SpringBoot+Mybatis+MYSQL的飞机订票系统
- git rebase 丢弃提交
- Unity3D之移植学习笔记:移植到Android平台
- 查询当天交易总额最大的用户信息_场内场外交易
- tf.map_fn 多输入
- ROS安装USB摄像头
- wps文档乱码怎么修复呢?
- 中国便利店行业战略发展及投资盈利研究报告2022年版
- 【论文阅读】Single- and Cross-Modality Near Duplicate Image PairsDetection via Spatial Transformer Compar
- 教你撩妹,每天给小姐姐发一封暖心邮件
- 近端梯度下降法 (proximal gradient descent)
热门文章
- 笔记本电脑插上电源合盖子不睡眠不锁屏只是关闭了屏幕
- 基于Matlab的PIV图像处理
- mysql 当天日期零点_MySQL查询当天0点,昨天 mysql 获取当天0点 和 当天23点59分59秒...
- 立体视觉标定源代码C++,简单粗暴!粗暴·······
- 互动抽奖背后的随机性与算法实现
- DHCP 中继Snooping解释以及配置
- java显示日历 插件_JavaWeb项目FullCalendar日历插件使用的示例代码
- Duplicate Entry
- camera中文版软件 ip_Synergy下载|Synergy 1.8.4 中文版
- 机器学习吴恩达课程总结(五)