【重要】サービス終了のお知らせ

Forked from: Crane_MolTech's Raphael.js のアニメ仕様指定ガイドの基本12 View Diff (60)

Fork
2
Fav
0
View
411
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 132 lines
  • HTML 1 lines
  • CSS 10 lines
時間位置の要素(タテの「 >---< 」形)の設置をする。これも少し複雑なので注意。

左端にある2つの三角形と縦線による時間位置の要素は影を持つが、ここで先に設置した「便宜上の重なりの区切り要素」LayBounds[0]が生きる。

重ね順から言えば50コマ目の次に時間位置の要素が来るが、この影を元の要素の clone() で単に生成すると上に重なってしまう。

Raphael.js には重ね順を指定要素の前後に移動出来る insertAfter() と insertBefore() があるが、50コマ目の矩形はその2つ上に「時間Txt」があり単に50コマ目を基準にしたら狂ってしまう。

かといって「50コマ目の時間Txt」という細かい指定は面倒だし、将来この上に何か置くことになれば修正も面倒である。

ならば、時間位置の要素の影とその下の要素との間に仮想の実体が無い要素を基準に置いておけば楽では?と考えた。

また基本の発想として、「本体は本体で1まとめで管理」,「影は影で1まとめで管理」とグループ化したいので、三角形と線個々の影を生成する度に重ね順変更はしたくなかった。

なおLayBounds[0]と配列の形になってるのは将来他の仮想区切り要素も必要のなった時のためです。


*** ヨコから見るとこんな感じ:

   >---<   ← 時間位置の要素
   >===<   ←  (その影)

  [5.0]   ←  時間のTxt・・・これを基準に影を insertAfter() で置くと面倒
   |    ←  短線
   □    ←  50コマ目の矩形

  ↓↓↓↓↓

   >---<   ← 時間位置の要素
   >===<   ←  上の影

 xxxxxxxxx  ← 将来何かが入っても管理が楽w
  ●    ← 実体が無い仮想の要素LayBounds[0]を置いて基準にする
 xxxxxxxxx  ← 将来何かが入っても(ry

  [5.0]   ←  時間のTxt
   |    ←  短線
   □    ←  50コマ目の矩形

*---------*---------*---------*---------*---------*---------*---------*---------
 上のAAが見づらい場合は下記参照
https://twitter.com/Crane_MolTech/status/1087677726285168641

//
  • Raphael.js のアニメ仕様指定ガイドの基本13
  • Raphael 1.5.2
  • Raphael.js のアニメ仕様指定ガイドの基本13

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by