HTML5 BuilderのAnimationコンポーネントを使ってみる

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

    最後の位置

次の例では、ボタンが移動します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください