ステップ3 - ユーザーがドラッグするボタンをアニメーション化する

このステップでは、ユーザーがボタンをドラッグしたときにボタンが揺れるアニメーションを再生することで、ドラッグアンドドロップ機能の実装を微調整します。

ユーザーがドラッグするボタンをアニメーション化するには:

  1. Prefabs > Drag Item プレハブの Kanzi Studio で、Image ノードを選択し、Node Components Alt を押しながら右クリック Animation で Animation Player を選択します。

    ../../_images/image-in-prefabs.png ../../_images/triggers-add-animation-player.png
  2. Animation Player セット内で:

    • Target Animation Timeline から Shake へ

    • Autoplay Enabled を有効にする

      Autoplay Enabled は、Kanzi が Animation Player を持つノードをノードツリーにアタッチした後、アニメーションがすぐに開始するかどうかを設定します。

    • Repeat Count Infinite を有効にする

      Repeat Count プロパティで Infinite プロパティを有効にすると、Animation Player はアニメーションを無限に再生します。

    ../../_images/animation-player.png
  3. Properties に Render Transformation Origin プロパティを追加し、X と Y プロパティフィールドを 0,5 に設定します。

    この方法では、ノードの左上隅ではなく、ノードの中心点からノードを移動するようにアニメーションを設定します。

    ../../_images/image-properties.png
  4. File > Export > Export KZB を選択します。

    ../../_images/export-kzb-binary.png
  5. Visual Studio でアプリケーションを実行します。

    ボタンをドラッグすると、揺れます。

次の作業

このチュートリアルでは、ドラッグアンドドロップマニピュレータを使用してナビゲーションバー内のボタンを並べ替える方法を学びました。これで、次のことができます:

関連項目

アニメーションについて詳しく知るには、アニメーション (Animations) を参照してください。

Kanzi アプリケーションを異なるプラットフォームにデプロイする方法を学ぶには、Kanzi アプリケーションのデプロイ を参照してください。