Имеем - горизонтальный список блоков(картинок), который может двигаться влево-вправо анимировано, поверх этого списка находится плашка, которая показывает текущий-активный блок-элемент и также двигается влево-вправо анимировано.
function animate(draw, duration){
var start = performance.now();
requestAnimationFrame(function animate(time){
var timePassed = time - start;
if (timePassed > duration) timePassed = duration;
draw(timePassed);
if (timePassed < duration) {
requestAnimationFrame(animate);
}
});
}
//... некий код который запускает перемещение список блоков и меняет активный таргет
if(некое условие){
animate(function(timePassed) {
plashka.style.left = activeTarget.getBoundingClientRect().left + 'px';
}, dur);
}
Работает не совсем как нужно в моменты когда элементы идут на встречу друг другу - плашка вначале встаёт туда где активный элемент был в самом начале анимации, а затем уезжает за ним. Т.е. получается такой ненужный bounce эффект)
Попробовал и такой подход:
function animate(){
var start = performance.now(),plashkaL,leftOt;
requestAnimationFrame(function animate(time){
var timePassed = time - start,
activeTargetLeft = activeTarget.getBoundingClientRect().left,
plashkaLeft = plashka.getBoundingClientRect().left,
x = Math.abs(timePassed)/5;
if (plashkaLeft >= activeTargetLeft) cancelAnimationFrame(animate); // ловлю момент когда плашка ровняется с активным таргетом и останавливаю анимацию
plashka.style.left = plashkaLeft + x + 'px';
if (plashkaL < leftOt) { // если не поровнялись то снова запускаю
requestAnimationFrame(animate);
}
});
}
//... некий код который запускает перемещение список блоков и меняет активный таргет
if(некое условие){
animate();
}
Этот вариант вообще не годится, но только потому что плашка смещается на некое непонятное расстояние, подозреваю что нужно в иксе что-то прописать, но зато нет bounce-эффекта.
Так как реализовать задуманное?:)