如何停止动画并保存进度？ （requestAnimationFrame）

Question

基本上，我需要停止动画并在mousedown上保存进度，然后在mouseup上的保存位置继续动画。

到目前为止，这是我得到的，停止动画，但没有保存任何内容。

谢谢。

function inOutQuad(n){
    n *= 2;
    if (n < 1) return 0.5 * n * n;
    return - 0.5 * (--n * (n - 2) - 1);
};

var stop = false;
var el = document.querySelector('#bar');
var startx = 0;
var destx = 500;
var duration = 7000;
var start = null;
var end = null;

function startAnim(timeStamp) {
  start = timeStamp;
  end = start + duration;
  draw(timeStamp);
}

function draw(now) {
  if (stop) return;
  if (now - start >= duration) stop = true;
  var p = (now - start) / duration;
  console.log(p)
  val = inOutQuad(p);
  x = startx + (destx - startx) * val;
  el.style.marginLeft = (`${x}px`);
  el.innerHTML=(`${(x).toFixed(1)}px`)
  cancel = requestAnimationFrame(draw);
}
requestAnimationFrame(startAnim);

el.addEventListener('mousedown',function(){
	cancelAnimationFrame(cancel)
})

el.addEventListener('mouseup',function(){
 	requestAnimationFrame(draw);
})

#bar {
  background: grey;
  color: white;
  line-height:100px;
}

<div>
  <p id="bar">0</p>
</div>