用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果
用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果
预览各种效果看下图
效果和代码看这里,看不到效果的请下载支持html5的浏览器
http://fsanguo.comoj.com/html5/jstoas07/index.html
2013年3月13日追加
该系列文章写的很早,目前该系列文章中所总结的方法等都已经封装进了lufylegend.js引擎里
lufylegend.js引擎的下载链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>粒子效果</title>
</head>
<body>
<div id="mylegend">loading......</div>
<script type="text/javascript" src="http://lufylegend.com/js/lufylegend-1.6.1.min.js"></script>
<script type="text/javascript">
init(40,"mylegend",300,300,main);
var imgData = [{name:"img",path:"http://lufylegend.com/images/face.jpg"}];
var imglist;
var mainBitmap,mainBitmapHeight;
var windList = [];
var backLayer;
function main(){
LLoadManage.load(
imgData,
function(progress){},
loadover
);
}
function loadover(result){
imglist = result;
//加入一个LSprite对象
backLayer = new LSprite();
addChild(backLayer);
//加入一个LBitmap对象来显示一张大图片,将图片加载到backLayer对象上
mainBitmap = new LBitmap(new LBitmapData(imglist["img"]));
backLayer.addChild(mainBitmap);
//将LBitmap对象初始的高度保存起来
mainBitmapHeight = mainBitmap.getHeight();
//给LSprite对象加载一个贞事件,即时间轴
backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
}
function onframe(){
var bitmapdata;
var bitmap;
var addY,addX; if(mainBitmap){
//通过LBitmapData对象的setProperties函数,来修改LBitmapData对象显示图片的范围,每运行一次,显示范围在y轴方向上的起始位置向下移动addY个单位
addY = 3;
mainBitmap.y += addY;
if(mainBitmap.y >= mainBitmapHeight){
addY += mainBitmapHeight - mainBitmap.y;
mainBitmap.y = mainBitmapHeight;
//当LBitmapData对象显示图片的范围变为0之后,将其从backLayer上移除
backLayer.removeChild(mainBitmap);
}else{
mainBitmap.bitmapData.setProperties(0,mainBitmap.y,mainBitmap.getWidth(),(mainBitmapHeight - mainBitmap.y));
}
//下面是将图片一行一行的分解,每运行一次分解一行
var arr = [];
for(i=0;i<mainBitmap.getWidth();i += 3){
addX = 3;
if(i+addX > mainBitmap.getWidth()){
addX = mainBitmap.getWidth() - i;
}
//通过设定LBitmapData对象的显示范围,来得到分解后的小图片,并且将分解后的小图片压入到arr数组
bitmapdata = new LBitmapData(imglist["img"],i,mainBitmap.y-addY,addX,addY);
bitmap = new LBitmap(bitmapdata);
bitmap.x = i;
bitmap.y = mainBitmap.y-addY;
backLayer.addChild(bitmap);
arr.push(bitmap);
}
if(mainBitmap.y >= mainBitmapHeight)mainBitmap=null;
//将分解后的一行小图片压入windList数组
windList.push(arr);
}
windrun();
}
function windrun(){
var i,j,flag,ml=1;
//循环windList数组中的每一张小图片,随机向左上右等方向进行移动
for(i=0;i<windList.length;i++){
if(windList[i].length == 0){
windList.splice(i,1);
i--;
continue;
}
for(j=0;j<windList[i].length;j++){
if(windList[i][j].i == null)windList[i][j].i=1;
flag = Math.random();
if(flag < 0.3){
windList[i][j].x += ml*windList[i][j].i;
}else if(flag < 0.6){
windList[i][j].x -= ml*windList[i][j].i;
}else{
windList[i][j].y -= ml*windList[i][j].i;
}
windList[i][j].alpha -= 0.05;
windList[i][j].i += 2;
if(windList[i][j].alpha <= 0 || windList[i][j].x > LGlobal.width || windList[i][j].y > LGlobal.height){
backLayer.removeChild(windList[i][j]);
windList[i].splice(j,1);
j--;
}
}
}
}
</script>
</body>
</html>
测试连接
http://lufylegend.com/demo/astojs/8.html
下面有朋友问我原理,这个粒子效果其实就是将一张大的图片从上而下,一行一行进行分解,然后将分解后的碎图片,沿着随机的方向一边散开,一边降低透明度,当透明度降低为0的时候,将它移除。
上面的代码我加上了简单的注释,应该不难理解了。
因为引擎封装后,对于之前的代码做了一部分调整,删去了一些属性,下面是我用新版引擎开发的同样的粒子效果
用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果的更多相关文章
- 用仿ActionScript的语法来编写html5——第五篇,Graphics绘图
用仿ActionScript的语法来编写html5——第五篇,Graphics绘图 canvas本身就是一个Graphics,可以直接进行绘图在actionscript里面,每个Sprite都有一个G ...
- 用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
一,对比1,html5中首先看看在html5的canvas中的文字显示 var canvas = document.getElementById("myCanvas"); var ...
- 用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
第三篇,鼠标事件与游戏人物移动 一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用.这样的话,添加鼠标事件,其实只需要给canv ...
- 用仿ActionScript的语法来编写html5——第七篇,自定义按钮
第七篇,自定义按钮这次弄个简单点的,自定义按钮.其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了.下面是添加按钮的代码, function gameInit(event){ ...
- 用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg
第四篇,继承与简单的rpg 这次用继承自LSprite的类来实现简单的rpg的demo先看一下最后的代码与as的相似度 var backLayer; //地图 var mapimg; //人物 var ...
- 用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件
一,LegendForHtml5Programming1.0库件是什么?它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称之 ...
- 用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件
第九篇,仿URLLoader读取文件 先看看最后的代码 function readFile(){ urlloader = new LURLLoader(); urlloader.addEventLis ...
- 用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画
上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示.这次用Sprite来动态显示图片.依然遵循上一篇对显示对象的处理的思路,添加LSprite类,并 ...
- 用仿ActionScript的语法来编写html5——第一篇,显示一张图片
第一篇,显示一张图片 一,代码对比 as代码: public var loader:Loader; public function loadimg():void{ loader = new Loade ...
随机推荐
- nodejs:grunt使用合并压缩的基本使用
一.模块化历史 1,nodejs出现:主要解决后端js规范 2,commonjs:这个组织出来一些服务器规范 3,后端规范commonjs应用升级到前端commonjs2:cmd规范(seajs)和完 ...
- python 使用多线程进行压力测试
#coding=utf-8 import urllib2 import threading import time TOTAL = 0 #总数 SUCC = 0 #响应成功数 FAIL = 0 #响应 ...
- PHP函数补完:stream_context_create()模拟POST/GET
PHP函数补完:stream_context_create()模拟POST/GET PHP流的创建 在 2011年01月08日 那天写的 已经有 9408 次阅读了 感谢 参考或原文 服务 ...
- PHP自动加载__autoload的工作机制
PHP自动加载__autoload的工作机制 PHP的懒加载lazy loading 在 2011年11月12日 那天写的 已经有 4559 次阅读了 感谢 参考或原文 服务器君一共花费了 ...
- 20145317彭垚《Java程序设计》实验二
20145317<Java程序设计>实验二Java面向对象程序设计实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O. ...
- Progressive enhancement
https://en.wikipedia.org/wiki/Progressive_enhancement Progressive enhancement is a strategy for web ...
- OpenGL 完全教程(写给Delphi的开发者) 前言
前言 在开发了许多2D图形程序之后,许多人开始对3D图形编程产生了兴趣.学习一套3D API,是进行3D图形编程的基础.在有趣的3D图形编程中,3D API只不过充当着一种低级的工具而已.因此,在这里 ...
- mysql 存储过程 php版本
<?php /** * PHP操作Mysql存储过程示例 * * @author flyer0126 * @date 2011-12-23 * */ //配置数据库连接信息 $hostname ...
- LinQ总结
不管是在Mvc还是在别的架构中的项目LinQ和Lambda总是经常会遇到的. 而有些LinQ的语法并不是很长用(我大部分用的是Lambda),所以有必要记录一下万一用到的时候我能很方便的找到我想找到的 ...
- node.js学习路线图
http://www.admin10000.com/document/4624.html