@artr_lr

Анимация перемещения одного объекта в зависимости от перемещения другого?

Имеем - горизонтальный список блоков(картинок), который может двигаться влево-вправо анимировано, поверх этого списка находится плашка, которая показывает текущий-активный блок-элемент и также двигается влево-вправо анимировано.

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-эффекта.

Так как реализовать задуманное?:)
  • Вопрос задан
  • 346 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы