10_7 キーフレームパラメータの書き方

Element.animate()メソッドやnew KeyflameEffect()には、キーフレームのセットを表すオブジェクト(キーフレームパラメータ)を渡します。その記述方法は２通りあります。

オブジェクト形式

アニメーションするプロパティ名をキーとし、それに対応する値の配列を値とする、キーと値のペアを含むオブジェクトの形式。

const keyframes = {
  opacity:  [ 0.5,      1,      0.5],
  fill:     [ 'white',  'red',  'yellow']
};

配列内の値の数はどれも同じにします。たとえば３つ指定すると、それぞれが0%、50%、100%に対応することになります。

配列の形式

プロパティ名をキーとし、それに対応する値を値とする、キーと値のペアのオブジェクトを含んだ配列の形式。

const keyframes = [
  { opacity:0.5, fill:'white'},
  { opacity:1,   fill:'red'},
  { opacity:0.5, fill:'yellow'}
];

どちらの方法でも、キーフレームは、指定した値の個数分だけ作成され、自動的に等分されます。たとえば５個指定すると、0%、25%、50%、75%、100%の位置に作成されます。

offsetプロパティ

等分したくない場合に使用します。次のコードでは、0、0.9、1を指定しているので、ずっとなだらかに変化し、最後急激に変化する指定となります。また、@keysframesルールと同様、イージング関数も指定できます(ただし100%時点での指定は意味がありません)。

const keyframes = {
  opacity:  [ 0.5,      1,      0.5],
  fill:     [ 'white',  'red',  'yellow'],
  easing:   ['ease',    'ease-in','ease-out'],
  offset:   [0,         0.9,    1]
};

キーフレーム情報は、KeyframeEffectReadOnlyオブジェクト(Animationのeffectプロパティ)のgetKeyframes()メソッドで取得できます。