Answer the question
In order to leave comments, you need to log in
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);
}
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();
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question