キーフレームは、特定の時点での特定のプロパティ値を定義し、それらの間で補間を行い、スムーズなアニメーションを作成します。
| プロパティ | タイプ | 必須 | 例 | 値の範囲 | 説明 |
|---|---|---|---|---|---|
| id | string | true | - | - | キーフレームのユニーク識別子。 |
| time | number | true | - | - | キーフレームが発生する時間（要素の開始時間に対する相対的な秒数）。 |
| stateObj | object | true | - | - | このキーフレームでのプロパティ値を含む状態オブジェクト。x、y、回転、scaleX、scaleY、アルファなど、アニメート可能なプロパティを含めることができます。 |
| cp1 | object | false | - | - | ベジエ曲線のイージングのための最初の制御ポイント。座標は正規化されています（0-1 範囲）。例: {x: 0.25, y: 0.1} |
| cp2 | object | false | - | - | ベジエ曲線のイージングのための2番目の制御ポイント。座標は正規化されています（0-1 範囲）。例: {x: 0.25, y: 1} |
cp1 および cp2 プロパティは、キーフレーム間のカスタムイージングのための三次ベジエ曲線を定義します。
cp1: {x: 0.42, y: 0}, cp2: {x: 0.58, y: 1}cp1: {x: 0.42, y: 0}, cp2: {x: 1, y: 1}cp1: {x: 0, y: 0}, cp2: {x: 0.58, y: 1}{
"id": "39ecb75a-3490-43bd-84c2-72366c2f39f2",
"type": "Image",
"start": 0,
"duration": 5,
"trackIndex": 0,
"x": 0,
"y": 0,
"blendMode": "normal",
"anchorX": 1302,
"anchorY": 2312,
"rotation": 0,
"scaleX": 0.23356401384083045,
"scaleY": 0.23356401384083045,
"alpha": 1,
"skewX": 0,
"skewY": 0,
"keyframes": [
{
"id": "800350bd-4a24-4440-904c-ec08a8159508",
"time": 0,
"stateObj": {
"alpha": 0
},
"cp1": {
"x": 0.25,
"y": 0.1
},
"cp2": {
"x": 0.25,
"y": 1
}
},
{
"id": "ce3f9b10-2b9e-4266-8cdb-77167f9f16aa",
"time": 3,
"stateObj": {
"alpha": 1
},
"cp1": {
"x": 0.25,
"y": 0
},
"cp2": {
"x": 0.25,
"y": 0.9
}
}
],
"externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
"ext": "jpeg"
}
要素に複数のアニメーションメソッドが適用されている場合:
keyframes 配列で定義) - 標準のプロパティアニメーションanimations 配列内) - 表現、パス、シーケンスなどの高度なアニメーション同じプロパティが複数のメソッドでアニメーションされた場合、優先順位は次の通りです:
これにより、高度なアニメーションが必要に応じてキーフレーム値をオーバーライドできます。
time 値は、要素の start 時間に対して相対的であり、絶対的なタイムライン時間ではありません。stateObj に含めることで複数のプロパティを同時にアニメートできます。cp1 と cp2 のベジエ制御ポイントによって定義されます。fill、stroke など）は RGB 空間で補間されます。