Чтение информации о стиле из JavaScript API веб-анимации, средний уровень - PullRequest
Новая
       46

Чтение информации о стиле из JavaScript API веб-анимации, средний уровень

0 голосов
/ 09 февраля 2019

При наличии веб-анимации, например, приведенной здесь: https://codepen.io/arxpoetica/pen/aXqEwe

Как получить информацию о CSS или стиле, основанную на состоянии между ключевыми кадрами в любой заданный момент времени?

Пример кода: 

<div class="thing"></div>

<style>
html {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #0a2933;
}
.thing {
  height: 100px;
  width: 100px;
  background-color: orange;
}
</style>

<script>
document.querySelector('.thing').animate([
    { transform: 'rotate(0) scale(1)', backgroundColor: 'orange' },
    { transform: 'rotate(180deg) scale(3)', backgroundColor: 'blue' },
    { transform: 'rotate(360deg) scale(1)', backgroundColor: 'orange' }
], {
    duration: 3000,
    iterations: Infinity
})
</script>

ПРИМЕЧАНИЕ: этот API работает только в ограниченных браузерах / платформах.

Ответы [ 2 ]

0 голосов
/ 09 февраля 2019

WAAPI метод .animate возвращает Animation объект, который включает в себя все, что вам нужно:

Запустите фрагмент ниже: 

var keyframes = [{
    transform: 'rotate(0) scale(1)',
    backgroundColor: 'orange'
  },
  {
    transform: 'rotate(180deg) scale(3)',
    backgroundColor: 'blue'
  },
  {
    transform: 'rotate(360deg) scale(1)',
    backgroundColor: 'orange'
  }
];

var options = {
  duration: 3000,
  iterations: Infinity
};

var thing = document.querySelector('.thing');

var A = thing.animate(keyframes, options);

console.clear();


function getState() {
  if (A.playState === 'running') {
    document.querySelector('section').innerHTML += `<p>
      progress: ${getProgress()*100|0}% <br>
      transform: ${getComputedStyle(thing).transform} <br>
      backgroundColor: ${getComputedStyle(thing).backgroundColor}
    </p>`;
    //A.startTime = 0;
    A.pause();
  } else {
    A.play();
    document.querySelector('section p:last-of-type').remove();
  }
}

function getProgress() {
  return A.effect ?
    A.effect.getComputedTiming().progress :
    A.currentTime % options.duration / options.duration
}
html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #0a2933;
}

section {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 1em;
  color: silver
}

.thing {
  height: 100px;
  width: 100px;
  background-color: orange;
}
<!-- polyfill -->
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>

<section>
  <p>How do I get CSS or style information based on state between keyframes at any given point and time?</p>
  <button onclick="getState()">Click here</button>
</section>

<div class="thing"></div>

Кроме того, у WAAPI есть приятный polyfill .

Надеюсь, это поможет.

0 голосов
/ 09 февраля 2019

Вы можете использовать requestAnimationFrame для достижения ожидаемого результата, см. Как обнаружить изменения, сделанные с помощью CSS3 анимации или API веб-анимации?

...