Отскоки мяча по параболической траектории
1,00
р.
Вопрос инициирован топиком: Как анимировать отскок теннисного мячика
В этом вопросе отскоки были по вертикали
Данный вопрос касается отскоков с разными величинами смещения по высоте и длине
Понятно, что можно нарисовать в векторном редакторе траекторию движения мяча, как на изображении и далее реализовать движение по траектории, как в примере выше.
Но вызывает затруднение реализация неравномерности движения и скорости.
Ответ
Опережая Ваш следующий вопрос, сделал чтобы он еще и крутился:
let t, h, max = 176
function start() { t = Date.now() h = max }
addEventListener('click', start) start()
requestAnimationFrame(function a(){ const dt = Date.now() - t h *= 0.97 const wave = Math.cos(dt/(200 - dt/25)) ballGroup.setAttribute('transform', `translate(${dt/(10+dt/150)}, ${max - Math.abs(wave)*h})`) ball.setAttribute('transform', `rotate(${3*dt/(10+dt/150)})`) requestAnimationFrame(a) })
В этом вопросе отскоки были по вертикали
Данный вопрос касается отскоков с разными величинами смещения по высоте и длине
Понятно, что можно нарисовать в векторном редакторе траекторию движения мяча, как на изображении и далее реализовать движение по траектории, как в примере выше.
Но вызывает затруднение реализация неравномерности движения и скорости.
Ответ
Опережая Ваш следующий вопрос, сделал чтобы он еще и крутился:
let t, h, max = 176
function start() { t = Date.now() h = max }
addEventListener('click', start) start()
requestAnimationFrame(function a(){ const dt = Date.now() - t h *= 0.97 const wave = Math.cos(dt/(200 - dt/25)) ballGroup.setAttribute('transform', `translate(${dt/(10+dt/150)}, ${max - Math.abs(wave)*h})`) ball.setAttribute('transform', `rotate(${3*dt/(10+dt/150)})`) requestAnimationFrame(a) })
