質問: stage.mouseY - dragPointY; } ``` こちらの処理でドラッグ&ドロップはできたのですが スマホのスクロールのように慣性スクロール的な動きにするにはどのように改変すればよいでしょうか?
回答: createjs では `createjs.Tween.get(オブジェクト).to({x: 座標x , y: 座標y } , 止まるまでの時間 , createjs.Ease.cubicOut);` という関数で、始まりが最高速で、座標に向かって減速してストップするみたいです。 なので、`mousedown`の時のオブジェクト座標(x,y)と`pressup`の時のオブジェクト座標(x,y)を取得して、その移動距離の`何倍か`の距離を目的地として時間を指定して移動してあげれば良いと思います。 ↓なんとなく慣性っぽい動きの例です。 ○ 新たに必要なイベントリスナーと状態保持のための変数を追加 ``` //4行追加 myObj.addEventListener("pressup", handleUp); var dragStartX;//ドラッグ開始時(mousedown)のObject位置を保持 var dragStartY;//ドラッグ終了時(pressup)のObject位置を保持 var startTime;//ドラッグ開始時(mousedown)の時間 var endTime;//ドラッグ終了時(pressup)の時間 ``` ○ `function handleDown(event){}`に3行追加 ``` dragStartX = myObj.x;//追加 dragStartY = myObj.y;//追加 startTime = new Date();//追加 ``` ○ `function handleUp()` を追加 ``` function handleUp(event) { endTime = new Date(); var toTime = endTime.getTime() - startTime.getTime(); console.log('up >' + ' かかった時間'+toTime+' dragEndX:'+myObj.x+' dragEndY:'+myObj.y+' 移動した距離X:'+(myObj.x-dragStartX)+' 移動した距離Y:'+(myObj.y-dragStartY)); //目的地の座標はmousedown時のmyObj座標からpressup時のmyObj座標の(3倍とする) var slideX = (dragStartX +((myObj.x-dragStartX)*3));//目的地ドラッグ移動した距離の3倍 var slideY = (dragStartY + ((myObj.y-dragStartY)*3)); var moveTime = toTime*4;//どのぐらいの時間をかけて移動するか createjs.Tween.get(myObj).to({x: slideX,y:slideY }, moveTime,createjs.Ease.cubicOut); } ``` ※ 移動距離の3倍と時間の4倍はなんとなくの数字です。 動かしてみた↓ 全文 ``` ```