JavaScript实现瀑布动画
本文实例为大家分享了JavaScript实现瀑布动画的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv=“X-UA-Compatible” content="IE-edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布(waterful)</title>
<style>
body {
background: #222;
}
</style>
</head>
<body>
<script>
//判断浏览器是否支持canvas
function isSupportCanvas() {
var canvas = document.createElement('canvas');
return !!(canvas.getContext && canvas.getContext("2d"));
}
//requestAnimationFrame会自动使用最优的帧率进行渲染,在我的浏览器上是每秒60帧
function setupRAF() {
var lastTime = 0;
var vendors = ['webkit', 'ms', 'moz', 'o'];
for(var i=0; i<vendors.length && !window.requestAnimationFrame; i++) {
window.requestAnimationFrame = window[vendors[i] + "RequestAnimationFrame"];
window.cancelAnimationFrame = window[vendors[i] + "CancelAnimationFrame"] || window[vendors[i] + "CancelRequestAnimationFrame"]
}
if(!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currentTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currentTime - lastTime));
var futureTime = currentTime + timeToCall;
var id = window.setTimeout(function() {
callback(futureTime);
}, timeToCall);
lastTime = futureTime;
return id;
}
}
if(!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
}
}
}
//在给定的范围内随机选取一个整数
function randomInt(min, max) {
/*
由于位运算的操作数要求是整数，其结果也是整数，所以经过位运算的都会自动变成整数
可用的取整方法：
(1)~~n
(2)n<<0
(3)n>>0
(4)n|0
(5)Math.floor()
(6)Math.ceil()
(7)Math.round()
值得注意的是，位运算只是去掉小数部分，并不会改变整数部分
*/
return ~~(Math.random() * (max - min) + min);
}
//在对象所表示的范围中随机选取一个数
function randomAtRange(obj) {
return Math.random() * (obj.max - obj.min) + obj.min;
}
//在对象所表示的范围中随机选取一个整数
function randomIntAtRange(obj) {
return randomInt(obj.min, obj.max);
}
//瀑布
var Waterful = function(width, height) {
var doublePI = Math.PI * 2;
var canvas;
var ctx;
//存放水粒子的数组
var particles = [];
//每帧生成或销毁粒子的数量
var particleChangeRate = width / 25;
//垂直方向上的加速度(即重力), 小数点前的0可以省略
var gravity = .15;
//水流粒子
var WaterParticle = function() {
//水流粒子宽度范围
var waterWidthRange = {min: 1, max: 20};
//水流粒子高度范围
var waterHeightRange = {min: 1, max: 45};
//水流粒子落到地上溅起的水花半径范围
var waterBubbleRadiusRange = {min: 1, max: 8};
//水花溅起的高度范围
var waterBubbleSpringRange = {min: 20, max: 30};
//色相范围
var hueRange = {min: 200, max: 220};
//饱和度范围
var saturationRange = {min: 30, max: 60};
//亮度
var lightnessRange = {min: 30, max: 60};
//拼接成一个HSLA颜色值(注意：普通函数的this指代它自己)
this.joinHSLA = function(alpha) {
return "hsla(" + [this.hue, this.saturation + "%", this.lightness + "%", alpha].join(",") + ")";
}
this.init = function() {
//水流粒子的最大半径
var waterMaxRadius = waterWidthRange.max / 2;
//水流粒子初始X坐标的范围
var xRange = {min: waterMaxRadius, max: canvas.width - waterMaxRadius};
//水流粒子宽度
this.width = randomAtRange(waterWidthRange);
//水流粒子高度
this.height = randomAtRange(waterHeightRange);
//水流粒子初始X坐标
this.x = randomAtRange(xRange);
//水流粒子初始Y坐标
this.y = -this.height;
//水流粒子垂直方向上的初始速度
this.velocity = 0;
//水流半径等于水流粒子宽度的一半
this.waterRadius = this.width / 2;
//水花半径
this.waterBubbleRadius = randomAtRange(waterBubbleRadiusRange);
//水花溅起的高度
this.waterBubbleSpring = randomAtRange(waterBubbleSpringRange);
//水流颜色
this.hue = randomIntAtRange(hueRange);
this.saturation = randomIntAtRange(saturationRange);
this.lightness = randomIntAtRange(lightnessRange);
//地板高度
this.floorHeight = canvas.height - waterBubbleSpringRange.min - this.height;
//水流粒子是否已经落地变成水花
this.isDead = false;
}
this.update = function() {
this.velocity += gravity;
this.y += this.velocity;
if(this.y > this.floorHeight) {
this.isDead = true;
}
}
this.render = function() {
if(this.isDead) {
//绘制水花
ctx.fillStyle = "hsla(" + this.hue + ", 40%, 40%, 1)";
ctx.fillStyle = this.joinHSLA(.3);
ctx.beginPath();
ctx.arc(this.x, canvas.height - this.waterBubbleSpring, this.waterBubbleRadius, 0, doublePI);
ctx.fill();
} else {
//绘制水流
ctx.strokeStyle = this.joinHSLA(.05);
ctx.lineCap = "round";
ctx.lineWidth = this.waterRadius;
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(this.x, this.y + this.height);
ctx.stroke();
}
}
this.init();
}
this.init = function() {
canvas = document.createElement("canvas");
//如果html不支持canvas的话会显示该文本，否则不显示
var textNode = document.createTextNode("Your browser can not support canvas");
canvas.appendChild(textNode);
document.body.appendChild(canvas);
canvas.width = width;
canvas.height = height;
//如果不支持canvas就没必要继续下去了
if(!isSupportCanvas()) {
return;
}
ctx = canvas.getContext("2d");
setupRAF();
loop();
}
function loop() {
/*
先绘制一层朦胧的白非常重要，这样可以省去很多用来填充颜色的粒子
将下面3句换成clearRect就能发现其实绘制的粒子颜色本身是很淡的，如果直接换成深的颜色就会发现空隙衔接处很不均匀
增大粒子数目可以发现颜色会变深，但是粒子数越多画面越卡，所以先绘制上一层白色的蒙版是一种非常取巧的做法
*/
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(255,255,255,.06)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
//ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "lighter";
//添加新粒子
for(var i=0; i<particleChangeRate; i++) {
particles.push(new WaterParticle());
}
//更新渲染粒子
for(var i=0; i<particles.length; i++) {
particles[i].update();
particles[i].render();
}
//绘制水花，并删除消亡的粒子
for(var i=particles.length-1; i>=0; i--) {
if(particles[i].isDead) {
particles.splice(i, 1);
}
}
requestAnimationFrame(loop);
}
}
function init() {
var waterful = new Waterful(300, 300);
waterful.init();
}
init();
</script>
</body>
</html>
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生JS实现响应式瀑布流布局
原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http://leozdgao.github.io/demo/responsive_waterfall/ 演示图: 核心代码: responsive_waterfall.js (function() { var Waterfall = function(opts) { var minBoxWidth; Object.defineProper
-
纯js实现瀑布流展现照片(自动适应窗口大小)
用瀑布流来展现照片再好不过了,下面是瀑布流(每一行的长度等于浏览器窗口的长度)的一种实现方式,也可以用css3实现,很简单,谷歌一下你就知道. 我的思路大概是一张一张的图片插入,当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环,即这一行插入进去了. 然后进入下一个循环插入下一行.公式很简单,假设这一行当前的高度为h,则插入一张高和宽为(x,y)的图片时,满足下列关系: h' * (w / h + y / x) = w w是浏览器窗口的宽度, 则 h' = w / (w / h
-
纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax模拟数据图片后,是将整个页面的所有图片都重新定位一次. 3. 程序是等所有图片加载完成后再读取图片的尺寸,实际中肯定不能这样做. 4. 实际项目中,应该由后台程序给出图片尺寸值,在js代码中直接使用图片的width属性. 本程序思路: html结构: <body> <div id="
-
解析瀑布流布局:JS+绝对定位的实现
绝对定位方式的瀑布流布局: 一.布局 1.包围块框的容器: 复制代码 代码如下: <div id="main"> ... ...<div> 2.一个块框: 复制代码 代码如下: <div class="pin"> <div class="box"> <img src="./images/g (1).jpg"/> </div>
-
js实现瀑布流的三种方式比较
瀑布流是一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格. 瀑布流特点: 1.琳琅满目:整版以图片为主,大小不一的图片按照一定的规律排列. 2.唯美:图片的风格以唯美的图片为主. 3.操作简单:在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前. 瀑布流布局实现方式: 1.传统多列浮动 · 各列固定宽度,并且
-
vue.js组件vue-waterfall-easy实现瀑布流效果
想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上已经有一定的基础了,咱们废话不多说,直接进入主题. vue-waterfall-easy easy! easy! easy! 重要的事情说三遍!!! 所以说,咱们今天用到的不是大家熟知的vue-waterfall,而是vue-waterfall-easy: 一.获取vue-waterfall-eas
-
js实现的美女瀑布流效果代码
瀑布流以及回顶部的效果 *{ margin:0; padding:0; } h1{ text-align:center; height:100px; } body{ background-color:RGB(232,231,226); } .all{ margin:0 auto; width:1000px; } .number{ float:left; width:225px; } .content { margin:5px; background-color:white; } img{ mar
-
javascript自适应宽度的瀑布流实现思路
这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网.美丽说等等.而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄袭,呵呵!!)向来都是一个不错的idea. OK,现在进入正题.这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和
-
js实现瀑布流的一种简单方法实例分享
下面奉上一则用JS实现瀑布流的方法,望批评. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><
-
微信小程序通过js实现瀑布流布局详解
前言 瀑布流 - 小程序中数据列表或者图片展示难免高度不一,而我们一般固定宽度,让其高度自适应,并无缝对接.如下图: 瀑布流的两种做法: css: 在父元素上使用column-count: 2也可以做到两列排版.但column-count: 2是左右两列排版,如果碰巧出现左边累计高度过多大于右边累计高度的话,右边会出现大片空白区域.点击前往 js(推荐): 判断左右两边的累计高度,那边的高度小,便往那边添加(需要动态获取节点元素的高度进行计算).下面用的就是此种方法: 准备工作 我们需要用到 a