效果图：
描述说明：
基于Canvas酷炫3D动态蜘蛛爬行蜘蛛网动画特效，使用verlet.js 运动算法实现。
verlet.js 运动算法详解
本系列文章可以在这里查看：verletjs动画框架
你可以从这里查看该项目的所有源文件:
涉及文件：lib/vec2.js
构造函数
function Vec2(x, y) {
this.x = x || 0;
this.y = y || 0;
｝该函数定义了空间中（二维）的一点，对应canvas的坐标性质（左上角为坐标原点）
向量
正如高中数学所学，verletjs的动画都是基于向量实现的，向量顾名思义：有大小，有方向，这里的方向就是x，y两个方向。动画中涉及的任何一个“量”都可以看成一个向量。如：速度、重力、摩擦力等等。
向量加法
Vec2.prototype.add = function(v) {
return new Vec2(this.x + v.x, this.y + v.y);
}如果一个向量A[1,2]，另一个向量B[3,4]；那么向量A+B=[1+3,2+4]=[4,6]
注意：以下的几个方法都是返回一个新对象。
向量减法
Vec2.prototype.sub = function(v) {
return new Vec2(this.x - v.x, this.y - v.y);
}向量乘法
Vec2.prototype.mul = function(v) {
return new Vec2(this.x * v.x, this.y * v.y);
}向量除法
Vec2.prototype.div = function(v) {
return new Vec2(this.x / v.x, this.y / v.y);
}缩放
Vec2.prototype.scale = function(coef) {
return new Vec2(this.x*coef, this.y*coef);
}其实缩放可以看成乘法，也可以看成除法；因为都能通过以上两种方法来实现。
位置重置
Vec2.prototype.mutableSet = function(v) {
this.x = v.x;
this.y = v.y;
return this;
}向量是否相等
Vec2.prototype.equals = function(v) {
return this.x == v.x && this.y == v.y;
}向量的长度（模）
Vec2.prototype.length = function(v) {
return Math.sqrt(this.x*this.x + this.y*this.y);
}可以这么理解，速度是有大小，有方向的。但是当我们需要用速度大小进行计算的时候就需要用到速度的模了。
两点间的距离（标量）
Vec2.prototype.dist2 = function(v) {
var x = v.x - this.x;
var y = v.y - this.y;
return x*x + y*y;
}
Vec2.prototype.dist = function(v) {
return Math.sqrt(this.dist2(v));
}法向量
Vec2.prototype.normal = function() {
var m = Math.sqrt(this.x*this.x + this.y*this.y);
return new Vec2(this.x/m, this.y/m);
}所谓法向量就是和当前向量夹角为90度的向量；可以理解为：物体的重力和受到地面的反作用力。
向量点积
Vec2.prototype.dot = function(v) {
return this.x*v.x + this.y*v.y;
}向量的点积得到的结果是一个数字，并非是一个向量
两个向量之间的夹角
Vec2.prototype.angle = function(v) {
return Math.atan2(this.x*v.y-this.y*v.x,this.x*v.x+this.y*v.y);
}
Vec2.prototype.angle2 = function(vLeft, vRight) {
return vLeft.sub(this).angle(vRight.sub(this));
}向量旋转
Vec2.prototype.rotate = function(origin, theta) {
var x = this.x - origin.x;
var y = this.y - origin.y;
return new Vec2(x*Math.cos(theta) - y*Math.sin(theta) + origin.x,
x*Math.sin(theta) + y*Math.cos(theta) + origin.y);
}这个旋转是基于某个位置，某个角度进行的旋转。旋转后得到一个新的向量；旋转的用处很大，比如有些时候根据鼠标的移动展现不同角度的动画。旋转在3D动画开发中尤其重要，接下来补充几个3D旋转算法：
/*
* 绕X轴旋转
* @param {Number} angle 旋转的角度（弧度）
*/
Vector3D.prototype.rotateX: function(angle) {
var ca = Math.cos(angle);
var sa = Math.sin(angle);
var tmpY = this.y * ca - this.z * sa;
var tmpZ = this.y * sa + this.z * ca;
this.y = tmpY;
this.z = tmpZ;
}
/*
* 绕Y轴旋转
* @param {Number} angle 旋转的角度（弧度）
*/
Vector3D.prototype.rotateY: function(angle) {
var ca = Math.cos(angle);
var sa = Math.sin(angle);
with(this) {
var tmpX = x * ca + z * sa;
var tmpZ = x * -sa + z * ca;
x = tmpX;
z = tmpZ;
}
}实际应用中并不推荐使用with语句，其实with语句的目的就是改变当前语句块的执行环境；即把this注入到语句块中，省去每次都要写this的麻烦。
/*
* 绕Z轴旋转
* @param {Number} angle 旋转的角度（弧度）
*/
Vector3D.prototype.rotateZ: function(angle) {
var ca = Math.cos(angle);
var sa = Math.sin(angle);
var tmpX = this.x * ca - this.y * sa;
var tmpY = this.x * sa + this.y * ca;
this.x = tmpX;
this.y = tmpY;
}
/*
* 绕XY轴旋转
* @param {Number} a 旋转的角度（弧度）
* @param {Number} b 旋转的角度（弧度）
*/
Vector3D.prototype.rotateXY: function(a, b) {
var ca = Math.cos(a);
var sa = Math.sin(a);
var cb = Math.cos(b);
var sb = Math.sin(b);
with(this) {
// 绕x轴旋转
var rz = y * sa + z * ca;
y = y * ca - z * sa;
// 绕y轴旋转
z = x * -sb + rz * cb;
x = x * cb + rz * sb;
}
}
/*
* 绕XYZ轴旋转
* @param {Number} a 旋转的角度（弧度）
* @param {Number} b 旋转的角度（弧度）
* @param {Number} c 旋转的角度（弧度）
*/
Vector3D.prototype.rotateXYZ: function(a, b, c) {
var ca = Math.cos(a);
var sa = Math.sin(a);
var cb = Math.cos(b);
var sb = Math.sin(b);
var cc = Math.cos(c);
var sc = Math.sin(c);
with(this) {
// x
var ry = y * ca - z * sa;
var rz = y * sa + z * ca;
// y
var rx = x * cb + rz * sb;
z = x * -sb + rz * cb;
// z
x = rx * cc - ry * sc;
y = rx * sc + ry * cc;
}
}如何使用
动画中的一切和位置相关的计算都可以用向量来表示，这里以自由落体为例。
1、物体下落，有自身的重力、空气的阻力作用
2、假设物体从初速度为0开始下落
3、可以计算该物体下落的加速度
具体实现：
// 初速度
var vel = new Vec2(0, 0);
// 重力为10，方向垂直向下
var gravity = new Vec2(0, 10);
// 空气的阻力，大小为8，方向和重力相反
var f = new Vec2(0, 8);
// 计算物体所受合力
var all = gravity.sub(f); // (0, 2)
// 循环调用loop函数（可以理解为动画的一帧，循环播放。为一个时间单位）
var loop = function() {
// 下一时刻的速度
// 由于每帧为一个时间单位，也可以直接理解为下一时刻的位移
// 然后在canvas中按照vel的位置重绘就得到了自由落体的效果
vel.add(all);
console.log(vel);
window.requestAnimationFrame(loop);
}
loop();转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/272.html
1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意
