Как сделать такую анимацию?

Question

[myskypesla]

Есть такая картинка:



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

Подскажите как реализовать или с помощью какого скрипта отловить захват, чтобы был кроссбраузерным?

Comments

[Сергей Тутуков]

Крутая задача.
Тебе нужны будут события mousedown, mouseup, mousemove.
codepen.io/STutukov/pen/pRdvXY?editors=0010 - это набросок тяни за верхний край, для предплечья нужно расчитывать по другому. Я сейчас с работы ухожу)) если что дома помогу)

[Сергей Тутуков]

Времени нет сейчас

[massef]

Сергей Тутуков По драгу же автору нужно. Скажите, а что за магические цифры 3.5 и 40? Как они рассчитываются?

[myskypesla]

Сергей Тутуков: Отлично, буду признателен за помощь. Попробую пока дописывать сам. Понравилось, как работает возврат на место в jquery draggable функция revert, плавно возвращает + ещё нашел такую инфу jsfiddle.net/prasanthkc/frz8J

[Сергей Тутуков]

massef: 40 - это начальное положение transform:rotate(-40deg)
3.5 - это коэффициент, его нужно рассчитать!!! Согласитеть, что у "запястья" если протянуть на 100px вниз, рука должна изменится, допустим, на 20 градусов, а у предплечья на 20px. Это механика)) в универе преподают.
Еще раз повторяю, это не решение! Просто набросок, там даже не по задаче работает.

[myskypesla]

Сергей Тутуков: у меня рука статичная без частей :) тот же прямоугольник что у Вас, просто разукрашенный

[myskypesla]

Сергей Тутуков: Сделал так https://jsfiddle.net/6Ldeu3g2/. Только не могу что-то придумать, так как не очень хорошо в JS разбираюсь, как вызвать callback, чтобы после того как опустилась рука, тут же поднялась. Сейчас реализовал через setTimeout(), но мне потом ещё нужно будет чтобы после поднятия, шарик который лежит на руке взлетал вверх и летел по дуге к левой части руки и скатывался опять в кисть, для этого и нужны callback'и.

Answer 1

[xmoonlight]

brm.io/matter-js/demo/#compound
(просто берёте и делаете всё что угодно!)