<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');
});
暂停动画时如何获取立方体的当前位置?
我需要它在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度以下。它无法正常工作。
您可以animationstart
在元素上使用一个侦听器,然后从该位置开始根据自上一个动画开始以来已到期的时间旋转。您知道动画会持续3秒钟,因此计算很简单。
这是计算的小提琴: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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句