解决方案

Question

所以我有一张两面的卡，每张卡旋转180度，它都会改变面的值。

我想做的一件事是在动画变换的旋转中添加事件侦听器，但这似乎是不可能的吗？

我要达到的目的是每180度旋转一次更改面部卡的值（前和后文本）。已经尝试过使用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
    }
  });
})

任何想法都将不胜感激。谢谢！

Answer 1

您的滑动和动画已损坏。如果您向左滑动多次，您会发现过渡无法跟上当前的旋转角度状态-使用新的输入。

解决方案

使用变量存储当前原始旋转度（-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…

使事情变得更现实

视角

将perspective: 1000px;添加到父对象有助于在 2D3D 中可视化卡片转换。

动画

放松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)}
});

速度

通过添加刷卡旋转速度来改善用户体验。这是一个函数：

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;
}

清除动画队列

要播放来回滑动，您必须使用.stop()清除动画队列：

.stop().animate({

谈话足够

// 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>

如何将事件侦听器添加到动画变换旋转中？

1 个答案:

解决方案

使事情变得更现实

视角

动画

速度

清除动画队列

谈话足够