1.   阿里云服务器1888元代金券领取
  2.   本网站所有源码包解压密码:www.youhutong.com
登录  帮助问答

基于Canvas酷炫3D动态蜘蛛爬行蜘蛛网动画特效

小川 特效组件
郑重声明:
  本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,否则后果请用户自负,下载后请24小时内删除。 本站所有内容均不能保证其完整性,不提供任何技术支持,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用。
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

效果图:

000.gif

描述说明:

基于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();


 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/272.html


  1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,下载后请24小时内删除。
  2、本站所有内容均不能保证其完整性,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用
  3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。
  4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意
( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情