移動距離と移動時間を比例させる！(timeclock DAY2))

移動距離と移動時間

昨日説明したクリックした場所に要素を移動させる[https://qiita.com/toga364/items/bbbdcad49258a5f3540f]
のつづきとして紹介していく…
初心者が初心者のために作ったものなので無駄に長くてまとまってないかも…
あんま参考にしないでね！

どういうこと？？

タイトルだけじゃよくわからないと思うので、どんな機能をつけるかまとめる
1.要素を移動させる
2.要素の移動距離を取得
3.要素の移動距離に応じて移動にかける時間を設定
こんな感じです…まぁ詳しくはコードみてね！

実際のコード

/*ここまでは前回で触れたよ！
(リンクは上にあります)
contents.addEventListener("click",function(){
   var x = event.x;
   var y = event.y;
*/
   var left = ball.style.left;
   var top = ball.style.top;　
var leftNum = left.slice(0,left.length-2);
   var topNum = top.slice(0,top.length-2);
   var distanse = Math.sqrt(Math.pow(leftNum,2)+Math.pow(topNum,2));
ball.style.transitionDuration　= distanse*1.5 + "ms";
 /*ここも前回で触れたよ！
   ball.style.left = x + "px";
   ball.style.top = y　+ "px";
   */
    },false)

この5行ぐらいのコードが今回説明するために新たに必要になるものです。
2行位ずつで分けて説明します。

変数の指定(left,top)

var left = ball.style.left;
var top = ball.style.top;　

ここの部分。
ここでは現在のボールの位置を取得して変数に代入してます。
一応確認すると、ball要素のstyle のleft、heightからの距離を取得してます。
ちなみにここではpxが単位としてつきます。consoleで確認してみてね！
まあまだ簡単…
*leftは左からのx軸方向の距離、
　topは上からのy軸方向の距離を分けて求めてるよ！

sliceの部分

var leftNum = left.slice(0,left.length-2);
   var topNum = top.slice(0,top.length-2);

ここだね！
ここではひとつ前で取得した変数からpxを抜き出しています。

要素.slice(開始位置,終了位置)

で終了位置のあとをなくした状態の変数(数字)を取得できます。
変数を使っていく上でさっきの状態ではpxがついているため、文字列だったけど、今回設定すると数字になったよ！
だからこれは文字列を数字にするための処理です。
文字列の状態では足し算、引き算ができないのでこう変化(数字にする)を加えてます。　

変数(distanse)は何してる？？

var distanse = 
Math.sqrt(Math.pow(leftNum,2)+Math.pow(topNum,2));

ここだよ！
みた感じすごい難しそうだけど紐解いていくと簡単で、中学のときの三平方を利用してもとの場所と移動する場所の距離を求めてます。

まず、謎の関数たちの説明！

Math.sqrt(平方根を求める対象);

ここで()のなかの値の平方根を求められる。

Math.pow(累乗する対象,指数);

ここで累乗した値を求められる。

これでわかった人がいるかもしれないけど、単純に中学のときの三角形の直角があるときに使える三平方の定理を利用してる
三平方の定理
A^2=B^2+C^2
変形後
A=√B^2+C^2
単純にこれをしているだけです…

関数郡のせいで難しそうだけどx方向の距離とy方向の距離を分けててにいれたものをここで処理して、要素の過去、現在の座標の距離を求めているよ！

最後の指定は？？　

ball.style.transitionDuration　= distanse*1.5 + "ms";

ここではスタイルを通じてアニメーションにかける時間を設定しています。

transition-duration: 時間;

でアニメーションにかける時間を設定するのと同じ感じ…( ;´･ω･`)
この時間のところにさっきてにいれた変数(distanse)を使用して、数字を求めています。
今回は一ミリ秒で1500px動くようになっている…はず…

まとめ

大まかな流れ
1,現在位置を求める
2,位置を数字化する
3,位置の距離を三平方使って求める
4,最後に秒速設定！
って感じ！
質問あったらよろしくぅ！