AnimateItemコマンド

AnimateItemコマンド

AnimateItemを使用するには、APL 1.1以降が必要です。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。

単一コンポーネントの1つ以上のプロパティまたはバインド値について、固定の時間のアニメーションシーケンスを実行します。

プロパティ

AnimateItemコマンドには、共通のコマンドプロパティに加えて、次の表に示すプロパティがあります。typeプロパティはAnimateItemに設定します。

コマンドを実行するために値が必要なプロパティの場合、以下の表の「デフォルト」列に「必須」と表示されています。それ以外の場合はデフォルト値が表示されますが、デフォルト値がないこともあります。

プロパティ 型 デフォルト 説明

componentId

セレクター

:source

アニメーション化するコンポーネントです。

duration

整数

必須

アニメーションの時間（ミリ秒）です。

easing

linear、ease-inなど

linear

イージングカーブを指定します。

repeatCount

整数

0

リピート再生する回数です。

repeatMode

restart、reverse

restart

アニメーションをリピート再生する方法です。

value

アニメーション化するプロパティの配列

必須

アニメーション化するコンポーネントプロパティの配列です。

高速モードでは、AnimateItemコマンドはアニメーションが終了した状態にジャンプします。AnimateItemコマンドが停止すると、アニメーションが終了した状態にジャンプします。終了状態の計算方法については、repeatModeを参照してください。

componentId

アニメーション化するコンポーネントを識別するセレクターです。指定されていない場合、デフォルトで:sourceになります。:sourceセレクターは、AnimateItemコマンドを発行したコンポーネントをターゲットにします。

duration

アニメーション1回の経過時間（ミリ秒単位）です。repeatCountプロパティが0より大きい値に設定されている場合、アニメーションの合計の時間は、その時間とリピート再生回数に1を足した値の積になります。たとえば、次のアニメーションの時間は合計10秒になります。

{
  "type": "AnimateItem",
  "duration": 1000,
  "repeatCount": 9,
  "repeatMode": "reverse",
  "value": {
    "property": "opacity",
    "from": 0,
    "to": 1
  }
}

easing

イージングカーブでは、パラメーターの値が時間の経過とともにどのように変化するかを指定します。カーブは(0,0)から始まり(1,1)で終わる関数でなければなりません。イージングカーブの一般的な記述方法は、2つあります。

  1. cubic-bezier(x1,y1,x2,y2)： CSS標準に従って、始点が(0,0)で終点が(1,0)の3次ベジェ曲線を定義します。パラメーター化された値の(x1, y1)と(x2, y2)は、曲線の内部制御点を定義します。通常、0から1の間となります。
  2. path(x1,y1,...,xN,yN)： (0,0)から(1,1)までの区分線形関数です。x値は昇順にする必要があり、0～1の間でなければなりません。y値は任意です。終了値の(0,0)と(1,1)は暗黙的に指定されます。

以下のイージングカーブが事前定義されています。

名前 同等の関数
linear path()
ease cubic-bezier(0.25, 0.10, 0.25, 1.00)
ease-in cubic-bezier(0.42, 0.00, 1.00, 1.00)
ease-out cubic-bezier(0.00, 0.00, 0.58, 1.00)
ease-in-out cubic-bezier(0.42, 0.00, 0.58, 1.00)

次の例は、カスタムのイージングカーブを示しています。

{
  "type": "AnimateItem",
  "easing": "path(0.25, 0.6, 0.5, 0.8, 0.75, 0.9)",
  "duration": 1000,
  "value": {
    "property": "opacity",
    "to": 1
  }
}

repeatCount

repeatCountは、コマンドが停止するまでにアニメーションをリピート再生する回数を定義します。デフォルトでは、repeatCountは0に設定されています。この場合、アニメーションは1回再生されて停止します。

repeatMode

repeatModeは、アニメーションを毎回最初から最後まで再生するか、一回おきにアニメーションを先頭まで逆再生するかを定義します。次のリピートモードが定義されています。

名前 説明
restart アニメーションは、リピート再生されるたびに、元の値から始まります。
reverse アニメーションは、毎回逆方向に再生されます。

アニメーションの終了状態は、repeatCountとrepeatModeの関数です。repeatModeがreverseに設定され、repeatCountが奇数の場合、アニメーションが終了した状態は開始状態と同じになります。上記以外の場合では、終了した状態はtoの値に割り当てられた「自然」な終了状態になります。

途中で停止したアニメーションは、常に終了した状態まで「ジャンプ」します。

value

アニメーション化するプロパティの配列です。配列の各要素は、次のような形式になります。

プロパティ 型 必須 説明
from 数値 ✕ プロパティの開始値です。
property 文字列 〇 アニメーション化するプロパティの名前です。
to 数値 〇 プロパティの終了値です。

プロパティのアニメーションは、to/fromプロパティ、またはinputRange/outputRangeプロパティによって定義されます。「from」値を指定しない場合、プロパティの現在の値が使用されます。

transformプロパティに関して、考慮しなければならない特殊なケースがあります。1つは、transformプロパティはfromプロパティを暗黙的には定義しないということです。fromプロパティとtoプロパティの両方を設定する必要があります。

もう1つは、変換の間をスムーズに補間するには、fromリストとtoリストに、同じ順序で同じ一連の変換操作を指定する必要があるということです。次に例を示します。

"from": [ { "translateX": 30 }, { "rotate": 90 }],
"to": [ { "translateY": 30 }, { "rotate": 45 }]

上記は、各配列に移動とそれに続く回転が含まれているため、有効なfrom/to変換です。次の例に示すコードは動作しません。

"from": [ { "translateX": 30 }, { "scale": 1 }, { "rotate": 90 }],
"to": [ { "scale": 2 }, { "rotate": 45 }]

上記の例では、配列が一致していません。配列の長さが異なり、最初の要素も異なります。to配列の先頭に「ない」{ "translateX": 0 }変換が、システムによって自動的に入力されると思われるかもしれませんが、APLランタイムの性能はそれほど高くなく、自動的に違いを見つけて修正することはできません。

アニメーション可能なコンポーネントプロパティ

コンポーネントでは、opacityプロパティとtransformプロパティのアニメーション化をサポートしています。from値はopacityに必須ではありませんが、transformには必ず指定してください。

{
  "type": "AnimateItem",
  "easing": "ease-in-out",
  "duration": 600,
  "componentId": "myFlyingComponent",
  "value": [
    {
      "property": "opacity",
      "to": 1
    },
    {
      "property": "transform",
      "from": [
        {
          "translateX": 200
        },
        {
          "rotate": 90
        }
      ],
      "to": [
        {
          "translateX": 0
        },
        {
          "rotate": 0
        }
      ]
    }
  ]
}

バインドされたプロパティをアニメーション化できます。以下の例では、Frameをビューポートの中心の緑色のボックスとして表示しています。Frameは、コンポーネントがタップされるとバインド値SIDEをアニメーション化するアニメーションを定義します。アニメーションは、1秒かけてFrameのサイズと色をスムーズに変更します。

シミュレーターペインの緑色のボックスをクリックすると、アニメーションを確認できます。もう一度クリックすると、同じアニメーションが逆再生されます。

ベクターグラフィックに渡すパラメーターをアニメーション化することもできます。

以下の例では、細いストローク値で描写したボックスをベクターグラフィックとして定義しています。ベクターグラフィックをタップすると、ボックスが塗りつぶされるまで線の太さを広げるアニメーションが始まります。その後、アニメーションは元の形状に戻ります。

シミュレーターペインの青いボックスをクリックすると、アニメーションを確認できます。

再インフレート時の処理方針

Reinflateコマンドが実行されると、Alexaがドキュメントを再インフレートした後、AnimateItemが再開可能になります。コマンドは、ReinflateのpreservedSequencers配列で指定されたsequencerで実行されている場合に再開されます。

以下のプロパティが保持されます。

  • repeatCount
  • value
  • componentId

これは、ターゲットとなるComponentでこれらのプロパティをそれぞれ保持するのと同じ動作です。コンポーネントプロパティの保持に関する詳細については、preserveプロパティを参照してください。

ターゲットコンポーネントが再インフレート後の階層に存在しない場合、またはプロパティが存在しない場合は、コマンドは無視されます。

たとえば、以下のAnimateItemコマンドがEXAMPLE_SEQUENCERシーケンサー上で実行されていると仮定します（t = 0ms）。

{
  "type": "AnimateItem",
  "sequencer": "EXAMPLE_SEQUENCER",
  "duration": 1000,
  "easing": "linear"
  "componentId": "MyComponent"
  "repeatCount": 1,
  "value": {
    "property": "PROPERTY",
    "from": 0,
    "to": 1
    }
}

t = 500msの時点でReinflateコマンドが実行されると、EXAMPLE_SEQUENCERシーケンサーが保持されます。ドキュメントが再インフレートされ、再インフレートされたドキュメントには、idがMyComponent、バインド値がPROPERTYのコンポーネントが含まれます。MyComponentのこのプロパティの値は0.5に設定され、AnimateItemコマンドは最初の反復処理を引き続き実行します。

t = 1sの時点でコマンドの2回目の反復処理が実行されると、バインド値が0に設定され、値が1になるまでアニメーション化されます。

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

最終更新日: 2025 年 11 月 25 日