`
flyfox1982
  • 浏览: 80874 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

绕圆弧动画的向量解决方式

 
阅读更多

记得几年前,我的一个同事J需要做一个动画功能,大概的需求是
实现球面上一个点到另外一个点的动画。当时他遇到了难度,在研究了一个上午无果的情况下,咨询了我。我就告诉他说,你先尝试一个简化的版本,就是实现圆环上一个点到另外一个点的动画。如下图所示,要实现点A插值渐变到B的动画过程。

 

 
image.png

同事J的解决方案是,先计算出来A点和圆心O的连线和水平方向(与X轴平行)的夹角1,再计算出B点和圆心O的连线和水平水平方向的夹角2。 计算出夹角以后,开始实现动画效果,由于已经有了两个角度,所以只需要实现一个角度不断插值变化的效果即可,如下图所示:

 

 
计算夹角

但是这儿存在一个问题,比如下图中。

 

 
计算夹角

 

从A点和B点的位置变化从图中可以看出,A点在第二象限,角度范围是π/2~π,而A点在第三象限,角度范围在 -π~-π/2(Math.atan2的计算结果)。此时从A点的角度动画到B点的角度,动画效果是从A点沿着顺时针方向绕一大圈动画到B,而不是直接从A点逆时针动画到B点。
而实际上我们想要的结果是从A点逆时针到B点(运动的角度最小)。如果此时需要获得正确的结果,就需要做各种角度的转换适配。

角度的难点在哪儿

首先假设OA的坐标点为(x1,y1),注意此处是A点相对于与圆心O点的坐标,这样方便计算。然后计算出角度,我们知道可以通过Math.atan2(y,x)来计算角度。 那么计算出来的角度的范围如下,以坐标系4个象限为分类标准:

  • 第一象限的角度范围是:0 ~ PI/2
  • 第二象限的角度范围是:PI/2 ~ PI
  • 第三象限的角度范围是:-PI ~-PI/2
  • 第四象限的角度范围是: -PI/2 ~-PI
    如下图所示:


     
    角度范围

从上面图中可以看出,象限之间的角度变换不是线性的,比如从第二象限到第三象限,角度出现了跳跃式的变换。假设A点在第二象限,B点在第三象限,如下图所示:

 

 
角度旋转

现在假设A点的角度为 3/4 * PI, B点的角度为 - 3/4*PI,如果按照角度插值的方式进行运动。示例代码片段入下:

      var i = 0,count = 200;
      var PI = Math.PI;
      function animateAngle() {   
        var angle = (angle1 * (count-i) + angle2 * (i)) / count;
        var x = cx + Math.cos(angle) * r,
            y = cy + Math.sin(angle) * r;
        ctx.beginPath();
        ctx.moveTo(cx,cy);
        ctx.lineTo(x,y);
        ctx.strokeStyle = 'red';
        ctx.stroke();
        i ++;
        if(i > count){
            i = 0;
        }
      }

运动的轨迹如下图红色弧线所示,

 

 
错误

而实际,我们希望的效果是按照最短的路径进行运动,如下图蓝色弧线:

 

 
正确

为什么运动轨迹是红色的弧线呢。 因为使用了角度的插值,A点角度是PI3/4,B点角度为-PI3/4,因此插值是从一个正的角度减少到一个负的角度,这正好是红色路径。下图标记了主要节点的角度:

 
主要节点的角度


同样的道理,从B点动画到A点,也同样会走红色路径。

 

要实现A点和B点之间沿着蓝色弧线动画,需要把B点的角度加上2 * PI,此时B点的角度为PI5/4。看来把小于0的角度加上2PI,可以解决上面的问题。
但是这种方式不能解决所有的情况,比如把A点移到第一象限,有下面两种情况:

 
两种情况
  • 情况1: 红色弧线的角度小于PI,此时应该沿着红色弧线动画,此时
    B点的角度不应该加上PI*2
  • 情况2: 红色弧线的角度大于PI,此时应该沿着蓝色弧线动画,此时
    B点的角度应该加上PI*2
    可以看出情况比较复杂,需要考虑角度的各种情况进行转换,才能得到正确的结果,所以很多人程序员会陷入其中热找不到正解。

向量解决

正是由于有了这个角度的问题,导致这个动画实现的难度变大。同事J在经过各种实验后未能找到好的解决方案,问我如何解决。我看了之后,给出的解决方案是,可以考虑直接用向量的插值,而不是用角度的插值。向量的基本概念,我们在高中就学习过,此处不做详细说明。

向量解决方案一

比如上面的问题,无论是A点到B点,还是A点到C点,都可以用统一的模式解决。首先,我们可以把问题简化成一个线性运动的问题,比如从A点运动C点,由于是线性问题,这通过向量的插值(0~1)很容易计算出来,首先计算出向量OA,然后计算出向量OC,通过之后可以通过插值运算,计算出中间向量
OX = OA * (1-x) + OC * (x)
上面的公式计算出来的OX,其长度和OA和OC并不相等,所以点X并不是在圆环上运动。此时只需要通过向量的缩放操作,把OX的长度延长为OA的长度即可。

以下是代码片段:

 var v1 = new Vec3(x1-cx,y1-cy,0),
         v2 = new Vec3(x2-cx,y2-cy,0);
var i = 0,count = 200;
function animateVector(){
          var a = i / count;
          var v = new Vec2().lerpVectors(v1,v2,a);
          v.setLength(r);
          i ++;
          if(i > count){
            i = 0;
          }
          
        ctx.beginPath();
        ctx.moveTo(cx,cy);
        ctx.lineTo(v.x + cx,v.y + cy);
        ctx.strokeStyle = 'orange';
        ctx.stroke();
      }

其中Vec2是二维向量类。
当然上面的解决方案有个问题:上面的运动是基于直线均匀运动的,应此并不能保证动画的角度均匀性。当角度小的时候,这种差异并不大,所以在不严格要求角度均匀的情况下,可以不用处理。 而如果角度大的时候,速度差异就会比较大。

向量解决方案二

如果一定要角度均匀,也是可以做的,可以用到向量的点乘、叉乘知识。首先我们需要学习两个知识点

向量的点乘简介

向量A( x1,y1)和向量B(x2,y2)的点乘结果如下:

A*B = x1*x2 + y1*y2

向量A点乘向量B的点乘结果的另外一个公式如下:

a * b = |a| * |b| * cosθ 

通过该公式可以推导出,两个向量之间的夹角的计算公式:

cosθ  = a * b /( |a| * |b| )
θ = Math.acos(a * b /( |a| * |b| ));

点乘计算出来的夹角的的范围是在0~PI之间。

向量的叉乘

二维向量没有叉乘,叉乘是针对三维向量的。本文所述的问题,是一个二维的问题 ,但是为了方便使用叉乘来解决问题,把二维问题升级到三维问题,也就是,增加一个z坐标。
向量叉乘的结果叫做向量积,其本身也是一个向量,向量积的定义如下:
模长:(在这里θ表示两向量之间的夹角(共起点的前提下)(0° ≤ θ ≤ 180°),它位于这两个矢量所定义的平面上。)
方向:向量A与向量B的向量积的方向与这两个向量所在平面垂直,且遵守右手定则。(一个简单的确定满足“右手定则”的结果向量的方向的方法是这样的:若坐标系是满足右手定则的,当右手的四指从A以不超过180度的转角转向B时,竖起的大拇指指向是向量C的方向。C = A ∧ B)

 

 
向量叉乘

本文中,向量A和向量B都在xy平面,所以他们的叉乘结果C(向量积)和xy平面垂直,和z坐标平行。其方向和A到B的顺序有关:

  • 当A到B是顺时针的时候,C指向z轴的负方向。
  • 当A到B是逆时针的时候,C指向z轴的正方向。

有了相关的向量知识,现在给出问题的解决方案,代码如下:

 var v1 = new Vec3(x1-cx,y1-cy,0),
           v2 = new Vec3(x2-cx,y2-cy,0);
        var crossVector = new Vec3().crossVectors(v1,v2);
var i = 0,count = 100;
function animateVector2(){
        var a = i / count;
        var vAngle = v1.angleTo(v2); 
        if(crossVector.z > 0){//通过向量叉乘判断是逆时针还是顺时针,crossVector.z > 0是逆时针
            angleEnd = angle1 + vAngle;
        }else{
            angleEnd = angle1 - vAngle;
        }
        var angle = (angle1 * (count-i) + angleEnd * (i)) / count;
        var x = cx + Math.cos(angle) * r,
            y = cy + Math.sin(angle) * r;
        ctx.beginPath();
        ctx.moveTo(cx,cy);
        ctx.lineTo(x,y);
        ctx.strokeStyle = 'orange';
        ctx.stroke();
        i ++;
        if(i > count){
            i = 0;
        }
      }

大致步骤如下:

  1. 通过三角函数知识,计算出A点的夹角angle1。
  2. 通过向量的点乘知识,可以计算出两个向量之间的夹角vAngle。
  3. 通过向量叉乘计算出向量A和向量B的向量积crossVector。
  4. 通过crossVector的方向,来判断向量A到向量B的运动方向是顺时针还是逆时针。如果crossVector.z > 0说明是逆时针,反之是顺时针。
  5. 如果是顺时针,通过 angle1 - vAngle计算出角度angleEnd,如果是逆时针,通过 angle1 + vAngle计算出角度angleEnd。
  6. 通过在angle1和angleEnd之间进行角度插值来实现动画效果。

总结: 上面的方法其实还是使用角度的插值来实现动画效果,所以是角度均匀的动画。 但是借助了向量工具,让起始和结束角度的计算变得容易。

向量解决方案三

方案一的问题在于,向量A到向量B之间的线性插值是直线均匀的,但是不是角度均匀的。如果我们把线性插值的插值因子改成角度均匀,而仍然使用线性插值的计算方式,就可以解决方案一的问题。这要借助三角函数的知识,先看下图:

 

 
三角函数

 

首先通过向量点乘,可以计算出角AOB的夹角vAngle,假定运动的角度为θ,此时运动点在X处,通过三角函数知识可以得到:

AM = MB = OA * Math.sin(vAngle/2) = r * Math.sin(vAngle/2) ;
其中r为半径
OM = OA * Math.cos(vAngle/2) = r * Math.cos(vAngle/2) ;
因此可以算出
XM = OM * Math.tan(vAngle/2 - θ),
最终可以计算出AX的长度为
AX = AM - XM = r * Math.sin(vAngle/2) - r * Math.cos(vAngle/2) *Math.tan(vAngle/2 - θ)

通过以上计算公式,可以计算出基于角度的线性插值的插值因子 s = AX/AB。 带入插值因子,结合向量的线性插值即可实现角度均匀的动画效果,代码如下:

function animateVector3(){
        var a = i / count;
        var vAngle = v1.angleTo(v2); // 通过向量计算夹角
        var stepAngle = a * vAngle; // 
        var halfLength = r * Math.sin(vAngle/2);
        var stepLength = halfLength - r * Math.cos(vAngle/2)* Math.tan(vAngle/2 - stepAngle);
        a = stepLength / (halfLength * 2); // 弧线到直线上的映射关系:0.5 - Math.cos(vAngle/2)* Math.tan(vAngle/2 - stepAngle) / ( Math.sin(vAngle/2) * 2)
        // a = 0.5 - Math.cos(vAngle/2)* Math.tan(vAngle/2 - stepAngle) / ( Math.sin(vAngle/2) * 2);
        var v = new Vec2().lerpVectors(v1,v2,a); //向量插值
        v.setLength(r);
        i ++;
        if(i > count){
            i = 0;
        }  
        ctx.beginPath();
        ctx.moveTo(cx,cy);
        ctx.lineTo(v.x + cx,v.y + cy);
        ctx.strokeStyle = 'orange';
        ctx.stroke();
      }

回到角度适配方案

下面这段转换代码可以达到角度适配的效果,此处列出代码,不进行说明,有兴趣的读者,可以自己研究。可以看出,稍显复杂。

 var i = 0,count = 200;
 var PI = Math.PI;
function animateAngle2() {
          var angleStart,angleEnd;
          if(Math.sign(angle1) == Math.sign(angle2)){
              return animateAngle();
          }else{
              if(angle1 < 0 && angle1 +2*PI > angle2 + PI){
                  return animateAngle();
              }else if(angle2 < 0 && angle2 +2*PI > angle1 + PI){
                  return animateAngle();
              }else if(angle1 < 0){
                  angleStart = angle1 + 2 * PI;
                  angleEnd = angle2;
              }else{
                  angleStart = angle1;
                  angleEnd = angle2 + 2 * PI;
              }
          }
       
           var angle = (angleStart * (count-i) + angleEnd * (i)) / count;
           var x = cx + Math.cos(angle) * r,
                y = cy + Math.sin(angle) * r;
            ctx.beginPath();
            ctx.moveTo(cx,cy);
            ctx.lineTo(x,y);
            ctx.strokeStyle = 'red';
            ctx.stroke();
            i ++;
            if(i > count){
                i = 0;
            }
      }

球面的情况

上面解决了圆环的情况,如果是球面的情况,如果是通过角度转换的方式,则非常复杂。
而通过向量的方式:

  • 向量解决方案一和向量解决方案三,可以平滑的移植到球面运动的情况,复杂度并没有提高。
  • 向量解决方案二,需要做一些的调整,才可以方便的移植到球面的情况,这里面涉及到一些坐标系变换的知识,稍微复杂,此处不讲述。 有兴趣的同学,可以留言点赞。 如果有很多人希望了解,我会在写一篇文章来讲解这个问题。

当然 如果学过三维的同学一定知道四元数的相关知识,通过四元数可以很方便的实现球面插值,这超过本文的范围,不讲述,有兴趣的同学自己了解吧。

总结

可以看出:
通过角度转换的方式来实现圆环或者球面上面的动画,要适配很多情况,比较复杂。
而通过向量来实现圆环或者球面上面的动画,会变得简单和容易理解。

这也是为什么当时同事J自己研究了一上午也没有做出来,实现的效果,总是一会儿行,一会儿不行。而他在理解了向量的解决方案之后,10分钟便写出了健壮的动画效果代码。

本文整体代码

关注公众号留言获取。

欢迎关注公众号“ITman彪叔”。彪叔,拥有10多年开发经验,现任公司系统架构师、技术总监、技术培训师、职业规划师。熟悉Java、JavaScript、Python语言,熟悉数据库。熟悉java、nodejs应用系统架构,大数据高并发、高可用、分布式架构。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。

 

 
ITman彪叔公众号
0
0
分享到:
评论

相关推荐

    均分圆弧各点坐标代码.rar

    这些坐标可以用于绘制曲线、动画或其他需要沿着圆弧路径移动的图形元素。 在实际应用中,可能会遇到精度问题,因为浮点数运算可能存在误差。因此,代码可能需要进行一些误差控制,例如四舍五入或使用高精度数学库。...

    Canvas彩色弹性碰撞小球动画.zip

    2. **Canvas绘图API**:Canvas提供了一系列绘图方法,如`fillRect()`用于填充矩形,`strokeRect()`画边框,`beginPath()`开始新的路径,`moveTo()`和`lineTo()`用于绘制线条,以及`arc()`用于绘制圆弧。这些基本方法...

    Canvas等离子球闪电动画特效.zip

    3. **绘图函数**:如`arc()`绘制圆弧,`beginPath()`和`closePath()`创建路径,以及`fill()`和`stroke()`填充和描边路径。 4. **动画循环**:通过定时器(如`requestAnimationFrame`)不断更新画面,以实现动态效果...

    HTML5 Canvas飞机线条动画特效.zip

    4. **向量运算**:飞机的飞行路径可能基于向量运算,包括加法、减法、标量乘法等,以计算出每个帧飞机的新位置。弧度飞行涉及到角度转换和三角函数(如`Math.sin()`和`Math.cos()`)。 5. **样式控制**:Canvas可以...

    HTML5基于Canvas实现的炫酷的火焰风暴动画效果源码.zip

    1. **Canvas API**:Canvas API提供了基本的绘图命令,如`fillRect()`、`strokeRect()`、`beginPath()`、`moveTo()`、`lineTo()`等,以及更复杂的绘图功能,如`arc()`(绘制圆弧)和`bezierCurveTo()`(贝塞尔曲线)...

    基于Canvas绘制的密集圆圈泡泡动画特效.zip

    - `arc(x, y, radius, startAngle, endAngle, anticlockwise)`:在指定位置绘制圆弧,参数定义了圆心坐标、半径、起始角度、结束角度(均以弧度表示)和是否逆时针方向。 - `fill()`或`stroke()`:填充或描边路径...

    2次贝塞尔曲线算法

    计算这些控制点的位置通常涉及一些三角函数和向量操作。 **逼近圆弧片段** 在实际编程中,我们通常会用到一些数学工具和算法来实现这个过程。例如,我们可以使用参数化的方法,将圆弧上的每一个点表示为角度θ的...

    JS彩色气泡浮动动画特效

    计算气泡的运动轨迹和速度也需要运用到基础的数学知识,如加减运算和向量概念。 7. **碰撞检测**: 虽然在描述中没有特别提到,但为了实现更真实的动画效果,可能还需要考虑气泡之间的碰撞检测,以及气泡与Canvas...

    HTML5 Canvas核心技术 图形、动画与游戏开发

    - **1.11.3 向量运算**:介绍向量的基本运算,如加法、减法、点积等。 - **1.11.4 根据计量单位来推导等式**:通过实例讲解如何根据物理量的单位来推导数学公式。 - **1.12 总结**:本章总结了`canvas`的基础知识...

    OpenGL_NURBS闭曲线_圆.rar

    OpenGL是计算机图形学中的一种强大的图形库,它允许程序员创建复杂的3D图形和动画。NURBS(非均匀有理B样条)是OpenGL中用于建模和渲染精确、平滑表面的重要工具。NURBS曲线是通过一组控制点来定义的,可以灵活地...

    Canvas液体流动火焰动画特效特效代码

    - **向量运算**:液体流动的方向和速度可以通过向量表示,通过改变向量的方向和长度模拟流动效果。 - **粒子系统**:可能使用粒子系统来模拟火焰,每个粒子有自己的位置、速度、颜色等属性,随着时间推移和碰撞...

    OpenGL几何变换

    旋转是指将物体沿 xy 平面内的圆弧路径重定位。缩放是指改变物体的尺寸。 在二维平面上,平移可以使用列向量来表示坐标位置和平移向量。旋转可以使用旋转矩阵来表示,旋转矩阵是一个包含乘法系数的矩阵。缩放可以...

    Transform:基于迪士尼 12 条动画原则的形状变换

    在编程中,可以使用向量数学来实现弧线路径,如贝塞尔曲线或圆弧运动。 8. ** secondary action(次要动作)**:次要动作增强主要动作的表达力,如角色说话时的头部微动。可以创建辅助函数或组件来处理这些细节。 ...

    动态数学软件GeoGebra使用教程.doc

    ### GeoGebra 使用教程知识点...- **动画和动画控制**:设置对象的动态效果。 以上为GeoGebra使用教程的主要知识点,通过这些基础和进阶的操作,用户可以灵活地解决各种数学问题,并在教学、学习过程中发挥重要作用。

    CourseNotes_NURBS_allv2.pdf

    NURBS技术基于控制点和节点向量来构造曲线和曲面,它结合了均匀与非均匀B样条的优点,并加入了有理性的概念,能够精确表示出直线、圆弧以及更复杂的自由形状。 NURBS曲线或曲面的定义依赖于以下关键概念: 1. 控制...

    js-canvas雪花特效插件及demo

    在JavaScript中,可以为每个雪花定义一个速度向量,随着时间的推移,这个向量会受到重力的影响而逐渐改变方向。同时,可以设定一个随机的风速来让雪花在垂直方向上有微小的偏移,增加真实感。 此外,为了优化性能,...

    吉林大学计算机图形学

    它涉及许多理论和技术,如几何建模、渲染、动画制作等,在游戏开发、电影特效、虚拟现实等领域有着广泛的应用。 #### 裁剪 裁剪技术用于从一幅图像或场景中去除不需要的部分,只保留感兴趣的区域。常见的裁剪算法...

    郑州大学--计算机图形学

    此外,**Bresenham圆弧算法**用于精确绘制圆形,**椭圆点阵图形扫描转换算法**则用于绘制椭圆,这些算法确保了复杂图形的准确性和美观性。 #### 知识点三:区域填充算法 在计算机图形学中,区域填充算法用于填充...

Global site tag (gtag.js) - Google Analytics