ドラッグでオブジェクトを回す
てこの原理を使う。
しくみとしては
- 視点から離れた位置を持った方が力がかかる
- 垂直に力を加えるとより力が加わる
というかんじ。
計算については、力のモーメントという考え方を使うっぽい
FN1009002 - 力のモーメント - Flash : テクニカルノート
公式をざっくりいうと
インスタンスの中心とドラッグしている座標を結ぶ部分がてこ(radius)
ドラッグするマウスの動き(fource)がてこに加える力になる。
それらをベクトル（方向と大きさを表すやつ）として考える
２次元のベクトルの外積の求め方は
てこのベクトル(radius)の座標を
r_xr_y
マウスの動きのベクトル(fource)を
f_xf_y
とすると
r_xf_y - r_yf_x
で求められるらしい。
FN1312003 | 平面上の2直線の交点を外積により求める | HTML5 : テクニカルノート
てこのベクトル(radius)とマウスの動きのベクトル(fource)をPointインスタンスで作って、
外積計算関数に渡す
//てこのベクトル(radius)
var radius = new createjs.Point(lastMouse.x - card.x, lastMouse.y - card.y);
//マウスの動きのベクトル(fource)
var force = new createjs.Point(mouseX - lastMouse.x, mouseY - lastMouse.y);
var moment = crossProduct2D(radius, force);
//外積計算関数
function crossProduct2D(point0, point1) {
return point0.x * point1.y - point0.y * point1.x;
}
慣性で移動させる
ドラッグ中とドラッグ後でアニメーションが切り替えることで、
マウスボタンを放した後も減速しつつアニメーションできる。
function startRotation(eventObject) {
update = updateDrag;
}
function stopRotation(eventObject) {
update = updateInertia;
}
function updateDrag(mouseX, mouseY) {
angularVelocity *= deceleration;
}
function updateInertia(mouseX, mouseY) {
var velocityX = velocity.x;
var velocityY = velocity.y;
if (Math.abs(velocityX) + Math.abs(velocityY) + Math.abs(angularVelocity) < 1) {
createjs.Ticker.removeEventListener("tick", rotate);
} else {
lastMouse.x = mouseX + velocityX;
lastMouse.y = mouseY + velocityY;
velocity.x = velocityX * deceleration;
velocity.y = velocityY * deceleration;
angularVelocity *= deceleration;
}
}