プロフィール

ライブ星人

Author:ライブ星人
性別:宇宙人
血液型:普通にA型
出身地:ライブ星
出没地:渋谷
職業:遊び人
出没するサイト:
東京ライブネット
ライブ東京 - ライブハウス東京

ブロとも申請フォーム

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- ] | スポンサー広告

パラパラアニメの作り方(その6)

smile! 6

絵が上下両方とも動いていないときはページをリロードしてください。
※スクリプトを新しくしたのでキャッシュを更新してください。

パラパラアニメの作り方(その6)
(その6)では、複数のアニメーションを動かす設定とアニメーションを表示の間隔で設定する方法を説明します。

パラパラアニメの作りをまとめました。こちらのサイトをみてください。

<遊び方>
PCに作業用のフォルダーを作りそこに以下のファイルを保存してください。

(1)画像ファイル3つ(smile1.png, smile2.png, smile3.png)
smile1.png
smile2.png
smile3.png

(2)palapala.jsファイル
palapala.js

(3)smile6.htmlファイル
smile6.html

全てのファイルを同じフォルダーに入れたらsmile6.htmlを開いて動けばOK!
サンプルをいろいろいじって遊んでみてください。

今回のポイントは、複数のアニメーションを動かしていることと、アニメーションの表示を間隔で設定していることです。

水色の部分が複数動かす為の設定です。
単純に2セットpalapala( sprites )を実行すれば、全く別のアニメーションとして動きます。

ピンク色の部分がアニメーションを間隔で表示する設定です。
サンプルではanimation1が時間(ステップ)で設定、animation2は間隔(インターバル)で設定されています。
この2つの設定は全く同じ動きをします。
使いやすい方を使ってください。

-----------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>smile</title>
<script type="text/javascript" src="palapala.js"></script>
</head>
<body>
<h1>smile! 6</h1>
<div id="animation1">
 <div id="smile1">
  <img id="smile1-1" src="smile1.png" />
  <img id="smile1-2" src="smile2.png" />
  <img id="smile1-3" src="smile3.png" />
 </div>
</div>
<div id="animation2">
 <div id="smile2">
  <img id="smile2-1" src="smile1.png" />
  <img id="smile2-2" src="smile2.png" />
  <img id="smile2-3" src="smile3.png" />
 </div>
</div>
<br>
<script type="text/javascript">

   var sprites1 = {
      smile1: {
          0: { id: "smile1-1" },
         20: { id: "smile1-2" },
         25: { id: "smile1-1" },
         35: { id: "smile1-3" },
         50: { id: "smile1-3" }
      }
   };

   var sprites2 = {
      smile2: [
         { interval: 20, id: "smile2-1" },
         { interval: 5, id: "smile2-2" },
         { interval: 10, id: "smile2-1" },
         { interval: 15, id: "smile2-3" }
      ]
   };

   palapala( sprites1 );
   palapala( sprites2 );

</script>

</body>
</html>
-----------------------------------------------------------
jQueryのプラグイン化を検討しましたが
このスクリプトはid指定で動いているのでjQueryオブジェクトの
プロトタイプチェーンにする意味が見当たらなかったのでやめました。

javascritはここら辺にして、アニメーション作りに戻ろう…


[ 2012/09/24 ] | 未分類 | CM(0) | TB(0)
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://20thcboy.blog10.fc2.com/tb.php/89-c986cad5
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。