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

Fork
0
Fav
0
View
285
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 326 lines
  • HTML 1 lines
  • CSS 10 lines
全体の構成図
https://twitter.com/Crane_MolTech/status/1086985167414030336

全体の流れについては
http://jsdo.it/Crane_MolTech/KrQK …(番号00)にまとめることにした。

*---------*---------*---------*---------*---------*---------*---------*---------

TL(タイムライン)を描画する。現段階での完成予想図をUpした。幅が広いのでフルスクリーンで見て下さい。
※ ローカルでは問題無かったが、ここにコードをUpするとPlayとClearのアイコンがずれるので手作業で修正した


部品の重なりをヨコから見る

  ○ xxx yyy □xxx     ← 画面向かって下の文字やボタン
       >---<         ← 三角形と赤線による時間位置
  ・ ・ ・ ・ ・ ・ ・ ・    ← 時間目盛り(0.5秒単位)
  - - - - - - - -    ← 時間のコマ50個(0.1秒単位)
 ―――――――――――――   ← 本体の背景
――――――――――――――― ← 背景(青枠)

前に上げた「Raphael.js のアニメ仕様指定ガイドの基本01~08」は手元で作りながらやっていたためUp回数が多くなってわかりにくくなってしまった。

その反省を踏まえて、ここでは最初に完成予想図をUpした(最大時間は15秒→5秒に変更)。まあ実際5秒あれば良いかとw

但しあくまでも完成予想図なので、左上の円マークをクリックして実行状態のデモが出る以外は何の変化も無い。
ActiveボタンやPlayボタンは動作確認の console.log() が表示されるだけ。

完成予想図のデモでは、Delay期間(待機状態、青色のコマ)1.0秒後に実際のアニメーションが2.0秒(オレンジ色のコマ)あると仮定していて、開始から2.15秒後の状態を示している。
  • Raphael.js のアニメ仕様指定ガイドの基本10
  • Raphael 1.5.2
  • Raphael.js のアニメ仕様指定ガイドの基本10

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