easingを計算でやってみる

CSSアニメーションでも各種JSのライブラリでも、easingはとても簡単にできるようになりましたが、
それらを使わずにJavaScriptで値を計算してやるのも面白いです。
昔ActionAcriptでやっていたことの復習です。

練習がてらやってみます。
今回はまず基本的な徐々に減速するやつ

javascript

const fps = 1000/30 //calを実行するインターバル1秒間に30回
const dx = 200 //目標値
const speed = 0.3
let _tmp = 0 //現在値
function cal()
{
  _tmp += (dx - _tmp) * speed
  console.log(_tmp)
}
const int = setInterval(cal, fps)

目的地（値）と現在値との距離を少しずつ加算していく感じ。
距離がつまってくると加算される値も小さくなるので減速する
というイメージです。

大筋はこんなところいいですが、
目標値に至ったところでsetIntervalをクリアしないといけません。
が、tmpをトレースしても
加算される値が小さくなるので現在値tmpが99.999999...のまま100にはなりません。

なので加算される値がある程度小さくなったら処理を停止し、現在値に目標値を代入します。

let _sa = 200
function cal()
{
  if(_sa >= 0.03 )
    _sa = (dx - _tmp) * speed
    _tmp += _sa
    console.log(_tmp)
  }
}
else
{
  clearInterval(int)
}

こんな感じです。
https://jsfiddle.net/urtyo64x/4/

もうひとつMath.sinを使った減速と加速の繰り返し。
sinについてはこのgifを見るとすごく理解しやすかったです。
https://twitter.com/InfinityLoopGIF/status/997448838737776641

javascript

function cal()
{	
  
  if(ang < 360 )
  {
  
    ang += 3 //角度を3度づつ増やしていく
    _tmp = Math.sin(ang * (Math.PI / 180)) 

    obj.style.left = (100 * _tmp) +'px'

  }
  else
  {
    //角度をリセット
    ang = 0
  }
}
const int = setInterval(cal, fps)

うまく振り子のようになっています。
https://jsfiddle.net/pryvn4tx/6/

今日はここまで。