bbs-go-site

我希望能够从0上升到给定的百分比，然后再回到0。我目前很愚蠢，无法弄清楚我确信这很简单。现在，我只是使用0到1的进度比例来达到100％。动画需要保持原样，因此我不能更改当前值的动画效果，而只能更改计算进度的方式。

所以只是澄清一下。我想在总进度中从0到给定的百分比，然后在动画运行时回到0。因此，如果我想在某处传递0.5，则该块将移动到总进度的50％，然后在动画时间返回到0。在这种情况下将是500。

下面是一个简单的示例：

const el = document.querySelector('.box');
const display = document.querySelector('.display');
const button = document.querySelector('button');

let aF = null;
let timeline = new TimelineLite({ paused: true })
            .to(el , 1, { x: '200px' , ease: Linear.easeNone })
            .progress(0);

let current = 0;
const target = 500;

const animate = () => {
	const diff = target - current;
  const delta = (diff < 1) ? 0 : diff * 0.05;
  if(delta){
  	current += delta;
    aF = window.requestAnimationFrame(animate)
  }else{
    current = target;
  	window.cancelAnimationFrame(aF);
    aF = null;
  }
  
  const progress = current / target;
  timeline.progress(progress);
  display.innerHTML = progress;
}

button.addEventListener('click', () => {
	current = 0;
  aF = window.requestAnimationFrame(animate);
})

.display{
  padding: 5px;
  background: black;
  color:white;
  width: 200px;
}

.display{
  padding: 5px;
  background: black;
  color:white;
  width: 200px;
}

.box{
  background: green;
  width: 100px;
  height: 50px;
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>

<div class="display">0</div>
<button>Start</button>

<div class="box"></div>

Javascript进度达到特定百分比，然后回到0