A
A
artr_lr2017-02-17 19:42:58
Animation
artr_lr, 2017-02-17 19:42:58

Animating the movement of one object depending on the movement of another?

We have - a horizontal list of blocks (pictures), which can move left-right animated, on top of this list there is a plate that shows the current-active block element and also moves left-right animated.

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);	
}

It does not work quite as it should at the moments when the elements go towards each other - the plate first rises to where the active element was at the very beginning of the animation, and then leaves for it. Those. it turns out such an unnecessary bounce effect)
I also tried this approach:
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();
}

This option is not suitable at all, but only because the plate is shifted by some incomprehensible distance, I suspect that something needs to be written in X, but there is no bounce effect.
So how do you make it happen? :)

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question