element.animate(keyframe, option)

animateメソッドの引数について

第一引数

第一引数には、@keyframes的な感じの配列を指定する。デモ

element.animate([
    { top: "0", left: "0" },
    { top: "50px", left: "50px" },
    { top: "0", left: "100px" }
], option);

また、@keyframesでいう、アニメーションの中で指定したキーフレームが発生する時間（from,to,%）はoffsetキーを使用する。デモ

element.animate([
    { top: "0", left: "0" },  //自動的にoffset: 0
    { top: "50px", left: "50px", offset: 1/10 },
    { top: "0", left: "100px" }    //自動的にoffset: 1
], option);

第二引数

第二引数に数値を指定した場合は、animation-durationの値になる。

element.animate([
  {cssProperty: value},
  {cssProperty: value},
  {cssProperty: value}
], 1000);

より詳細に指定するためには、第二引数にオブジェクトを指定する

element.animate([
  {cssProperty: value},
  {cssProperty: value},
  {cssProperty: value}
], {
    duration: 3000,
    delay: 1000,
    iterations: 3,
    direction: "alternate",
    easing: "steps(10)",
    fill: "none"
});

オプションでは、以下を指定できる。

• duration
• delay
• endDelay
• fill
• iterations
• iterationStart
• duration
• playbackRate
• direction
• easing

お気付きの通り、大体はCSS Animationのものを指定できる。詳しくは、5.4.1 Attributesを参考にしてね。

アニメーションの終了を検知する

3秒後にアラートされる。

デモ

var block = document.querySelector('.block');
var player = block.animate([
    { left: "0" },
    { left: "100px" }
], {
    duration: 3000,
    easing: "ease-in"
});
player.onfinish = function(){
    alert('done!');
}

ちなみにonfinishの部分は

player.addEventListener('finish', function(){
    alert('done!');
}, false);

addEventListenerでもよい

とりあえず止めてみた

キャンセルボタンをクリックするとアニメーションが終了する。

デモ

<div class="block"></div>
<button id="animate">アニメーションを作成する</button>
<button id="cancel">player.cancel()</button>

var block, player;
document.querySelector('#animate').addEventListener('click', function(){
    block = document.querySelector('.block');
    player = block.animate([
        { left: "0" },
        { left: "100px" }
    ], {
        duration: 3000,
        easing: "ease-in"
    });
});
document.querySelector('#cancel').addEventListener('click', function(){
    player.cancel();
});

cancelすると、アニメーション完了後の状態になる

cancelした時にも、onfinishが呼ばれる。

デモ

var block, player;
document.querySelector('#animate').addEventListener('click', function(){
    block = document.querySelector('.block');
    player = block.animate([
        { left: "0" },
        { left: "100px" }
    ], {
        duration: 3000,
        iterations: 1,
        easing: "ease-in",
        fill: "forwards"
    });
    player.addEventListener('finish', function(){
        alert('done!');
    }, false);
});

document.querySelector('#cancel').addEventListener('click', function(){
    player.cancel();
});