2 テキストの表示
7.1 アニメーションの例
43
7 アニメーション
この章では、SMIL 中でクリップを拡大する、あるいは移動するなどのアニメーシ ョンについて説明します（アニメーション GIF あるいは Flash ファイルではありませ ん）。
44
アニメーションは<animate/>タグで定義します。<animate/>タグはボディパートに クリップソースタグと同様に記述します。targetElement 属性では、アニメーション させる要素の ID を指定します。attributeName 属性はアニメーションさせる属性 を値に指定します。by 属性は、アニメーションさせる量を指定します。
この例では、button1 がクリックされると、video_region 領域の幅を 750ms で 24 ピ クセル増やします。また、button2 をクリックすると、video_region 領域の幅を 24 ピクセル減らします。
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
45
アニメーションは、ルートレイアウト領域、領域、クリップに適用できますが、アニ メーション可能な領域の属性は以下の表になります。
backgroundColor 領域の背景色を変更します。
bottom 領域の下辺オフセットを変更します。
height 領域の高さを変更します。
left 領域の左辺オフセットを変更します。
regionName 領域の名前を変更します。これによって、ある領域か
ら他の領域にクリップを移動させます。
right 領域の右辺オフセットを変更します。
soundLevel クリップのサウンドレベルを調整します。
top 領域の上辺オフセットを変更します。
width 領域の幅を変更します。
z-index 領域の重なり順を変更します。
追加情報：クリップ属性のアニメーション
クリップ属性もアニメーションできますが、そのほとんどは、領域と同じ幅、高 さ、オフセット値です。ただし、クリップの属性に固有なものとして、たとえば、ク リップの透明度を変化させるには、rn:mediaOpacity をアニメーションさせます。
また、<brush/>オブジェクトの色を変化させるには、color をアニメーションさせ ます。
前述の例（animation_width_change.smil）は、領域の幅が変更されますが、オフセ ットはそのままなので、領域内のビデオは右側に大きくなります。ビデオの中心 が 移 動 し な い よ う に オ フ セ ッ ト も ア ニ メ ー シ ョ ン さ せ た 例 が 次 に な り ま す
（animation_width_offset_change.smil）。
animation_width_offset_change.smil
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout width="384" height="240" backgroundColor="black"/>
<region id="video_region" width="240" height="180" top="30"
left="40" z-index="0" fit="fill"/>
<region id="button_region1" width="64" height="64" top="50"
left="300" z-index="1"/>
<region id="button_region2" width="64" height="64" top="126"
left="300" z-index="2"/>
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
………..
46
</layout>
</head>
<body>
<par>
<video src="../clips/video2.rm" id="video1" region="video_region"
repeatCount="3"/>
<img src="../clips/wide.gif" id="button1" region="button_region1"
dur="10s" fill="freeze"/>
<img src="../clips/narrow.gif" id="button2" region="button_region2"
dur="10s" fill="freeze"/>
<animate targetElement="video_region" attributeName="width"
by="24" dur="750ms" fill="freeze" begin="button1.activateEvent"/>
<animate targetElement="video_region" attributeName="left"
by="-12" dur="750ms" fill="freeze"
begin="button1.activateEvent"/>
<animate targetElement="video_region" attributeName="width"
by="-24" dur="750ms" fill="freeze"
begin="button2.activateEvent"/>
<animate targetElement="video_region" attributeName="left" by="12"
dur="750ms" fill="freeze" begin="button2.activateEvent"/>
</par>
</body>
</smil>
この例では、button1 をクリックした時に、領域の幅を 24 ピクセル広げるので、ビ デオの中心をそのままにするには、領域の left 属性を以下の<animate/>タグで -12 ピクセル移動させます。
<animate targetElement="video_region" attributeName="left" by="-12"
dur="750ms" fill="freeze" begin="button1.activateEvent"/>
同様に、button2 をクリックした時は、領域の left 属性を 12 ピクセル増やします。
<animate targetElement="video_region" attributeName="left" by="12"
dur="750ms" fill="freeze" begin="button2.activateEvent"/>