<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas 很棒的弹簧圈文本动画</title>
<style>
* {
margin: 0;
}
canvas {
display: block;
background-color: #F1EDE3;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
var Scene = {
alpha: 1,
elements: [],
init: function() {
this.canvas = document.querySelector('canvas');
this.context = this.canvas.getContext('2d');
this.width = window.innerWidth;
this.height = window.innerHeight;
this.canvas.setAttribute('width', this.width + 'px');
this.canvas.setAttribute('height', this.height + 'px');
this.lastTime = Date.now();
this.main();
this.initHandler();
},
initHandler: function() {
var that = this;
var wasDown = false;
var wasClick = false;
this.canvas.addEventListener('mousedown', function(e) {
wasDown = true;
wasClick = true;
that.dragHandler('startDrag', e);
});
window.addEventListener('mouseup', function(e) {
wasDown = false;
that.dragHandler('stopDrag', e);
});
window.addEventListener('mousemove', function(e) {
if (!wasDown) {
return;
}
that.dragHandler('drag', e);
});
setTimeout(function() {
if (!wasClick) {
//that.unpin();
}
}, 4000);
},
unpin: function() {
for (var i = 0, len = this.elements.length; i < len; ++i) {
var element = this.elements[i];
element.unpin();
}
},
dragHandler: function(callbackName, e) {
for (var i = 0, len = this.elements.length; i < len; ++i) {
var element = this.elements[i];
if (element.isDraggable && element.isDraggable()) {
this.elements[i][callbackName](e.clientX, e.clientY);
}
}
},
main: function() {
var now = Date.now();
var dt = (now - this.lastTime) / 1e4;
var that = this;
this.update(dt);
this.render();
this.lastTime = now;
requestAnimationFrame(function() {
that.main();
});
},
getActiveBall: function() {
},
addElement: function(element) {
this.elements.push(element);
},
getElements: function() {
return this.elements;
},
addElements: function(elements) {
Array.prototype.push.apply(this.elements, elements);
},
getBall: function() {
return this.ball;
},
addBall: function(ball) {
this.ball = ball;
this.elements.push(ball);
},
removeElement: function(element) {
for (var i = 0, len = this.elements.length; i < len; ++i) {
if (this.elements[i] == element) {
this.elements.splice(i, 1);
--len;
}
}
},
removeElements: function() {
this.elements = [];
},
update: function(dt) {
for (var i = 0, len = this.elements.length; i < len; ++i) {
this.elements[i].update(dt);
}
},
render: function() {
this.context.clearRect(0, 0, this.width, this.height);
for (var i = 0, len = this.elements.length; i < len; ++i) {
this.elements[i].draw(this.context);
}
}
};
var utils = {
distance: function(p0, p1) {
return Math.sqrt((p0.x - p1.x) * (p0.x - p1.x) + (p0.y - p1.y) * (p0.y - p1.y));
}
};
var yGravity = 0.3;
var xGravity = 0;
var SoftObject = {
friction: 1,
updatePoints: function(stopUpdate, getGravityCoef) {
var stopUpdate = stopUpdate || function() {};
var getGravityCoef = getGravityCoef || function() {
return 1;
};
for (var i = 0, len = this.points.length; i < len; ++i) {
var point = this.points[i];
if (point.pinned || stopUpdate(i, len)) {
continue;
}
var vx = (point.x - point.oldX) * this.friction;
var vy = (point.y - point.oldY) * this.friction;
point.oldX = point.x;
point.oldY = point.y;
point.x += vx;
point.y += vy;
point.y += yGravity * getGravityCoef();
point.x += xGravity * getGravityCoef();
}
},
updateSticks: function(stopP1Update) {
var stopP1Update = stopP1Update || function() {};
for (var i = 0, len = this.sticks.length; i < len; ++i) {
var stick = this.sticks[i];
if (stick.hidden) {
if (!stick.p0.adjacent) {
stick.p0.radius = 0;
}
if (!stick.p1.adjacent) {
stick.p1.radius = 0;
}
}
var dx = stick.p1.x - stick.p0.x;
var dy = stick.p1.y - stick.p0.y;
var distance = Math.sqrt(dx * dx + dy * dy);
var diff = distance - stick.length;
var percent = diff / 2 / distance;
var offsetX = dx * percent;
var offsetY = dy * percent;
if (!stick.p0.pinned) {
stick.p0.x += offsetX;
stick.p0.y += offsetY;
}
if (!stopP1Update(i, len) && !stick.p1.pinned) {
stick.p1.x -= offsetX;
stick.p1.y -= offsetY;
}
}
},
drawPoints: function() {
for (var i = 0, len = this.points.length; i < len; ++i) {
var point = this.points[i];
if (!point.radius) {
continue;
}
this.context.beginPath();
this.context.arc(point.x, point.y, point.radius, 0, 2 * Math.PI);
this.context.fill();
}
},
drawSticks: function() {
this.context.beginPath();
for (var i = 0, len = this.sticks.length; i < len; ++i) {
var stick = this.sticks[i];
if (stick.hidden) {
continue;
}
this.context.moveTo(stick.p0.x, stick.p0.y);
this.context.lineTo(stick.p1.x, stick.p1.y);
}
this.context.stroke();
}
};
'use strict';
var Rope = {
create: function(x, y, color) {
var rope = Object.create(this);
rope.color = color;
rope.points = [];
rope.sticks = [];
rope.x = x;
rope.y = y;
for (var p in SoftObject) {
rope[p] = SoftObject[p];
}
rope.build();
return rope;
},
isDraggable: function() {
return true;
},
getMaxLength: function() {
return 10 * init.letterHeight;
},
getRopeLength: function() {
return 1.2 * init.letterHeight;
},
getActualLength: function() {
var endLine = {
x: this.x,
y: this.y
};
var dx = endLine.x - this.draggablePoint.x;
var dy = endLine.y - this.draggablePoint.y;
return Math.sqrt(dx * dx + dy * dy);
},
build: function() {
var pointCount = 11;
var step = this.getRopeLength() / pointCount;
for (var i = 0; i < pointCount; ++i) {
var currentStep = -i * step;
this.points.push({
x: this.x,
y: this.y + currentStep,
oldX: this.x,
oldY: this.y + currentStep,
radius
HTML5 Canvas实现逼真的弹簧圈文本动画特效源码.zip
版权申诉
176 浏览量
2022-11-03
23:32:39
上传
评论
收藏 3KB ZIP 举报
HTML5 Canvas实现逼真的弹簧圈文本动画特效源码.zip （1个子文件） 
132687014954502313 
index.html 15KB资源评论
毕业_设计
- 粉丝: 1935
- 资源: 1万+
最新资源
- 基于matlab实现训练RBF网络的，但用的算法是梯度下降法，算法仍然是自己写的.rar
- 基于matlab实现小波分析改造后，可以分析脑电数据的程序,出现32个导联每个通道的功率谱.rar
- 基于matlab实现物体的应力和应变DIC-通过识别一系列图像的变形得到物体的应力和应变
- 基于matlab实现文档+程序NSGA-II多目标优化的matlab代码.rar
- 基于matlab实现文档+程序 多目标优化，NSGA2算法实现.rar
- 4_4、异步操作.vep
- matlab经典算法示例.zip
- 欧美风高端 PPT 推荐模板
- 卖景点卖门票的系统功能
- 基于matlab实现温度数据的小波功率谱分析.rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
