光で始めるSilverlight
アニメーションって何だろう?
2010/10/10  

アニメーション作るのって、とってもたいへん。
「ダメッ、こんなの、もうできませんっ!」って、私、業界の人に訴えたの。
そうしたら・・・
 「くじけるな、光。もう一度基本に立ち返って、アニメーションとは何かを考えるんだ!」
そう、どんなに苦しいことがあったって、光は絶対くじけたりなんかしない。
もう1度、はじめから特訓のやり直しよっ!

アニメーションって何だろう?
それは結局、出てくるモノの、位置と形を変えるってことじゃないかしら。
だったら、まずモノの位置と形を変えるプログラムを作ってみなきゃ!

そうしてできたのが、このサンプル。 >> サンプルをダウンロード
青いマルをクリックすると、黄色い楕円に変わるの。
(1回しかできないから、もう1度見たかったらリロードしてね。)
サンプルの内容:
・hajimete04.html  -- ブラウザから直接見る、HTMLページだね。
・Silverlight.js  -- Silverlightを使うときに必要な、お約束。
・myxaml.xaml   -- Xaml 「ザムル」ファイル。
・myScript.js   -- 位置と形を変える。
Xamlファイル、"myxaml.xaml"には、こんな風に書いてあるよ。
MouseLeftButtonDown="myMove">
ってことは、マウスをクリックしたら"myMove"が動くってことだね。
で、myScript.js の中には、こう書いてあるんだ。
function myMove(sender,args) {

  // 位置を変える
  sender["Canvas.Left"] = 10
  sender["Canvas.Top"] = 10

  // 形を変える
  sender.Width = 120;
  sender.Height = 240;

  // 色を変える
  sender.fill = "yellow";
}
sender の後に続けて属性を書いて、位置、縦横の長さ、色、を変えているんだ。
同じやり方で、ほとんどの属性を変えることができるんだよ。
これでモノを1回だけ、クリックしたときに動かすことができるようになったよね。
これがアニメーションの基本なの!
あとは、これを繰り返し、何度も動かせば、本物のアニメーションになるんだ。
でも、どうやって?
まだ、何かが足りない・・・一体それは、何?

ページ先頭に戻る▲