DOM：Animation.playState プロパティ

アニメーション Animation の再生状態を表す文字列を取得／設定（¶）します。

注：このプロパティは、CSS アニメーションとトランジションでは読み取り専用です。

構文

値

`Animation`	Animation

idle	アニメーションの現在の時間は未解決であり、保留中のタスクはありません。
running	アニメーションが実行されます。
paused	アニメーションが中断され、Animation.currentTime プロパティが更新されていません。
finished	アニメーションが境界の 1 つに到達し、Animation.currentTime プロパティが更新されていません。

以前、Web アニメーションは、再生の開始などの非同期操作がまだ完了していないことを示す保留値を定義しました。これは、別の Animation.pending プロパティによって示されるようになりました。

例

mdnより

「」の例では、プレイヤーは「」というエンディングを得ることができます。ゲームで、パフォーマンス上の理由から、涙は、目に見えるときだけアニメーション化する必要があります。したがって、次のようにアニメーション化されたらすぐに一時停止する必要があります。

HTML： ¶省く

CSS： ¶省く

JavaScript：「Growing/Shrinking Alice Game」

詳細var cake = document.getElementById('eat-me');
var bottle = document.getElementById('bottle');

// Keyframes for bouncing the controls
var tryMeKeys = [
  { transform: 'translateY(0) scale(1, 1) rotate(0)', easing: 'ease-in' },
  { transform: 'translateY(0) scale(1.1, .9) rotate(0)' },
  { transform: 'translateY(-10%) scale(.9, 1.1) rotate(0)', offset: .4 },
  { transform: 'translateY(-10%) scale(1, 1) rotate(10deg)', offset: .5 },
  { transform: 'translateY(-10%) scale(1, 1) rotate(-10deg)', offset: .7 },
  { transform: 'translateY(-10%) scale(1,1) rotate(0deg)', offset: .8, easing: 'ease-in' },
  { transform: 'translateY(0) scale(1, 1) rotate(0)' }
];

// Functions that animates the cake and bottle
function trytheCake(){
  cake.animate(tryMeKeys, { id: 'bounce', delay: 7000, duration: 2000, iterations: 2 });
}
trytheCake();
trytheCakeTimer = setInterval(trytheCake, 12000);

function trytheBottle(){
  bottle.animate(tryMeKeys, { id: 'bounce', duration: 2000, iterations: 2 }); 
}
trytheBottleTimer = setInterval(trytheBottle, 12000);  

// Growing and shrinking Alice
var aliceChange = document.getElementById('alice').animate(
  [
    { transform: 'translate(-50%, -50%) scale(.5)' },
    { transform: 'translate(-50%, -50%) scale(2)' }   
  ], { 
    duration: 8000, 
    easing: 'ease-in-out', 
    fill: 'both'
  });

aliceChange.pause();
aliceChange.currentTime = aliceChange.effect.timing.duration / 2 ;

var stopPlayingAlice = function() {
  aliceChange.pause();
  nommingCake.pause();
  drinking.pause();
};

var ponytail = document.getElementById('ponytail');
var ponytailTiming = {
  duration: 250, 
  direction: 'alternate',
  iterations: 2
}

var nommingCake = document.getElementById('eat-me_sprite').animate(
[
  { transform: 'translateY(0)' },
  { transform: 'translateY(-80%)' }   
], {
  fill: 'forwards',
  easing: 'steps(4, end)',
  duration: aliceChange.effect.timing.duration / 2
});
nommingCake.pause();

var growAlice = function() {
  aliceChange.playbackRate = 1;
  aliceChange.play();
  // stop jiggling the cake.
  clearInterval(trytheCakeTimer);
  if (cake.getAnimations()[0]){
    cake.getAnimations()[0].cancel();
  }

  nommingCake.play();
  
  ponytail.animate(
  [
    { transform: 'scale(1, 1) rotate(0)' },
    { transform: 'scale(.85, 1.15) rotate(2deg)', easing: 'cubic-bezier(.35,.97,.13,1.14)' }   
  ], ponytailTiming);
  
}

var drinking = document.getElementById('liquid').animate(
[
  { height: '100%' },
  { height: '0' }   
], {
  fill: 'forwards',
  duration: aliceChange.effect.timing.duration / 2
});
drinking.pause();

var shrinkAlice = function() {
  aliceChange.playbackRate = -1;
  aliceChange.play();
  // stop jiggling the bottle.
  clearInterval(trytheBottleTimer);
  if (bottle.getAnimations()[0]){
    bottle.getAnimations()[0].cancel();
  }

  drinking.play()

  ponytail.animate(
  [
    { transform: 'scale(1,1) rotate(0)' },
    { transform: 'scale(1.15, .85) rotate(2deg)', easing: 'cubic-bezier(.35,.97,.13,1.14)' } 
  ], ponytailTiming);
}

// On tap or click, Alice will change size.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
cake.addEventListener("mouseup", stopPlayingAlice, false);
cake.addEventListener("mouseout", stopPlayingAlice, false);
cake.addEventListener("touchend", stopPlayingAlice, false);


bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);
bottle.addEventListener("mouseup", stopPlayingAlice, false);
bottle.addEventListener("mouseout", stopPlayingAlice, false);
bottle.addEventListener("touchend", stopPlayingAlice, false);


// When either drink me or eat me animations finish, the game is "over."
// You get a different ending depending on how big or small Alice is
// (that is to say how far along her animation timeline is!)
var endGame = function() {
  // get Alice's timeline's playhead location
  var alicePlayhead = aliceChange.currentTime;
  var aliceTimeline = aliceChange.effect.activeDuration;
  
  stopPlayingAlice();

  // depending on which third it falls into
  var aliceHeight = alicePlayhead/aliceTimeline;

  if (aliceHeight <= .333){
    // Alice got smaller!
    showEndings.play();
    showSmall.play();
    exclaming.play();
    armWave.play();
    aliceShrank.play();
    bringUI.effect.timing.delay = 2000;
    bringUI.play();
  } else if (aliceHeight >= .666) {
    // Alice got bigger!
    showEndings.play();
    showCrying.play();
    pool.play();
    tears.forEach(function(el) {  
      el.playState = 'playing';
    });
    bringUI.effect.timing.delay = 2000;
    bringUI.play();
  } else {
    // Alice didn't change significantly    
    bringUI.effect.timing.delay = 0;
    bringUI.play();
  }
  
}

// When the cake or runs out... 
nommingCake.onfinish = endGame;
drinking.onfinish = endGame;

// ...or Alice reaches the end of her animation
aliceChange.onfinish = endGame;

// Reset the 3 animations: alice, the bottle, and the cupcake
var restartGame = function() {
  aliceChange.currentTime = aliceChange.effect.timing.duration / 2;  
  nommingCake.currentTime = 0;
  drinking.currentTime = 0;
}

/* Crying Ending */
var tearsFalling = [
  { transform: 'translate3D(0, 0, 0)' }, 
  { transform: 'translate3D(0, 2850%, 0)' }, 
];

var getRandomMsRange = function(min, max) {
  return Math.random() * (max - min) + min;
}

var tears = document.querySelectorAll('.tear');
tears = Array.prototype.slice.call(tears);

var pool = document.getElementById("pool").animate(
[
  { transform: 'scale(.8)' }, 
  { transform: 'scale(1)' }, 
], 
{
  duration: 10000,
  fill: 'forwards'
});
pool.pause();

tears.forEach(function(el) {  
  el.animate(
    tearsFalling, 
    {
      delay: getRandomMsRange(-1000, 1000), // randomized for each tear
      duration: getRandomMsRange(2000, 6000), // randomized for each tear
      iterations: Infinity,
      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
    });
  el.playState = 'paused';
});

/* Small Ending */
var omgDuration = 600;

var exclaming = document.getElementById("exclaim").animate(
  [  
    { opacity: 0 }, 
    { opacity: 1 },
    { opacity: 1 }
  ], 
  {
    easing: 'steps(2, end)',
    iterations: Infinity,
    direction: 'alternate',
    duration: omgDuration
  }
);
exclaming.pause();

var armWave = document.getElementById("alice_arm").animate([  
    { transform: 'rotate(10deg)' }, 
    { transform: 'rotate(-40deg)' }
  ], 
  {
    easing: 'steps(2, end)',
    iterations: Infinity,
    direction: 'alternate',
    duration: omgDuration
  }
);
armWave.pause();

var aliceShrank = document.getElementById("alice_too-small").animate([  
    { transform: 'translateX(-50%) scale(1.1)' }, 
    { transform: 'translateX(-50%) scale(1)' }
  ], 
  {
    easing: easeOut,
    duration: 600,
    fill: 'forwards'
  }
);
aliceShrank.pause();

/* Ending UI */
/* Pull #learn-more into space when  */
var learnMoreButton = document.getElementById("learn-more_button");

var seeLearnMore = document.getElementById("ending-ui_panels").animate([
  { opacity: 1, transform: 'translateX(0)'}, 
  { opacity: 0, transform: 'translateX(0)', offset: .33 }, 
  { opacity: 0, transform: 'translateX(-66.67%)', offset: .66},
  { opacity: 1, transform: 'translateX(-66.67%)'}
], {
  duration: 400,
  easing: 'cubic-bezier(0.23, 1, 0.32, 1)',
  fill: 'forwards'
});
seeLearnMore.pause();

var learnMore = function(e) {
  e.preventDefault();
  seeLearnMore.play();
}

learnMoreButton.addEventListener("click", learnMore);
learnMoreButton.addEventListener("touchStart", learnMore);

// hide content 
var hide = function(element) {
  element.style.pointerEvents = 'none';
}

// set animation back at the start then pause
var resetAnimation = function(animation) {
  animation.currentTime = 0;
  animation.pause();
}

/* Buttons reset the page's interactions. */
var easeIn = "cubic-bezier(0.755, 0.05, 0.855, 0.06)";
var easeOut = "cubic-bezier(0.23, 1, 0.32, 1)";
var durationFade = 300;
var keysFade = [
  { opacity: 0 },
  { opacity: 1 }
];
var timingFade = {
  duration: durationFade,
  fill: "forwards",
  easing: easeIn  
}

var timingFadeDelayed = {
  duration: durationFade,
  fill: "forwards",
  easing: easeIn,
  delay: durationFade
}

var showEndings = document.getElementById("endings").animate(keysFade, timingFade);
showEndings.pause();

var showCrying = document.getElementById("end-in-tears").animate(keysFade, timingFadeDelayed);
showCrying.pause();

var showSmall = document.getElementById("end-too-small").animate(keysFade, timingFadeDelayed);
showSmall.pause();

var endingUI = document.getElementById("ending-ui");
var bringUI = endingUI.animate(keysFade, timingFade);
bringUI.pause();
hide(endingUI);

bringUI.onfinish = function() {
  endingUI.style.pointerEvents = 'auto';
};

var resetAllTheThings = function() {
  resetAnimation(seeLearnMore);
  resetAnimation(drinking);
  resetAnimation(nommingCake);
  resetAnimation(showCrying);
  resetAnimation(showSmall);
  resetAnimation(showEndings);
  resetAnimation(exclaming);
  resetAnimation(armWave);
  resetAnimation(aliceShrank);
  resetAnimation(pool);
  tears.forEach(function(el) {  
    el.playState = "paused";
    el.currentTime = 0;
  });
  resetAnimation(bringUI);
  hide(endingUI);
  aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
  aliceChange.pause();
}

Array.prototype.forEach.call(document.getElementsByClassName("play-again"), function(button) {
  button.addEventListener("click", resetAllTheThings);
  button.addEventListener("touchStart", resetAllTheThings);
});

new Animation() 使用、と playState

HTML：

<DIV id=IdTest style="width:1em">■</DIV>
<BUTTON id=IdSaisei>再生</BUTTON>
<BUTTON id=IdItijiteisi>一時停止</BUTTON><BR>
<SPAN id=IdLog></SPAN>

JavaScript：

KF=new KeyframeEffect(  //キーフレームの指定：
  IdTest, 
  [
    {transform:'translateX(0)'}, {transform:'translateX(200px)'}  //X軸移動。
  ], 
  {duration:3000, fill:'forwards'}  //3000ms掛けて、？。
);
Ani=new Animation(KF, document.timeline);  //アニメーション再生。

function JobPlay(){  //「再生」ボタンが押された時の処理：
  Ani.play();        //アニメーション再生。
}
function JobPause(){ //「一時停止」ボタンが押された時の処理：
  Ani.pause();       //アニメーション一時停止。
}
IdSaisei.onclick=JobPlay;      //ボタンにイベント割り当て。
IdItijiteisi.onclick=JobPause; //ボタンにイベント割り当て。
function Job(){  //タイマー監視の処理：
  IdLog.innerHTML="Ani.playState："+Ani.playState;  //表示。
//  D=Ani.playState;  //＝[string]：finished。アニメーション終了後の取得値。
}
setInterval(Job, 500);  //0.5秒毎のタイマー監視割り当て。

JavaScript：設定。

Ani.playState="idle"; 
D=Ani.playState;  //＝[string]：finished。サンプル値。

どうやっても設定はできないようです。これは Web アニメーションではないのだろうか？。

→KeyframeEffect()、CSS：transform。CSS：translateX()。duration、fill。

→play()、pause()。click、setInterval()。

DOM

Animation.playState プロパティ

構文

値

例

mdnより

new Animation() 使用、と playState

Element.animate() 使用、と playState

テスト

DOM

DW("インターフェイス")

Animation.playState プロパティ

構文

値

例

mdnより

new Animation() 使用、と playState

Element.animate() 使用、と playState

テスト