html5同心圆代码,HTML5/Canvas 鼠标跟随的同心圆
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
(function() {
this.Easing = (function() {
function Easing() {}
Easing.easeOutCubic = function(t) {
return 4 * t * t * t;
};
Easing.easeInOutCubic = function(t) {
if (t < .5) {
return 4 * t * t * t;
} else {
return (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
}
};
return Easing;
})();
this.Point = (function() {
function Point(x1, y1) {
this.x = x1;
this.y = y1;
}
return Point;
})();
this.Circle = (function() {
function Circle(c1, r, color1, duration) {
this.c = c1;
this.r = r;
this.color = color1;
this.duration = duration;
this.offset = new Point(3, 3);
}
Circle.prototype.updateShadowOffset = function(lightPoint, maxD) {
return this.offset = new Point((this.c.x - lightPoint.x) / maxD * 200 + 3, (this.c.y - lightPoint.y) / maxD * 200 + 3);
};
Circle.prototype.movecenter = function(p1, p2, startTime, maxD) {
var t;
t = new Date().getTime() - startTime;
if (t >= this.duration) {
return;
}
t /= this.duration;
t = Easing.easeInOutCubic(t);
this.c.x = p1.x + t * (p2.x - p1.x);
this.c.y = p1.y + t * (p2.y - p1.y);
this.updateShadowOffset(p2, maxD);
return requestAnimationFrame((function(_this) {
return function() {
return _this.movecenter(p1, p2, startTime, maxD);
};
})(this));
};
return Circle;
})();
this.Hypnotic = (function() {
function Hypnotic(id, numCircles) {
var color, diagonal, i, j, ref, self, step, timeStep;
this.numCircles = numCircles;
this.canvas = document.getElementById(id);
this.canvas.width = this.canvas.clientWidth;
this.canvas.height = this.canvas.clientHeight;
this.ctx = this.canvas.getContext('2d');
diagonal = Math.sqrt(this.canvas.width * this.canvas.width + this.canvas.height * this.canvas.height);
step = diagonal / this.numCircles;
timeStep = 5000 / this.numCircles;
this.circles = [];
for (i = j = 1, ref = this.numCircles; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
color = i % 2 === 0 ? '#FFFFFF' : '#4BB5C1';
this.circles.push(new Circle(new Point(0, this.canvas.height / 2), step * i, color, timeStep * i));
}
this.circles.reverse();
self = this;
$('#' + id).mousemove(function(e) {
var c, k, len, now, offset, ref1, results, x, y;
offset = $(this).offset();
x = e.pageX - offset.left;
y = e.pageY - offset.top;
now = new Date().getTime();
ref1 = self.circles;
results = [];
for (k = 0, len = ref1.length; k < len; k++) {
c = ref1[k];
results.push(c.movecenter(c.c, new Point(x, y), new Date().getTime(), Math.max(self.canvas.width, self.canvas.height)));
}
return results;
});
$('#' + id).on('touchmove', function(e) {
var c, k, len, ref1, results, touch;
touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
ref1 = self.circles;
results = [];
for (k = 0, len = ref1.length; k < len; k++) {
c = ref1[k];
results.push(c.movecenter(c.c, new Point(touch.pageX, touch.pageY), new Date().getTime(), Math.max(self.canvas.width, self.canvas.height)));
}
return results;
});
$('#' + id).mouseleave(function(e) {
return self.recenter();
});
}
Hypnotic.prototype.recenter = function() {
var c, j, len, ref, results;
ref = this.circles;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
c = ref[j];
results.push(c.movecenter(c.c, new Point(this.canvas.width / 2, this.canvas.height / 2), new Date().getTime(), Math.max(this.canvas.width, this.canvas.height)));
}
return results;
};
Hypnotic.prototype.run = function() {
this.draw();
return this.recenter();
};
Hypnotic.prototype.draw = function() {
var c, j, len, ref;
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
ref = this.circles;
for (j = 0, len = ref.length; j < len; j++) {
c = ref[j];
this.ctx.moveTo(c.c.x, c.c.y);
this.ctx.fillStyle = c.color;
this.ctx.shadowColor = 'rgba(0,0,0,0.2)';
this.ctx.shadowOffsetX = c.offset.x;
this.ctx.shadowOffsetY = c.offset.y;
this.ctx.beginPath();
this.ctx.arc(c.c.x, c.c.y, c.r, 0, Math.PI * 2);
this.ctx.fill();
}
return requestAnimationFrame(((function(_this) {
return function() {
return _this.draw();
};
})(this)));
};
return Hypnotic;
})();
$(function() {
var anim;
anim = new Hypnotic('fg', 20);
return anim.run();
});
}).call(this);
html5同心圆代码,HTML5/Canvas 鼠标跟随的同心圆相关推荐
- html++鼠标跟随动画,5分钟实现Canvas鼠标跟随动画背景
关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧 前言 相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到 ...
- html5缓动下拉菜单,HTML5 Canvas鼠标跟随的缓动效果
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas = document.getElementById('canvas'); var ct ...
- html5全景代码,HTML5 Canvas实现360度全景图的示例代码
很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样对购买者来说是一个很好的消费体验,网上有很多这样的插件都是基于jQuery实现的有收费的也有免费的,其实很好用的一个叫3de ...
- HTML5系列代码:canvas动画--碰碰球
animation 属性是一个简写属性,用于设置六个动画属性: animation-name animation-duration animation-timing-function animatio ...
- 跨平台html5页面代码,HTML5+CSS3跨平台网页设计实例教程
HTML5+CSS3跨平台网页设计实例教程 编辑 锁定 讨论 上传视频 <HTML5+CSS3跨平台网页设计实例教程>是2018年8月清华大学出版社出版的图书,作者是陈承欢.韩耀坤.颜珍平 ...
- html5购票代码,HTML5代码大全
<HTML5代码大全>由会员分享,可在线阅读,更多相关<HTML5代码大全(11页珍藏版)>请在人人文库网上搜索. 1.一.HTML各种命令的代码:1.文本标签(命令)创建预格 ...
- html5 基础代码,{HTML5}基础核心-第一节-上
一.代码风格 jQuery语法: 基础语法: $(selector ).action(); //$:美元符号用来定义jQuery //选择符(selector) "查询"和&qu ...
- python绘制同心圆代码_使用Python+turtle绘制同心圆
问题描述:数学定义上是指:同一平面上同一圆心而半径不同的圆.简单来说就是:圆心相同半径不同的圆,如果几个圆的圆心是同一点,那么这几个圆就叫做同心圆. 本文使用turtle绘制一个类似"箭靶& ...
- html飞机动画,html5 canvas纸飞机跟随鼠标飞行动画
这是一款效果很酷的html5 canvas纸飞机跟随鼠标飞行动画.插件中使用了paper.js来构建场景中的各种元素. HTML html结构只需要一个canvas,并给它一个id triangle- ...
最新文章
- JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset
- ioS html的转义
- 使用HttpWebRequest提交ASP.NET表单并保持Session和Cookie
- webcomponents安装了没有用_Web Components 入门实例教程
- eclipse调试java web_eclipse调试web项目
- JS ||(或运算)详解
- java的cxf的maven_Maven+Spirng+Mybatis+CXF搭建WebService服务
- java redirect 超时_java – Spring Security 3.0重定向到超时的页面
- 【转载】"library not found for - "解决办法
- 如何在win10 64位下搭载汇编环境(包含汇编dosbox和masm文件)
- 线上服务器出现CPU飙升问题该怎么办?
- Android studio实现财务记账系统软件android studio开发课程设计
- inurl faq.php,seo新手工作就是做外链
- Axure_RP8.0软件+汉化包
- Java新闻发布系统源码
- ubuntu java 7_在Ubuntu上安装Java 7
- 传奇添加地图与配置参数详解
- 破立之间:金融科技时代的普惠新机会、新挑战
- 清华AMiner团队推出AI订阅:实时追踪科研动态,定制个人科研信息流 | 专访唐杰教授团队
- 针对部分16系显卡通过VS2017编译的YOLOV3测试成功但图像无检测框的问题:
热门文章
- java 线程不足_Java 线程基础知识
- 计算机的双一流学校,分数不够上双一流大学计算机专业,上这些大学也不错,实力非常强...
- 单片机c语言应用100例第3版课后答案,单片机C语言应用100例(第3版)(含光盘1张)...
- Android中WebService的应用
- 小程序 mpvue 使用canvas绘制环形图表
- ARCSDE的直接连接(SQLSERVER)
- JacksonUtils Jackson的JSON序列化反序列化
- benchmark问题_使用U盘来掩盖CEPH IO性能低下的问题
- 抽象类和接口的共同点和区别
- 网易邮箱写邮件HTML转换按钮,网易邮箱推出虚拟场景写信功能 身临其境写邮件...