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

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

Fork
0
Fav
0
View
234
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 0 lines
  • HTML 1 lines
  • CSS 10 lines
ここのサーバーが安定しないので、昨日の時点で「Raphael.js のアニメ仕様指定ガイドの基本シリーズ」を打ち切ることにしました。
※先にTwitterで告知しました

下段のアニメデモはローカル実行の(ver2.21での)GIFアニメをUpしてます。 [Animate]ボタンを押すとAndroidの図が変形して色と位置を変えながらGoogleのロゴになります([form]から[to]へのアニメ)。
https://twitter.com/Crane_MolTech/status/1094658202950483969

アニメの肝となる部分のコード: aniFig0.animate({ path:Google_pathStr, fill:'#0ff', transform:'t400,200 s3.0,3.0' }, duraTime0, twType, ani_func1);

{ } で囲まれた箇所は、pathを変更,色を変える,移動して拡大 です。duraTime0 は 2000ms,twType は'linear' つまり直線に(視覚効果無し),終了時のコールバック関数は ani_func1 で console.log('-- Complete'); が出るようにしました。

全体を通した補足としては、duraTime0(時間)の所は[基本10~18]のタイムラインが受け持ち、twType(視覚効果の種類)の選択は[基本01~08]の要素を結ぶUIが担当することになります。

・・・ちょっと中途半端になりましたが以上で「Raphael.js のアニメ仕様指定ガイド」の基本を終了します。
皆さんご覧頂き本当にありがとうございました。



///


  • (最後)Raphael.js のアニメ仕様指定ガイドの基本25
  • (最後)Raphael.js のアニメ仕様指定ガイドの基本25

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