プロフィール

ライブ星人

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

ブロとも申請フォーム

スポンサーサイト

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

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

smile! 5

みなさんこんにちは!
アニメーションで遊ぼうよ!






パラパラアニメの作り方(その5)
初めての方は(その1)から見てください。
(その5)では、アニメーションの動作のオプションの設定を説明します。

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

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

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

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

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

今回のポイントは、アニメーションの動作のオプションです。

水色の部分がオプションの設定です。
オプションの設定は以下の3つがあります。
var optoins = {
   start: false,
   repeat: false,
   callback: function(){ alert("smile!"); }
};
start スクリプトが読まれたときにアニメーションを実行するかどうか
 指定なし、ture:実行する
 false:実行しない
repeat アニメーションが終了したときに最初から繰り返すかどうか。
 指定なし、ture:繰り返す
 false:繰り返さない
callback アニメーションが終了したときにcallback関数を実行
 指定があるときはその関数を実行する。

ピンク色の部分がjavascriptからアニメーションを実行する方法です。
アニメーションのオブジェクトのプロパティーのplay()を実行してください。


-----------------------------------------------------------
<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! 5</h1>
<div id="smile" style="position:absolute">
   <img id="smile1" src="smile1.png" />
   <img id="smile2" src="smile2.png" />
   <img id="smile3" src="smile3.png" />
</div>
<div id="hello" style="position:absolute">
   <div id="hello0"></div>
   <div id="hello1">みなさんこんにちは!</div>
   <div id="hello2">アニメーションで遊ぼうよ!</div>
</div>
<div id="button" style="position:absolute">
   <div id="button0"></div>
   <button id="button1" onclick="myanime.play();"> もういちど </button>
</div>
<br>
<script type="text/javascript">
var sprites = {
   smile: {
       0: { id: "smile1", top: 20, left: 200 },
       2: { id: "smile1", top: 20, left: 180 },
       4: { id: "smile1", top: 20, left: 170 },
       6: { id: "smile1", top: 20, left: 160 },
       8: { id: "smile1", top: 20, left: 150 },
      10: { id: "smile1", top: 20, left: 140 },
      12: { id: "smile1", top: 20, left: 130 },
      14: { id: "smile2", top: 20, left: 120 },
      16: { id: "smile2", top: 20, left: 110 },
      18: { id: "smile1", top: 20, left: 100 },
      20: { id: "smile1", top: 20, left: 90 },
      22: { id: "smile1", top: 20, left: 80 },
      24: { id: "smile1", top: 20, left: 70 },
      26: { id: "smile1", top: 20, left: 60 },
      28: { id: "smile1", top: 25, left: 50 },
      30: { id: "smile1", top: 30, left: 40 },
      32: { id: "smile1", top: 40, left: 30 },
      34: { id: "smile1", top: 50, left: 20 },
      50: { id: "smile1" },
      70: { id: "smile2" },
      75: { id: "smile1" },
      90: { id: "smile3" },
      105: { id: "smile3" }
   },
   hello: {
      0:  { id: "hello0", top: 80, left: 120 },
      40: { id: "hello1" },
      65: { id: "hello2" },
      90: { id: "hello0" }
   },
   button: {
      0:  { id: "button0", top: 80, left: 120 },
      110: { id: "button1" }
   }
};

var optoins = {
   repeat: false
};

var myanime = palapala( sprites, optoins );
</script>

</body>
</html>
-----------------------------------------------------------

なるべくjavascriptの知識がなくても簡単に作れるようにと思い
あえてjQueryを使わずに作ってみましたが、裏目にでたかな…
ieの対応とか苦労が多いし、スクリプトの位置とか気をつけないと動かないし。

自分がjavascript初心者の頃に(今も深くは理解していないですが)
初めてjQueryの$を見たときに意味が解らなかった。
(今も使い慣れただけで本当の意味は理解していないかも)

次のバージョンはjQueryのプラグインで作ります。
シンプルなサンプルを用意してコピペであそべるようにして。
いろんな人のイラストが動いているところを見てみたい…

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