Motion Scale（ウィジェット）

Motion Scale（ウィジェット）

Alexa Motion Scaleレスポンシブ対応コンポーネント（AlexaMotionScale）は、コンテンツを一連のページとして表示し、ページの変更時にウィジェット固有の「ズーム」アニメーションを適用します。表示するページは、Alexa Presentation Language（APL）コンポーネントとレスポンシブ対応コンポーネントまたはテンプレートを使用して定義します。

互換性

AlexaMotionScaleは、alexa-viewport-profilesパッケージの次のウィジェットビューポートプロファイルで動作するように設計されています。

  • ウィジェット、中（@hubWidgetMedium）

サポートされていないビューポートでAlexaMotionScaleを使用すると、予期しない結果になることがあります。ビューポートプロファイルの詳細については、ビューポートプロファイルを参照してください。

alexa-layoutsパッケージをインポートする

AlexaMotionScaleを使用するには、alexa-layoutsパッケージをインポートします。

alexa-layoutsパッケージの最新バージョンは1.7.0です。AlexaMotionScaleはバージョン1.5.0で導入されました。

AlexaMotionScaleのパラメーター

次の表は、ウィジェットビューポートプロファイルで機能するAlexaMotionScaleのプロパティの一覧です。すべてのパラメーターがすべてのビューポートプロファイルに適用されるわけではありません。「ウィジェットのサポート」列は、各パラメーターをサポートするウィジェットビューポートプロファイルを示しています。ビューポートプロファイルの詳細については、ビューポートプロファイルを参照してください。

type以外のパラメーターはすべてオプションです。

名前 型 デフォルト 説明 ウィジェットのサポート 追加されたバージョン

data

配列

—

AlexaMotionScaleにバインドするデータです。設定した場合、AlexaMotionScaleはデータ配列のインフレート方法を使用します。つまり、items内のコンポーネントは、data内の値ごとに1回ずつインフレートされます。

中

1.5.0

initialPage

整数

0

表示する最初のページの0から始まるインデックスです。

中

1.5.0

items

任意

—

表示するコンポーネントの配列または単一のコンポーネントです。

中

1.5.0

navigation

文字列

wrap

移動可能な方向を指定します。指定できる値は、normal、none、wrap、forward-onlyです。これらのオプションは、標準のPagerコンポーネントと同じように機能します。ページャーナビゲーションオプションの詳細については、Pagerコンポーネントのnavigationプロパティを参照してください。

中

1.5.0

onPageChanged

配列

—

ページが変更されたときに実行するコマンドです。これらのコマンドは、ページャーが新しいページに完全に切り替わった後に実行されます。

中

1.5.0

pagerId

文字列

—

AlexaMotionScaleレイアウト内の基盤のPagerコンポーネントに使用する識別子です。AutoPageやSetPageなどのコマンドでAlexaMotionScaleをターゲットにする場合は、このプロパティにIDを設定します。

中

1.5.0

type

文字列

—

常にAlexaMotionScaleに設定します。

中

1.5.0

表示するページを定義する

AlexaMotionScaleに表示するページは、itemsプロパティで指定します。

AlexaMotionScaleは複数子コンポーネントです。このため、ページを定義するときにitems配列がどのように使用されるかは、dataプロパティが設定されているかどうかによって異なります。

  • dataに値の配列が含まれている場合、AlexaMotionScaleはデータ配列のインフレート方法を使用します。つまり、items内のコンポーネントは、data内の値ごとに1回ずつインフレートされます。

  • dataが設定されていない場合、AlexaMotionScaleは子コンポーネントの単純な配列のインフレート方法を使用します。つまり、items配列の各項目が個々のページとしてインフレートされます。

AlexaMotionScaleコンポーネントは、単独では何もコンテンツを表示しません。表示するコンポーネントまたはレイアウトをitemsプロパティに指定する必要があります。

ページ変更時のウィジェット固有のアニメーション

AlexaMotionScaleは、カスタムの「ズーム」ページ切り替えアニメーションを使用します。ページャーがページを変更するとき、現在のページが縮小しながらフェードアウトし、同時に新しいページが拡大しながらフェードインします。このアニメーションは、ページャーの向きにかかわらず同じです。

以下の例は、このアニメーションを示しています。このAlexaMotionScaleには2つのページがあります。各ページには、いくつかのリスト項目を含むAlexaTextListが表示されます。この例では、ティックイベントハンドラーを使用して3秒ごとにページを切り替えます。

もう1つのページ遷移効果である「スワイプしてめくる」を使用するウィジェットページャーについては、Motion Pagerを参照してください。

背景画像を使用するAlexaMotionScaleの例

背景画像の上にコンテンツを重ねて表示する場合は、背景をアニメーションに含めるかどうかを考慮する必要があります。たとえば、前の例は、AlexaTextListテンプレートのbackgroundImageSourceプロパティを設定することで、リスト項目の後ろに背景画像を追加するように変更できます。ただし、この方法では背景画像がズームアニメーションに含められます。

背景画像を動かさずにリストをアニメーション化するには、背景画像をAlexaMotionScaleコンポーネントの外に配置します。以下は、静的なヘッダーと背景を含むカスタムリストの例です。

子コンポーネントの単純な配列のインフレートを使用するAlexaMotionScale

以下は、子コンポーネントの単純な配列のインフレート方法を使用して3つのページを表示するAlexaMotionScaleの例です。ページャーは、items内の各コンポーネントを個々のページとして表示します。

このページは役に立ちましたか？

最終更新日: 2025 年 12 月 23 日