计算新位置后旋转

Question

我无法将 div 帖子旋转居中。

这是我的小提琴：https://jsfiddle.net/cfy2ztdz/

使用键盘 1 和 2 在幻灯片之间移动

您可以看到它在没有旋转的情况下完美地找到了中间，但是旋转后，移回 1，移出页面 - 而不是回到中间。

我的数学哪里出错了？

这是最相关的代码：

var windowWidth = $(window).width();
var windowHeight = $(window).height();

var winOriginX = windowWidth/2;
var winOriginY = windowHeight/2;

document.onkeypress = function(evt) {
      evt = evt || window.event;
      var charCode = evt.keyCode || evt.which;
      var charStr = String.fromCharCode(charCode);

      var slideWidth = $('#slide'+charStr).width();
      var slideHeight = $('#slide'+charStr).height();

      var slideXPos = $('#slide'+charStr).position().left;
      var slideYPos = $('#slide'+charStr).position().top;

      var originX = slideXPos + slideWidth/2;
      var originY = slideYPos + slideHeight/2;

      var xPos = winOriginX - slideXPos - slideWidth/2;
      var yPos = winOriginY - slideYPos - slideHeight/2;

      var rotation = 0;

      if($('#slide'+charStr).attr('slider-rotate')) {
        rotation = $('#slide'+charStr).attr('slider-rotate');
      }
      else {
        rotation = 0;
      }

      var nextRotation = rotation;


      $('#viewport').velocity({scaleX: "50%", scaleY: "50%", translateZ:0, rotateZ: nextRotation + "deg"},{duration: 1000, easing: 'easeInOutSine'});

      slideXPos = $('#slide'+charStr).position().left;
      slideYPos = $('#slide'+charStr).position().top;

      xPos = winOriginX - slideXPos - slideWidth/2;
      yPos = winOriginY - slideYPos - slideHeight/2;



      $('#slides').velocity({left: xPos + 'px', top: yPos + 'px', translateZ:0},{duration: 1000, easing: 'easeInOutSine'});
      $('#viewport').velocity({scaleX: "100%", scaleY: "100%", translateZ:0},{duration: 1000, easing: 'easeInOutSine'});

 }

还有 HTML

  <div id="slides">

      <div id="slide1" class="slide" style="top: 300px; left: 100px; background: url('Andy.jpg');"></div>
      <div id="slide2" class="slide" style="top: 300px; left: 600px; background: transparent" slider-rotate="-75">
        <div style="width: 300px; height: 300px; background: url('Woody.jpg'); transform-origin: 50% 50%; transform: rotate(75deg)"></div>
      </div>

  </div>

Answer 1

问题是旋转后新的目标 x/y 值是根据旋转位置计算的。您可以在启动时在每张幻灯片内缓冲视口的目标中心 x/y 位置，并在向中心点设置动画时重复使用这些位置。在此示例中，我使用 jquery 数据来存储值：

Fiddle

脚本：

    $(document).ready(function() {
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();

        var winOriginX = windowWidth/2;
        var winOriginY = windowHeight/2;
            $('#viewport').css('width',windowWidth).css('height',windowHeight);
      $('body').append('<div style="position: absolute; top:' + winOriginY + 'px; left:' + winOriginX + 'px; width: 5px; height: 5px; background: #000; z-index: 99999;"></div>');



        $('.slide').each(function(i,sl){
          var slide = $(sl);
          var slideWidth = slide.width();
          var slideHeight = slide.height();           
          var slideXPos = slide.position().left;
          var slideYPos = slide.position().top;

          var xPos = winOriginX - slideXPos - slideWidth/2;
          var yPos = winOriginY - slideYPos - slideHeight/2;

            slide.data('X', xPos);
            slide.data('Y', yPos);
        });

    });

   document.onkeypress = function(evt) {

       evt = evt || window.event;
       var charCode = evt.keyCode || evt.which;
       var charStr = String.fromCharCode(charCode);
       var slide =$('#slide'+charStr);             
       if(slide.length === 0)return; 

       var xPos = slide.data('X');
       var yPos =slide.data('Y');
       var rotation = slide.attr('slider-rotate');
       if(!rotation)rotation= 0;

       $('#viewport').velocity({scaleX: "50%", scaleY: "50%", translateZ:0, rotateZ: rotation + "deg"},{duration: 1000, easing: 'easeInOutSine', });   


       $('#slides').velocity({left: xPos + 'px', top: yPos + 'px', translateZ:0},{duration: 1000, easing: 'easeInOutSine'});

      $('#viewport').velocity({scaleX: "100%", scaleY: "100%", translateZ:0},{duration: 1000, easing: 'easeInOutSine'});

   }