JavaScriptのぶら下がりアニメーションライブラリについて
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 444
前提・実現したいこと
WEBサイトの制作で、皆様にご質問させていただきたいのですが、
サイトの上部から紐でぶら下がっているような看板のアニメーションを実現したいと思っています。細かい詳細は以下のような形です。
- 看板はドラッグできる
- ドラッグの際には紐が伸びる
- 紐が下に伸びた状態でドロップすると紐がゴムのように、弾性を感じさせる動きで元の位置に戻る
- 紐の上部に近い場所でドロップすると重力を感じるようにおちる
上記のようなことを実現したいのですが、そのような用途に使えるライブラリなどご存知ではないでしょうか？
近い表現
■matter.js
http://brm.io/matter-js/demo/#compound
※こちらの右側の紐がついたようなオブジェクト
※ほぼこちらで要件を満たしていけるかなとは思うのですが、canvasを使わずもっと手軽に扱えるものがあれば....と思い、ご質問させていただきました。
何卒よろしくお願いいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
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操りをお勧めします。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
2017/10/17 08:42
結局、jQuery上で力技で振り子のような動きにするということになったのですが、実装自体仕様変更になってしまいました。
回答を元に案も考えさせていただきましたのでベストアンサーにいたします。
ありがとうございました。