DAY 8
0
Modern Web

## 如何計算每一偵的位移

``````cursorX+= distanceX / period;
cursorY+= distanceY / period;
``````

``````let linear = 1 / period;
cursorX+= linear * distanceX;
cursorY+= linear * distanceY;
// 位移 = 線性常數 * 距離
``````

## 操縱0到1的過程

• X = (1 - timer/period)
• Y = X^2
• 總位移 = Y * distance

period timer X Y 總位移量
90 90 0 0 0
90 45 0.5 0.25 總距離的1/4倍
90 30 0.666 0.444 總距離的4/9倍
90 0 1 1 總距離的1倍

### Ease-in & Ease-out

• X = (1 - timer/period)
• Y(X) = X^2
• 每一偵的位移 = (Y(timer-1) - Y(timer)) * distance

``````let easein = Math.pow(1 - (timer-1) / period, 2) - Math.pow(1 - timer / period, 2);
let cursorX+= easein * distanceX;
let cursorY+= easein * distanceY;
``````

• X = 1 - (1 - timer/period)

``````let easeout = Math.pow(timer / period, 2) - Math.pow((timer-1) / period, 2);
let cursorX+= easeout * distanceX;
let cursorY+= easeout * distanceY;
``````

### 混和方程

``````cursorX+= (0.5 * linear + 0.5 * easein) * distanceX;
cursorY+= (0.5 * linear + 0.5 * easein) * distanceY;
``````

``````function MouseAnime(){
if(!isPathing){
if(timer > 0){
let linear = 1/period;
let easeout = Math.pow(timer / period, 2)
- Math.pow((timer-1) / period, 2);
let easein = Math.pow(1 - (timer-1) / period, 2)
- Math.pow(1 - timer / period, 2);
let a = input.linear;
let b = input.easein;
let c = input.easeout;
cursorX+= (a * linear + b * easein + c * easeout) * distanceX;
cursorY+= (a * linear + b * easein + c * easeout) * distanceY;
timer--;
}
else{
cursorX+= (mouseX - cursorX) / 5;
cursorY+= (mouseY - cursorY) / 5;
}
}
let size = WIDTH * 0.1;
if(MouseImg.complete) context.drawImage(MouseImg,
cursorX-size/2, cursorY-size/2,
size, size);
}
``````

Animation Demo