如何将事件监听器添加到动画变换旋转?

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

放宽swinglinear(默认的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>

以上是关于如何将事件监听器添加到动画变换旋转?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用事件侦听器来加载动画片段的循环

csharp Unity C#片段用于将变换旋转到新的相对旋转数秒

CSS 动画中断变换

如何在 3D 中对 QML 旋转变换进行动画处理和属性插值

CAAnimation 在一个点上进行变换旋转

使用动画变换旋转地球 svg