css和js3d粒子,使用EaselJS实现的3D球形粒子运动
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
// Config
var TOTAL = 1000;
var FPS = 60;
// Vars
var particles = [];
var stage, particle, maxx, maxy, gui, stats;
var changing = false;
function init() {
// get a reference to the canvas we'll be working with:
var canvas = document.getElementById("canvas");
if (!canvas || !canvas.getContext) return;
stage = new createjs.Stage(canvas);
stage.mouseEventsEnabled = true;
stage.mouseMoveOutside = false;
// Load
var blobSrc = new Image();
blobSrc.src = 'http://www.as-flash.com/ne_brisi/canvas/ball.png';
blobSrc.name = 'particle';
blobSrc.onload = onLoaded;
function onLoaded(e) {
particle = new createjs.Bitmap(blobSrc);
maxx = canvas.width - blobSrc.width;
maxy = canvas.height - blobSrc.height;
addParticles();
build();
animate();
}
function animate() {
// TICKER
createjs.Ticker.addListener(this);
createjs.Ticker.setFPS(FPS);
createjs.Ticker.useRAF = true;
}
function addParticles() {
for (var i = 0; i < particles.length; i++) {
stage.removeChild(particles[i]);
}
particles = [];
for (i = 0; i < TOTAL; i++) {
particles[i] = particle.clone();
particles[i].vx = 0;
particles[i].vy = 0;
}
}
// STATS
stats = new Stats();
stats.setMode(0);
document.body.appendChild(stats.domElement);
// GUI
gui = new dat.GUI({
autoPlace: false
});
gui.width = 220;
var customContainer = document.getElementById('gui-container');
customContainer.appendChild(gui.domElement);
var fpsc = gui.add(window, 'FPS', 0, 60).step(5).name('FPS');
var totalc = gui.add(window, 'TOTAL', 100, 5000).step(100).name('Particles');
gui.close();
fpsc.onChange(function(value) {
createjs.Ticker.setFPS(FPS);
});
totalc.onChange(function(value) {
changing = true;
});
totalc.onFinishChange(function(value) {
changing = false;
addParticles();
build();
});
}
// Build
function build() {
for (var i = 0; i < TOTAL; i++) {
particles[i].x = Math.random() * maxx;
particles[i].y = Math.random() * maxy;
stage.addChild(particles[i]);
}
}
function tick() {
if (changing) return;
for (var i = 0; i < TOTAL; i++) {
var blob = particles[i];
var dx = blob.x - stage.mouseX;
var dy = blob.y - stage.mouseY;
var vx = blob.vx;
var vy = blob.vy;
if (dx * dx + dy * dy <= 10000) {
vx += dx * 0.01;
vy += dy * 0.01;
}
vx *= 0.95;
vy *= 0.95;
vx += Math.random() - 0.5;
vy += Math.random() - 0.5;
var x = blob.x += vx;
var y = blob.y += vy;
if (x < 0 || x > maxx || y < 0 || y > maxy) {
var r = Math.atan2(y - maxy / 2, x - maxx / 2);
vx = -Math.cos(r);
vy = -Math.sin(r);
}
blob.vx = vx;
blob.vy = vy;
}
// update
stage.update();
stats.update();
}
// Init
window.addEventListener('load', init, false);
css和js3d粒子,使用EaselJS实现的3D球形粒子运动相关推荐
- css和js3d粒子,升级版ThreeJS 3D粒子波浪动画
升级版ThreeJS 3D粒子波浪动画 2020-04-12 23:07:22 1307 编程开发 效果图 升级版demo 2:改变粒子的形状 demo 2 升级版demo 1:改变粒子大小,颜色 d ...
- button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 转载链接: https://github.com/XboxYan/note ...
- 怎么实现hover_web前端CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 通常这类效果第一反应可能就是借助canvas了,比如下面这个案例点击预览( ...
- html、css、js粒子特效——前端
html.css.js粒子特效--前端 看看效果图 首先是html结构 使用canvas设置一个画布 <canvas width="500px" height="5 ...
- 使用HTML+CSS+JS 实现粒子动画
:阿余 :2022-3-2-2 :如有错误,敬请指正.感谢! 使用HTML+CSS+JS 实现粒子动画 1 设置网页的样式 2 移动鼠标生成粒子 3 为每个粒子生成随机颜色属性 4 让粒子动起来 5 ...
- 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...
- ❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹 ...
- HTML+CSS+JS实现 ❤️ 粒子倒计时特效❤️
- mie散射粒子消光系数 matlab代码,一种球形粒子GMie散射效率极值的算法
一种球形粒子G Mie散射效率极值的算法 [专利摘要]球形粒子的G?Mie散射问题属于物理光学领域,涉及光与原子的相互作用.G?Mie理论在有着广泛的用途,如分析激光衍射粒度,光镊,激光制冷,大气理论 ...
最新文章
- 视频采集-非DICOM影像设备转DICOM标准的解决方案
- thinkphp3.2与phpexcel带图片生成 完美案例
- 网站链接自动化测试原理及工具介绍
- (12)Node.js核心模块fs—实现文件复制和压缩
- MySQL表自动增长列插入数据
- python习题_新手练习:Python练习题目
- Java LRU的实现
- 豆瓣已玩烂,来爬点有逼格的 ——IMDB 电影提升你的品位
- C语言sqrt求平方根函数注意点
- Windows易升升级指南(解决大版本间更新95%的问题)
- 【编程之外】当遮羞布被掀开,当人们开始接受一切
- 产品经理原型工具选择:墨刀和axure的区别?
- uniapp-公众号微信授权
- ABAP新建session会话的函数_SAP刘梦_新浪博客
- 2019 Gartner 商业智能分析平台与数据分析报告解读
- JZOJ5952. 【NOIP2018模拟11.5A组】凯旋而归
- 计算机基础——操作系统
- Pandas库离线安装总结
- ArcGIS地形分析
- vue项目中Des的加密解密