动画的物理数学方法

本周介绍一些关于动画相关的物理数学方法，希望通过相关的学习，来对于canvas动画的绘制有所帮助。

1.关于动画小球对象的建立。

首先假设存在一个小球对象 objCircle ,其坐标为（x,y），半径为 r。我们可以建立一个关于小球的JS对象：

var Circle = function(x,y,r){
    this.x = x;
    this.y = y;
    this.r = r;
}  

2.小球对象速度的引入。

其次当要让小球动起来势必要改变小球的位置，因此物理学里，影响运动小球位移的改变，那就是速度。
因此我们引入x,y方向的速度vx,vy。由于canvas是2D的所以忽略z坐标上的情况。因此对象的属性引入速度参数。

var Circle = function(x,y,r,vx,vy){
    this.x = x;
    this.y = y;
    this.r = r;
    this.vx = vx;
    this.vy = vy;
}  

引入速度，改变对象的x,y值。

this.x += this.vx;
this.y += this.vy;

相关概念：速度

3.关于速度变化的运动

理想情况下的绝对光滑是不存在的，为了让动画更加贴近现实，因此速度是需要变化的，这里我们说两个方面，
速度大小的变化，以及速度方向上的变化。

1.速度大小的变化：

假设x轴方向的速度变化因子为0.8，那么这是一个加速运动，单位时间内速度增加0.8。对应的位移为：

var ax = 0.8
this.vx +=ax;
this.x += this.vx;

对于摩擦力而言，摩擦力体现在速度的不断减小直至减为0。因此基于极限的概念，vx/n最终趋于0。

举个例子：

var vax = 0.8;
this.vx = this.vx*0.8;
if(this.vx<0.01){
    this.vx = 0;
}
this.x + = this.vx;

2.速度方向的改变：

关于速度方向的改变莫过于圆周运动。说到圆周运动，我们应该想到关于圆周的极坐标定义，因为匀速圆周运动，速度改变的就是方向。因此圆周弧度的改变是根本。

圆的极坐标表达式为：
x = rcosθ
y = rsinθ

也就是说给我一个圆的半径和每次旋转的角度，我就可以用x和y的方式描绘圆的路径。
对应小球坐标为：

// r 为圆周运动的轨迹的半径，angle为弧度,(x,y)为圆周运动轨迹的圆心坐标。
this.x = x0+Math.cos(angle)*r;
this.y = y0+Math.sin(angle)*r;
angle += 0.1;

综上介绍了相关动画的物理知识的储备，深度挖掘相关算法需要查阅高数以及基础物理。

---

• ← Previous Post
• Next Post →