Animationコンポーネントを使うと、アニメーション効果を簡単に実現できます。
ブラウザによって、対応しているアニメーション効果に違いがあるようです。
AnimationコンポーネントとButtonコンポーネントを配置します。
Animation1のItemsプロパティを編集します。
CSS3 Animation画面が表示されます。
この画面で、使用するアニメーションを一元管理できます。
「項目の新規作成」ボタンを押して、項目を作成します。
プロパティを編集して、アニメーションを設定します。
「OK」ボタンを押して、設定を登録します。
Button1のAnimationsプロパティを編集します。
アニメーションエディタ画面が表示されます。
この画面でアニメーションを実行するイベントや対象のコンポーネントを設定します。
「新規ルールセットの追加」ボタンを押します。
JavaScriptイベントが追加されました。
プルダウンメニューからイベントを選択します。
「新規ソースの追加」ボタンを押します。
アクションが追加されました。
最初のプルダウンメニューでは、アニメーションを追加するか削除するかを選択します。
2番目のプルダウンメニューでは、アニメーションするコンポーネントを選択します。
3番目のプルダウンメニューでは、Animationコンポーネントを選択します。
アニメーション欄から、適用するアニメーションをチェックします。
「OK」ボタンを押して、設定を登録します。
「F9」キーを押して、アプリケーションを実行します。
動的にアニメーションを実行する場合は、対象のコンポーネントにクラスを追加します。
クラス名はAnimationコンポーネントのNameプロパティとアニメーション項目のCaptionプロパティをアンダーバー(_)でつなぎます。
function Button1JSClick($sender, $params)
{
?>
//begin js
$('#Button1_outer').addClass('Animation1_Animation1');
//end
<?php
}
アニメーション項目のプロパティを見てみます。
- Animation Duration
アニメーションの間隔
-
StartColor
最初の色
-
EndColor
最後の色
次の例では、ボタンの色が徐々に赤くなります。
- Animation Timing
アニメーションの速度
- ease 最初と最後はゆっくり
- linear 一定の速度
- ease-in 最初はゆっくり
- ease-out 最後はゆっくり
- ease-in-out 最初と最後はゆっくり
- Interation Count
アニメーションの繰り返し回数
infiniteのときは無制限に繰り返す -
Start Rotate
最初の角度
-
End Rotate
最後の角度
次の例では、ボタンが回転します。
- Start Scale
最初の大きさ
-
End Scale
最後の大きさ
次の例では、ボタンが大きくなります。
- Start Translate
最初の位置
-
End Translate
最後の位置
次の例では、ボタンが移動します。