javascript - 我如何在 jQuery 中获取 CSS 中无限动画的当前状态

Question

<section class="viewport" id="content">
    <div class="cube rotate1 " id="test">
        <div class="front" id="ajax-container"></div>
        <div class="back"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</section>
<button type="button" class="test">Click Me!</button>

jQuery:

$(".test").on('click',function(e){
    $(".cube").addClass('paused');
});

Demo

暂停动画时如何获取立方体的当前位置？
我需要它在 jQuery 中的当前位置(rotatex、rotatey)才能从该位置执行操作。

更新:

我尝试过这个脚本:

function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform")    ||
obj.css("-ms-transform")     ||
obj.css("-o-transform")      ||
obj.css("transform");
if(matrix !== 'none') {
    var values = matrix.split('(')[1].split(')')[0].split(',');
    var a = values[0];
    var b = values[1];
    var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
return (angle < 0) ? angle + 360 : angle;

}

但我得到的数字低于 180 度。它无法正常工作。

Answer 1

您可以在元素上使用 animationstart 监听器，并根据自上次动画开始以来的过期时间计算旋转。您知道动画持续 3 秒，因此计算很简单。

Using animation events

这是你的计算:https://jsfiddle.net/yzrq367s/2/

另一个具有实时状态输出:https://jsfiddle.net/yzrq367s/3/

使用animationiteration(等待一个周期才能开始):https://jsfiddle.net/yzrq367s/6/

---

$(".test").on('click',function(e){
        $(".cube").addClass('paused');
        clearInterval(int);
        $('p').text(((new Date().getTime() - animStart.getTime()) % 3000 / 3000 * 360).toFixed(2) + " degrees");
        $('.test').hide();
  });
  
  $(".cube").get(0).addEventListener('animationstart', function(){
  	animStart = new Date();
    if(!int)
    	int = setInterval(function(){
  			$('p').text(((new Date().getTime() - animStart.getTime()) % 3000 / 3000 * 360).toFixed(2));
  		}, 10)
  })
  
var animStart;
var int;
$(".cube").addClass('running');

.menu {position: absolute; right: 20px; top: 20px; text-align: right}
.viewport {
  width: 400px;
  height: 400px;
  margin-top: 50px;
  position: relative;
  perspective-origin: 50% 50%;
  perspective: 1000px;
}

.cube {
  margin: auto;
  position: relative;
  height: 200px;
  width: 200px;
  transform-style: preserve-3d;
}

.cube div {
  position: absolute;
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  opacity: 0.9;
  background-color: #000;
  border: solid 1px #eee;
  color: #fff;
  font: 10px arial;
  transition: transform 0.2s ease-in;
}

.front {
  transform: translateZ(100px);
  overflow: hidden;
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  transform: rotateX(-270deg) translateY(-100px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(270deg) translateY(100px);
  transform-origin: bottom center;
}

@keyframes rotate1 {
  to {
    transform: rotateX(90deg) rotateY(90deg);
  }
}

@keyframes rotate2 {
  to {
    transform: rotateX(180deg) rotateY(180deg);
  }
}

@keyframes rotate3 {
  to {
    transform: rotateX(270deg) rotateY(270deg);
  }
}

@keyframes rotate4 {
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube.running {
  animation: rotate1 3s, rotate2 3s, rotate3 3s, rotate4 3s infinite linear;
  animation-fill-mode: forwards;
}

.paused {
  animation-play-state: paused !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="viewport" id="content">
  <div class="cube" id="test">

    <div class="front" id="ajax-container"></div>
    <div class="back"></div>
    <div class="right"></div>
    <div class="left"></div>
    <div class="top"></div>
    <div class="bottom"></div>

  </div>


</section>
<div class="menu">
  <button type="button" class="test">Click Me!</button>
  <p>Waiting for the animation to start</p>
</div>