Javascript 进步到特定百分比然后回到 0

Question

我希望能够从 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>

Answer 1

这不会尝试解决缓动问题，但会解决您的来回问题：

let progress = (current / target) * 2;
if(progress > 1) { 
    progress = 2 - progress
}

这会将您的进度乘以 2（因此进度是从 0 到 2，而不是从 0 到 1）。然后，如果进度大于 1，则开始从 2 中减去它。

在几个不同的点，这给出了：

Actual progress  |  Progress displayed on bar
0                   0                       
0.1                 0.2   
0.25                0.5
0.45                0.9
0.5                 1
0.55                0.9
0.75                0.5
0.9                 0.2
1                   0

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;
  }
  
  let progress = (current / target) * 2;
  if(progress > 1) { 
      progress = 2 - progress
  }
  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

Javascript progress to specific percentage and then back to 0

javascript

algorithm

progress-bar