如何将事件监听器添加到动画变换旋转？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将事件监听器添加到动画变换旋转？相关的知识，希望对你有一定的参考价值。
所以我有一张2面卡，每次卡片旋转180度时，它会改变脸部的值。
我想做的一件事是将事件监听器添加到动画转换旋转，但似乎这是不可能的？
这是小提琴：https://jsfiddle.net/4qovckd7/
我想要实现的是每转180度更改面部卡值（FRONT和BACK文本）。已经尝试过使用jquery动画步骤和进度，但我似乎无法获得正确的进度值（只返回0或1，这是动画的开始和结束）
$('.card').on('swipeleft swiperight', function (event) {
var spinValue = 5 * 180;
if (event.handleObj.type == 'swipeleft')
spinValue = spinValue * -1;
$(this).animate({
borderSpacing: spinValue
}, {
step: function (now, fx) {
$(this).css('transform', 'rotateY(' + now + 'deg)');
},
progress: function (animation, progress, msRemaining) {
//supposedly to get the progress value here
}
});
})
任何想法，将不胜感激。谢谢！
答案
您的滑动和动画都被破坏了。如果您向左滑动多次，您将看到转换无法跟进当前的度数旋转状态 - 使用新输入。
Solution
- 使用变量存储当前的原始旋转度（
-N° … 0° … N°） - 这意味着，无论您滑动多少次，该数字都会加起来（或向下）到当前组织。度。 - 使用以下公式将原始度数标准化为相对旋转度：
deg = orgDeg % 360 // This still has negatives: -360° … 0° … 360°
if ( deg < 0 ) deg += 360 // Always 0° … 360°. Now you can rotateY( deg )
- 将当前面部作为二进制
0, 1。 你可能会注意到，一张脸（比如正面）不会从0度开始！ 它开始在-90°可见（现在标准化为270）。背面也一样。它开始它“我可见！”在+90°旅行。如果你没有跟进，想象你想要在每一个回合中将一张脸改为随机图像，那么一旦表面完全面向前方，这样做会很愚蠢。 所以，当飞机的边缘面向前方时，转弯开始！这是数学：
face = round( ((deg + 90) % 360) / 360 ) // 0, 1, 0, 1, 0…
Make things a bit more realistic
Perspective
将perspective: 1000px;添加到父级，有助于可视化2D3D中的卡片转换。
Animation
放宽swing或linear（默认的jQuery .animate()缓和）不适合像一个漂亮的easeOutCubic，它最好地描述了建立自然停止的动力。
如果您不想包含整个jQuery UI库，则可以扩展$.easing
// https://github.com/gdsmith/jquery.easing
jQuery.extend(jQuery.easing, {
easeOutCubic :function(x){return 1-Math.pow(1-x,3)}
});
Speed
通过向卡片旋转添加滑动速度来改善UX。这是一个功能：
function swipeSpeed(e) {
var st = e.swipestart,
sp = e.swipestop,
time = sp.time - st.time,
a = st.coords[0] - st.coords[1],
b = sp.coords[0] - sp.coords[1],
dist = Math.sqrt( a*a + b*b );
return dist / time;
}
Clear animation queue
要播放来回滑动，您必须使用.stop()清除动画队列：
.stop().animate({
Enough talking
// https://github.com/gdsmith/jquery.easing
jQuery.extend(jQuery.easing, {
easeOutCubic: function(x) {
return 1 - Math.pow(1 - x, 3)
}
});
function swipeSpeed(e) {
var st = e.swipestart,
sp = e.swipestop,
time = sp.time - st.time,
a = st.coords[0] - st.coords[1],
b = sp.coords[0] - sp.coords[1],
dist = Math.sqrt(a * a + b * b);
return dist / time;
}
var cats = [ // cause we luw catz
"https://i.stack.imgur.com/bBGtG.jpg",
"https://i.stack.imgur.com/UzdQz.jpg",
"https://i.stack.imgur.com/MJl4g.jpg",
"https://i.stack.imgur.com/7QAyw.jpg",
"https://i.stack.imgur.com/updEN.jpg",
];
var $info = $("#info");
$(".card-wrapper").each(function() {
var $card = $(this).find(".card");
var $back = $(this).find(".card-back");
var _d = 0;
$(this).on({
'swipeleft swiperight': function(e) {
var isLeft = e.type === 'swipeleft';
var sw = Math.min(swipeSpeed(e), 10); // Math.min to prevent excessive momentum
var s = 180 * sw;
var spinDegs = _d + (isLeft ? -s : s);
spinDegs -= spinDegs % 180; // (optional) end rotation as full-face
$card.stop().animate({
sD: spinDegs
}, {
duration: 700 * sw,
easing: "easeOutCubic",
step: function(d) {
_d = d; // store now for later use
var deg = (d %= 360) < 0 ? d + 360 : d; // Degrees Normalization
$(this).css('transform', 'rotateY(' + deg + 'deg)'); // Rotate
// Extra fun!
var face = Math.round(((deg + 90) % 360) / 360);
var idx = Math.abs(Math.round(((_d + 90) / 360)) % cats.length);
$back.css({
backgroundImage: `url('${cats[idx]}')`
});
// Show info
$info.html(`
Face: ${ face }<br>
Org Degrees: ${ _d }<br>
Degrees: ${ deg }<br>
Cat image: ${ idx }
`);
}
});
}
});
});/* Flipping cards */
.card-wrapper {
width: 200px;
height: 200px;
margin: 0 auto;
perspective: 1000px;
}
.card {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
.card * {
pointer-events: none;
}
.card .card-front,
.card .card-back {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
backface-visibility: hidden;
font-size: 25px;
color: white;
background: 50% 50%/cover transparent none no-repeat;
}
.card .card-front {
transform: translate(-50%, -50%);
background-color: blue;
}
.card .card-back {
transform: translate(-50%, -50%) rotateY(180deg);
background-color: red;
}
#info {
position: absolute;
pointer-events: none;
top: 0;
left: 0;
}
/* Should all go to top but yeah I'll keep it below-the-fold for this demo*/
/* QuickReset */
* {
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font: 14px/1.4 sans-serif;
}
/* jQueryMobile resets */
[data-role="page"] {
outline: none;
}
.ui-loader {
display: none !important;
}<div class="card-wrapper">
<div class="card">
<div class="card-front"><span class="card-content">SWIPE</span></div>
<div class="card-back"><span class="card-content">:)</span></div>
</div>
</div>
<div id="info"></div>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>以上是关于如何将事件监听器添加到动画变换旋转？的主要内容，如果未能解决你的问题，请参考以下文章