JavaScriptのぶら下がりアニメーションライブラリについて

Question

###前提・実現したいこと
WEBサイトの制作で、皆様にご質問させていただきたいのですが、
サイトの上部から紐でぶら下がっているような看板のアニメーションを実現したいと思っています。細かい詳細は以下のような形です。

• 看板はドラッグできる
• ドラッグの際には紐が伸びる
• 紐が下に伸びた状態でドロップすると紐がゴムのように、弾性を感じさせる動きで元の位置に戻る
• 紐の上部に近い場所でドロップすると重力を感じるようにおちる

上記のようなことを実現したいのですが、そのような用途に使えるライブラリなどご存知ではないでしょうか？

###近い表現

■matter.js
http://brm.io/matter-js/demo/#compound
※こちらの右側の紐がついたようなオブジェクト
※ほぼこちらで要件を満たしていけるかなとは思うのですが、canvasを使わずもっと手軽に扱えるものがあれば....と思い、ご質問させていただきました。

何卒よろしくお願いいたします。

Answer 1

svgを使えばと。

書き方

一辺が50pxの正方形であれば、

<svg>
<path d="M 0,0 L 50,0 L 50,50 L0,50 Z" fill="red" stroke="none"/>
</svg>

で、描けます。
pathのdの中身(パスという)が重要です。
Mはパスをこの座標から描き始める、という命令です。
つまり、鉛筆を置いた、ということです。
L 50,0は、「50,0の点まで直線を引く」という命令
Zはパスを閉じる、つまり鉛筆を置いた点まで直線を引くという命令です。
fillは、塗り潰しの色です。
strokeは、実際にパスで引いた線の色です。
L意外にも、曲線を描くヤツがあります。

Q:例えばM0,0Q0,50 50,50だと、0,0…0,50と0,50…50,50の直線を滑らかに結んでいます。

C:例えばM0,0C0,50 50,0 50,50だと、0,0…0,50と50,0…50,50の直線を滑らかに結んでいます。Qとあんまり変わりませんね。
円を描く場合は、circleを使います。

<circle id="move_circle" cx="50" cy="50" r="50" fill="#f00"></circle>

多分、本計画にはいらないとは思いますが、svg図形に動きを付けたければ

<animateMotion dur="5s" repeatCount="indefinite" >
<mpath xlink:href="#path"></mpath>
</animateMotion>

を、pathなら中に挟むと、
xlink:href=で指定したpathの線上を通るように、durで指定した時間に1周、repeatCountで指定した回数周ります。

もし、これでも出来ない動きなら、真面目にjs操りをお勧めします。

Comments

[waiya]

だいぶ期間が空いてしまってすみません。
結局、jQuery上で力技で振り子のような動きにするということになったのですが、実装自体仕様変更になってしまいました。

回答を元に案も考えさせていただきましたのでベストアンサーにいたします。
ありがとうございました。