スクリプトの基本6～アニメーションをスクリプトで開始する/停止する
今度は、スクリプトを使ってアニメーションを開始したり停止したりする方法を説明します。すでに「Ⅵ. アニメーション」でアニメーションの詳細を説明しましたが、それらは基本的にXAMLによるアニメーションの書き方であり、紹介したサンプルも、ページが読み込まれるとすぐにアニメーションが開始するものばかりでした。そして、そこではJavaScriptはまったく使いませんでした。
実際に、ページが読み込まれると自動的にスタートするタイプのアニメーションは、JavaScriptを使わなくてもXAMLだけで書くことができます。JavaScriptが必要になるのは、マウスをクリックしたり、キーボードを押したりといったイベントによってアニメーションを制御したいときです。
たとえば、画像にマウスポインタをのせると回転が始まり、画像からマウスポインタを離すと回転が止まるアニメーションを実現するためには、JavaScriptが必要です。
この場合、あらかじめ、XAMLを使って回転のアニメーションを記述しておき、画像にマウスがのるというイベントが発生したタイミングで、JavaScriptによって回転のアニメーションをスタートさせます。マウスポインタが画像から離れたら、再びJavaScriptを使って回転のアニメーションをストップする、という処理になります。次が、そのサンプルです。
http://www.makoto3.net/xaml/silverlight0100/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="300" Background="lavender">
<Ellipse
Width="200" Height="200" Canvas.Left="50" Canvas.Top="55"
MouseEnter="myFunc1" MouseLeave="myFunc2"
>
<Ellipse.Fill>
<ImageBrush ImageSource="img01.jpg" Stretch="UniformToFill" />
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform Angle="0" CenterX="100" CenterY="100"
x:Name="myRender"
/>
</Ellipse.RenderTransform>
</Ellipse>
<Canvas.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="myRender"
Storyboard.TargetProperty="Angle"
From="0" By="360" Duration="0:0:5"
RepeatBehavior="Forever"/>
</Storyboard>
</Canvas.Resources>
</Canvas>
【myScript.js】
function myFunc1(sender,args) {
sender.findName("myStoryboard").begin();
}
function myFunc2(sender,args) {
sender.findName("myStoryboard").stop();
}
スクリプトでアニメーションの開始や停止を行う際、最も注意したいポイントは、<Storyboard>の書き方です。具体的には、<Canvas.Resources>～</Canvas.Resources>の内部に<Storyboard>を書きます。
「Ⅵ. アニメーション」で扱ったサンプルでは、ページを読み込むとすぐにアニメーションを開始させましたが、スクリプトで制御する場合は、アニメーションを開始しないで待機させておく必要があります。そのための指定が、<Canvas.Resources>～</Canvas.Resources>なのです。これは、アニメーションをキャンバスのリソースとして定義し、必要なときに呼び出せるようにする指定です。
そして、<Canvas.Resources>～</Canvas.Resources>の内側に<Storyboard>～</Storyboard>を指定します。また、スクリプトで開始するときのために、開始タグの<Storyboard>には、x:Nameで名前を付けておきます。上記のサンプルでは、"myStoryboard"という名前を付けてあります。
<Storyboard>～</Storyboard>の内部は、「Ⅵ. アニメーション」で説明した<DoubleAnimation>や<ColorAnimation>でアニメーションを記述します。書き方は「Ⅵ. アニメーション」で説明したとおりです。上記のサンプルでは、TragetNameで"myRender"、TargetPropertyで"Angle"を指定していますから、変形を行う<RotateTransform>のAngle（角度）をアニメーションさせることになります。具体的には、Angleを0から360まで5秒間で変化させ、それを無限に繰り返します。
画像で塗りつぶした円（Ellipse）では、マウスポインタがのったとき関数myFunc1、マウスポインタが離れたとき関数myFunc2を実行します。
各関数の処理は、いたってシンプルです。まず、マウスポインタがのったとき実行される関数myFunc1は、次のような処理を行います。
sender.findName("myStoryboard").begin();
つまり、"myStoryboard"という名前のオブジェクト（＝待機させておいた<Storyboard>）のbeginメソッドを実行します（findNameメソッドがよく分からない場合は ここ を参照）。beginメソッドは<Storyboard>を開始するメソッドです。
マウスが離れたとき実行する関数myFunc2の処理は、次のとおりです。
sender.findName("myStoryboard").stop();
つまり、"myStoryboard"という名前のオブジェクト（＝待機させておいた<Storyboard>）のstopメソッドを実行します。stopメソッドはアニメーションをストップし、<Storyboard>を初期化するメソッドです。
この他に、一時停止のPause、一時停止したアニメーションを停止箇所から再開するResumeといったメソッドも利用可能です。
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
コメント