游戲動(dòng)畫(huà)必備干貨——跟動(dòng)畫(huà)有關(guān)的數(shù)學(xué)和物理公式

CNZPH 發(fā)布于2019-08-21 10:24 / 1616人閱讀

摘要：收藏自周文彬買(mǎi)了一本動(dòng)畫(huà)基礎(chǔ)來(lái)看，里面很多數(shù)學(xué)和物理知識(shí)，跟著里面的例子學(xué)習(xí)了一遍。思路是核心，其他都換湯不換藥，所以我打算把跟動(dòng)畫(huà)有關(guān)的數(shù)學(xué)和物理知識(shí)整理下，幾種不同的語(yǔ)言整理在一起方便比較，也方便以后用的時(shí)候查找。

(收藏自周文彬)

買(mǎi)了一本《html5+javascript動(dòng)畫(huà)基礎(chǔ)》來(lái)看，里面很多數(shù)學(xué)和物理知識(shí)，跟著里面的例子學(xué)習(xí)了一遍。國(guó)慶回家的時(shí)候，看到我兩年前買(mǎi)的一本《Flash ActionSctipt 3.0動(dòng)畫(huà)教程》，里面的內(nèi)容差不多，作者也一樣，只是都沒(méi)有看過(guò)，于是又把這本書(shū)的例子又練習(xí)了一遍，加深印象。我覺(jué)得動(dòng)畫(huà)里面最難的就是
那些公式吧，語(yǔ)言都有相似之處，可能過(guò)幾年作者還會(huì)寫(xiě)一本《processing動(dòng)畫(huà)基礎(chǔ)》也說(shuō)不定。思路是核心，其他都換湯不換藥，所以我打算把跟動(dòng)畫(huà)有關(guān)的數(shù)學(xué)和物理知識(shí)整理下，幾種不同的語(yǔ)言整理在一起方便比較，也方便以后用的時(shí)候查找。

角度與弧度互轉(zhuǎn)

radians=degrees*Math.PI/180
degrees=radians*180/Math.PI

radians=degrees*Math.PI/180
degrees=radians*180/Math.PI
processing

radians=degrees*PI/180
degrees=radians*180/PI

朝鼠標(biāo)指針（或任意一點(diǎn)）旋轉(zhuǎn)

dx=mouse.x-object.x;
dy=mouse.y-boject.y;
object.rotation=Math.atan2(dy,dx)*180/Math.PI;

demo

dx=mouseX-sprite.x;
dy=mouseY-sprite.y;
sprite.rotation=Math.atan2(dy,dx)*180/Math.PI;

processing

dx=mouseX-sprite.x;
dy=mousyY-sprite.y;
object.rotation=atan2(dy,dx)*180/PI;

創(chuàng)建波

(function(){
  window.requestAnimationFrame(drawFrame,canvas);
  value=center+Math.sin(angle)+range;
  angle+=speed;
}());

demo

public function onEnterFrame(event:Event){
  value=center+Math.sin(angle)*range;
  range+=speed;
}

processing

void draw(){
  value=center+sin(angle)*range;
  range+=speed;
}

創(chuàng)建圓形

(function(){
  window.requestAnimationFrame(drawFrame,canvas);
  xposition=centerX + Math.cos(angle) * radius;
  yposition=center + Math.sin(angle) * radius;
  angle += speed;
}());

demo

public function onEnterFrame(event:Event){
  xposition = centerX + Math.cos(angle) * radius;
  yposition = centerY + Math.sin(angle) * radius;
  angle += speed;
}

processing

void draw(){
  xposition = centerX + cos(angle) * radius;
  yposition = centerY + sin(angle) * radius;
  angle += speed;
}

創(chuàng)建橢圓

(function(){
  window.requestAnimationFrame(drawFrame,canvas);
  xposition=centerX + Math.cos(angle) * radiusX;
  yposition=center + Math.sin(angle) * radiusY;
  angle += speed;
}());

demo

public function onEnterFrame(event:Event){
  xposition = centerX + Math.cos(angle) * radiusX;
  yposition = centerY + Math.sin(angle) * radiusY;
  angle += speed;
}

processing

void draw(){
  xposition = centerX + cos(angle) * radiusX;
  yposition = centerY + sin(angle) * radiusY;
  angle += speed;
}

獲得兩點(diǎn)間的距離

dx = x2 - x1;
dy = y2 - y1;
dist = Math.sqrt(dx * dx + dy * dy);

demo

dx = x2 - x1;
dy = y2 - y1;
dist = Math.sqrt(dx * dx + dy * dy);

processing

dx = x2 - x1;
dy = y2 - y1;
dist = sqrt(dx * dx + dy * dy);

繪制一條穿越莫個(gè)點(diǎn)的曲線(xiàn)

x1 = xt * 2 - (x0 + x2) / 2;
y1 = yt * 2 - (y0 + y2) / 2;
context.moveTo(x0, y0);
context.quadraticCurveTo(x1, y1, x2, y2);

demo

x1 = xt * 2 - (x0 + x2) / 2;
y1 = yt * 2 - (y0 + y2) / 2;
moveTo(x0, y0);
CurveTo(x1, y1, x2, y2);

processing

x1 = xt * 2 - (x0 + x2) / 2;
y1 = yt * 2 - (y0 + y2) / 2;
vertex(x0, y0);
quadraticVertex(x1, y1, x2, y2);

將角速度分解為x、y軸上的速度向量

vx = speed * Math.cos(angle);
vy = speed * Math.sin(angle);

demo

vx = speed * Math.cos(angle);
vy = speed * Math.sin(angle);

processing

vx = speed * cos(angle);
vy = speed * sin(angle);

將角加速度（作用于物體上的力）分解為x、y軸上的加速度

ax = force * Math.cos(angle);
ay = force * Math.sin(agnle);

demo

ax = force * Math.cos(angle);
ay = force * Math.sin(agnle);

processing

ax = force * cos(angle);
ay = force * sin(agnle);

將加速度加入速度向量

vx += ax;
vy += ay;

vx += ax;
vy += ay;

processing

vx += ax;
vy += ay;

將速度向量加入位置坐標(biāo)

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

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

processing

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

移除越界物體

if(object.x - object.width /2 > right ||
   object.x + object.width /2 < left ||
   object.y - object.height /2 > bottom ||
   object.y + object.height /2 < top){

}

demo

if(sprite.x - sprite.width /2 > right ||
   sprite.x + sprite.width /2 < left ||
   sprite.y - sprite.height /2 > bottom ||
   sprite.y + sprite.height /2 < top){

}

processing

if(object.x - object.width /2 > right ||
   object.x + object.width /2 < left ||
   object.y - object.height /2 > bottom ||
   object.y + object.height /2 < top){

}

重置越界物體

if(object.x - object.width /2 > right ||
   object.x + object.width /2 < left ||
   object.y - object.height /2 > bottom ||
   object.y + object.height /2 < top){

}

demo

if(sprite.x - sprite.width /2 > right ||
   sprite.x + sprite.width /2 < left ||
   sprite.y - sprite.height /2 > bottom ||
   sprite.y + sprite.height /2 < top){

}

processing

if(object.x - object.width /2 > right ||
   object.x + object.width /2 < left ||
   object.y - object.height /2 > bottom ||
   object.y + object.height /2 < top){

}

屏幕環(huán)繞越界物體

if(object.x - object.width /2 > right){
  object.x = left - object.width / 2;
}else if(object.x + object.width /2 < left){
  object.x = right + object.width /2;
}
if(object.y - object.height / 2 > bottom){
  object.y = top -  object.height / 2;
}else if(object.y + object.height / 2 < top){
  object.y = bottom + object.height /2;
}

demo

if(sprite.x - sprite.width /2 > right){
  sprite.x = left - sprite.width / 2;
}else if(sprite.x + sprite.width /2 < left){
  sprite.x = right + sprite.width /2;
}
if(sprite.y - sprite.height / 2 > bottom){
  sprite.y = top -  sprite.height / 2;
}else if(sprite.y + sprite.height / 2 < top){
  sprite.y = bottom + sprite.height /2;
}

processing

class="brush:js">
if(object.x - object.width /2 > right){
  object.x = left - object.width / 2;
}else if(object.x + object.width /2 < left){
  object.x = right + object.width /2;
}
if(object.y - object.height / 2 > bottom){
  object.y = top -  object.height / 2;
}else if(object.y + object.height / 2 < top){
  object.y = bottom + object.height /2;
}

應(yīng)用摩擦力（正確方法）

speed = Math.sqrt(vx * vx + vy * vy);
angle = Math.atan2(vy,vx);
if(speed > friction){
  speed -= friction;
}else{
  speed = 0;
}
vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;

demo

speed = Math.sqrt(vx * vx + vy * vy);
angle = Math.atan2(vy,vx);
if(speed > friction){
  speed -= friction;
}else{
  speed = 0;
}
vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;

processing

speed = sqrt(vx * vx + vy * vy);
angle = atan2(vy,vx);
if(speed > friction){
  speed -= friction;
}else{
  speed = 0;
}
vx = cos(angle) * speed;
vy = sin(angle) * speed;

應(yīng)用摩擦力（簡(jiǎn)便方法）

vx *= friction;
vy *= friction;

demo

vx *= friction;
vy *= friction;

processing

vx *= friction;
vy *= friction;

簡(jiǎn)單緩動(dòng)

object.x += (targetX - object.x) * easing;
object.y += (targetY - object.y) * easing;

demo

sprite.x += (targetX - sprite.x) * easing;
sprite.y += (targetY - sprite.y) * easing;

processing

object.x += (targetX - object.x) * easing;
object.y += (targetY - object.y) * easing;

簡(jiǎn)單彈動(dòng)

vx += (targetX - object.x) * spring;
vy += (targetY - object.y) * spring;
object.x += (vx *= friction);
object.y += (vy *= friction);

demo

vx += (targetX - sprite.x) * spring;
vy += (targetY - sprite.y) * spring;
sprite.x += (vx *= friction);
sprite.y += (vy *= friction);

processing

vx += (targetX - object.x) * spring;
vy += (targetY - object.y) * spring;
object.x += (vx *= friction);
object.y += (vy *= friction);

有偏移量的彈動(dòng)

var dx = object.x - fixedX,
    dy = object.y - fixedY,
    angle = Math.atan2(dy,dx),
    targetX = fixedX + Math.cos(angle) * springLength,
    targetY = fixedX + Math.sin(angle) * springLength;

demo

var dx:Number = sprite.x - fixedX;
var dy:Number = sprite.y - fixedY;
var angle:Number = Math.atan2(dy,dx);
var targetX:Number = fixedX + Math.cos(angle) * springLength;
var targetY:Number = fixedX + Math.sin(angle) * springLength;

processing

int dx = object.x - fixedX;
int dy = object.y - fixedY;
int angle = Math.atan2(dy,dx);
int targetX = fixedX + Math.cos(angle) * springLength;
int targetY = fixedX + Math.sin(angle) * springLength;

基于距離的碰撞檢測(cè)

var dx = objectB.x - objectA.x,
    dy = objectB.y - objectB.y,
    dist = Math.sqrt(dx * dx + dy * dy);

if(dist < objectA.radius + objectB.radius){

}

demo

var dx:Number = spriteB.x - spriteA.x;
var dy:Number = spriteB.y - spriteB.y;
var dist:Number = Math.sqrt(dx * dx + dy * dy);

if(dist < spriteA.radius + spriteB.radius){

}

processing

int dx = objectB.x - objectA.x;
int dy = objectB.y - objectB.y;
int dist = sqrt(dx * dx + dy * dy);

if(dist < objectA.radius + objectB.radius){

}

多物理碰撞檢測(cè)

objects.forEach(function(objectA, i){
  for(var j = i + 1; j < objects.length; j++){
    var objectB = objects[j];
    //執(zhí)行碰撞檢測(cè)，在objectA和objectB之間。
  }
});

demo

var numObjects:unit = 10;
for(var i:uint = 0; i < numObjects -1; i++){
  var ObjectA = objects[i];
  for(var j:uint = i + 1; j < numObjects; j++){
    var objectB = objects[j];
    //執(zhí)行碰撞檢測(cè)，在objectA和objectB之間。
  }
});
}

processing

int numObjects = 10;
for(int i = 0; i < numObjects -1; i++){
  int ObjectA = objects[i];
  for(int j = i + 1; j < numObjects; j++){
    int objectB = objects[j];
    //執(zhí)行碰撞檢測(cè)，在objectA和objectB之間。
  }
});
}

坐標(biāo)旋轉(zhuǎn)

x1 = x * Math.cos(rotation) - y * Math.sin(rotation);
y1 = y * Math.cos(rotation) + x * Math.sin(rotation);

demo

x1 = x * Math.cos(rotation) - y * Math.sin(rotation);
y1 = y * Math.cos(rotation) + x * Math.sin(rotation);

processing

x1 = x * cos(rotation) - y * sin(rotation);
y1 = y * cos(rotation) + x * sin(rotation);

反向坐標(biāo)旋轉(zhuǎn)

x1 = x * Math.cos(rotation) + y * Math.sin(rotation);
y1 = y * Math.cos(rotation) - x * Math.sin(rotation);

x1 = x * Math.cos(rotation) + y * Math.sin(rotation);
y1 = y * Math.cos(rotation) - x * Math.sin(rotation);

processing

x1 = x * cos(rotation) + y * sin(rotation);
y1 = y * cos(rotation) - x * sin(rotation);

動(dòng)量守恒

var vxTotal = vx0 -vx1;
vx0 = ((ball0.mass -ball1.mass) * vx0 + 2 * ball1.mass * vx1) / (ball0.mass + ball1.mass);
vx1 = vxTotal + vx0;

demo

var vxTotal:Number = vx0 -vx1;
vx0 = ((ball0.mass -ball1.mass) * vx0 + 2 * ball1.mass * vx1) / (ball0.mass + ball1.mass);
vx1 = vxTotal + vx0;

processing

int vxTotal = vx0 -vx1;
vx0 = ((ball0.mass -ball1.mass) * vx0 + 2 * ball1.mass * vx1) / (ball0.mass + ball1.mass);
vx1 = vxTotal + vx0;

萬(wàn)有引力

function gravitate(partA, partB){
  var dx = partB.x - partA.x;
      dy = partB.y - partA.y;
      distSQ =  dx * dx + dy * dy;
      dist = Math.sqrt(distSQ);
      force = partA.mass * partB.mass / distSQ;
      ax = force * dx /dist;
      ay = force * dy / dist;

  partA.vx += ax / partA.mass;
  partA.vy += ax / partA.mass;
  partB.vx -= ax / partB.mass;
  partB.vy -= ax / partB.mass;
}

demo

void gravitate(partA, partB){
  var dx:Number = partB.x - partA.x;
  var dy:Number = partB.y - partA.y;
  var distSQ:Number =  dx * dx + dy * dy;
  var dist:Number = sqrt(distSQ);
  var force:Number = partA.mass * partB.mass / distSQ;
  var ax:Number = force * dx /dist;
  var ay:Number = force * dy / dist;

  partA.vx += ax / partA.mass;
  partA.vy += ax / partA.mass;
  partB.vx -= ax / partB.mass;
  partB.vy -= ax / partB.mass;
}

processing

void gravitate(partA, partB){
  float dx = partB.x - partA.x;
  float dy = partB.y - partA.y;
  float distSQ =  dx * dx + dy * dy;
  float dist = sqrt(distSQ);
  float force = partA.mass * partB.mass / distSQ;
  float ax = force * dx /dist;
  float ay = force * dy / dist;

  partA.vx += ax / partA.mass;
  partA.vy += ax / partA.mass;
  partB.vx -= ax / partB.mass;
  partB.vy -= ax / partB.mass;
}

余弦定理

var A = Math.acos((b * b + c * c - a * a) / (2 * b * c));
var B = Math.acos((a * a + c * c - b * b) / (2 * a * c));
var C = Math.acos((a * a + b * b - c * c) / (2 * a * b));

demo

A = Math.acos((b * b + c * c - a * a) / (2 * b * c));
B = Math.acos((a * a + c * c - b * b) / (2 * a * c));
C = Math.acos((a * a + b * b - c * c) / (2 * a * b));

processing

float A = acos((b * b + c * c - a * a) / (2 * b * c));
float B = acos((a * a + c * c - b * b) / (2 * a * c));
float C = acos((a * a + b * b - c * c) / (2 * a * b));

基本透視圖

scale = fl / (fl + zpos);
object.scaleX = object.scaleY = scale;
object.alpha = scale;
object.x = vanishingPointX + xpos * scale;
object.y = vanishingPointY + ypos * scale;

demo

scale = fl / (fl + zpos);
sprite.scaleX = sprite.scaleY = scale;
sprite.alpha = scale;
sprite.x = vanishingPointX + xpos * scale;
sprite.y = vanishingPointY + ypos * scale;

processing

processing 3d有其他方法

Z排序

function zSort(a, b){
  return (b.zpos - a.pos);
}
objects.sort(zsort);

demo

objectArray.sortOn("zpos",Array.DESCENDING | Array.NUMERIC);
for(var i:uint =0; i < numObjects; i++){
  setChildIndex(objectArray[i], i);
}

processing

processing 3d有其他方法

坐標(biāo)旋轉(zhuǎn)

x1 = xpos * cos(angleZ) - ypos * sin(angleZ);
y1 = ypos * cos(angleZ) - xpos * sin(angleZ);

x1 = xpos * cos(angleY) - zpos * sin(angleY);
z1 = zpos * cos(angleY) + xpos * sin(angleY);

y1 = ypos * cos(angleX) - zpos * sin(angleX);
z1 = zpos * cos(angleX) + ypos * sin(angleX);

demo

x1 = xpos * cos(angleZ) - ypos * sin(angleZ);
y1 = ypos * cos(angleZ) + xpos * sin(angleZ);

x1 = xpos * cos(angleY) - zpos * sin(angleY);
z1 = zpos * cos(angleY) + xpos * sin(angleY);

y1 = ypos * cos(angleX) - zpos * sin(angleX);
z1 = zpos * cos(angleX) + ypos * sin(angleX);

processing

processing 3d有其他方法

三維距離

dist = Math.sqrt(dx * dx + dy * dy + dz * dz);

demo

dist = Math.sqrt(dx * dx + dy * dy + dz * dz);

processing

dist = sqrt(dx * dx + dy * dy + dz * dz);

GPU云服務(wù)器云服務(wù)器 js 動(dòng)畫(huà) 公式 vps的代理網(wǎng)絡(luò)跟地域有關(guān)嗎 vps的網(wǎng)速跟本地網(wǎng)絡(luò)有關(guān)系嗎數(shù)學(xué)公式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85463.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

CNZPH

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

RAKsmart中秋國(guó)慶促銷(xiāo)：美國(guó)服務(wù)器$30/月起,洛杉磯/圣何塞/香港/日本站群特價(jià),全場(chǎng)VPS

閱讀 3430·2021-11-24 10:30
Web前端架構(gòu)師MK

閱讀 3302·2021-11-22 15:29
[11.11]BGP.TO日本軟銀/新加坡CN2服務(wù)器6.5折月付81美元起

閱讀 3738·2021-10-28 09:32
Vultr機(jī)房測(cè)評(píng) - Vultr美國(guó)達(dá)拉斯Dallas機(jī)房綜合速度和線(xiàn)路去程回程測(cè)

閱讀 1336·2021-09-07 10:22
CSS實(shí)現(xiàn)圖片與文本的居中對(duì)齊的常見(jiàn)方式

閱讀 3379·2019-08-30 15:55
【前端芝士樹(shù)】純CSS實(shí)現(xiàn)多行文本溢出顯示省略號(hào)

閱讀 3651·2019-08-30 15:54
CSS世界（文檔）

閱讀 3536·2019-08-30 15:54
這些常用的H5代碼你知道嗎

閱讀 2863·2019-08-30 15:44

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

游戲動(dòng)畫(huà)必備干貨——跟動(dòng)畫(huà)有關(guān)的數(shù)學(xué)和物理公式

相關(guān)文章

**從小數(shù)學(xué)就不及格的我，竟然用極坐標(biāo)系表白了我的女神?。ǜ酱a）**

【Hello CSS】第三章-瀏覽器的視圖與坐標(biāo)

**JavaScript是如何工作的: CSS 和 JS 動(dòng)畫(huà)底層原理及如何優(yōu)化它們的性能**

**【翻譯】javascript 動(dòng)畫(huà)原理淺析**

發(fā)表評(píng)論

0條評(píng)論

CNZPH

男|高級(jí)講師

TA的文章

RAKsmart中秋國(guó)慶促銷(xiāo)：美國(guó)服務(wù)器$30/月起,洛杉磯/圣何塞/香港/日本站群特價(jià),全場(chǎng)VPS

Web前端架構(gòu)師MK

[11.11]BGP.TO日本軟銀/新加坡CN2服務(wù)器6.5折月付81美元起

Vultr機(jī)房測(cè)評(píng) - Vultr美國(guó)達(dá)拉斯Dallas機(jī)房綜合速度和線(xiàn)路去程回程測(cè)

CSS實(shí)現(xiàn)圖片與文本的居中對(duì)齊的常見(jiàn)方式

【前端芝士樹(shù)】純CSS實(shí)現(xiàn)多行文本溢出顯示省略號(hào)

CSS世界（文檔）

這些常用的H5代碼你知道嗎

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

游戲動(dòng)畫(huà)必備干貨——跟動(dòng)畫(huà)有關(guān)的數(shù)學(xué)和物理公式

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！