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

Fork
1
Fav
0
View
213
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 102 lines
  • HTML 1 lines
  • CSS 10 lines
(追記)
Twitterにも書きましたが代替案が浮かんだので続けます。
要は複合図形やpathの移動が不可なだけで、矩形といった単純図形(プリミティブ図形)の移動は何ら問題無いのでこれを使います。

--------------------------------------------------------------------------

時間位置の要素 |>---<| を現在時間とシンクロさせてアニメーション(右移動)させる。

先ずは目的アニメーションの簡易モデルを作ってテストします。要素は矩形と円2つを使って擬似的に ○===○ と表し set() でまとめて、この影も同様にまとめて右方向に移動させます。

コードでは左上に開始と戻るのボタンを用意し、これがそれぞれ本来のPlay,Clearに相当します。


・・・ローカルでは動いたがここでは動かない。まさかと思ったがRaphaelの1.5.2では transform パラメーターが使えない

故にタイムラインのコードはこれ以上掛けない(泣)

------------------------------------

現時点での達成段階のみ図示します
https://twitter.com/Crane_MolTech/status/1089187178050015232

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

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