在 mousemove 上旋转多组形状

Posted 2023-02-16

【中文标题】在 mousemove 上旋转多组形状

【英文标题】：Rotate multiple groups of shapes on mousemove

【发布时间】：2018-05-06 02:09:25

【问题描述】：

我有一组对角线跟随鼠标移动。

如果我在页面上只有一个组的实例，但我需要多个实例，这很好用。

当我复制 html 时，它们不会彼此独立工作，也不会产生预期的效果。

jQuery:

var dash = $(".graphic-wave__dash");
if(dash.length > 0)
  var offset = dash.offset();
  function mouse(evt)
    var center_x = (offset.left) + (dash.width()/2);
    var center_y = (offset.top) + (dash.height()/2);
    var mouse_x = evt.pageX; var mouse_y = evt.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90;
    dash.css('-moz-transform', 'rotate('+degree+'deg)');
    dash.css('-webkit-transform', 'rotate('+degree+'deg)');
    dash.css('-o-transform', 'rotate('+degree+'deg)');
    dash.css('-ms-transform', 'rotate('+degree+'deg)');
    dash.removeClass('original');
  
  $(document).mousemove(mouse);

HTML：

<div class="graphic-wave">
  <div class="graphic-wave__row">
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
  </div>
  <div class="graphic-wave__row">
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
  </div>
  <div class="graphic-wave__row">
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
  </div>
</div>

<div class="graphic-wave" style="left: 400px;">
  <div class="graphic-wave__row">
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
  </div>
  <div class="graphic-wave__row">
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
  </div>
  <div class="graphic-wave__row">
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
    <div class="graphic-wave__dash original"></div>
  </div>
</div>

https://jsfiddle.net/ob80/7nxf07vo/3/

谁能帮忙？

【问题讨论】：

您正在选择具有.graphic-wave__dash 类的每个元素，然后对每个元素应用相同的效果。您需要按行/行组计算它，可能使用 jQuery 的 .each() 并使用 $(this) 在函数中选择相关行。

【参考方案1】：

您需要分别计算每条线的旋转，此时您正在制定一种旋转样式并将其应用于具有graphic-wave__dash 类的每个元素。

Here's a quick example我没有做任何优化，这可能效率很低。 （我没有把它放到一个 sn-p 中，因为它看起来 SO 不支持 SCSS）

var dash = $(".graphic-wave__dash");
if (dash.length > 0) 

  function mouse(evt) 
    dash.each(function()  // Calculate per element, not just once
      var offset = $(this).offset(); // Workout the offset per element
      var center_x = (offset.left) + ($(this).width() / 2); // Use $(this) to reference the current element
      var center_y = (offset.top) + ($(this).height() / 2);
      var mouse_x = evt.pageX;
      var mouse_y = evt.pageY;
      var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
      var degree = (radians * (180 / Math.PI) * -1) + 90;
      $(this).css('-moz-transform', 'rotate(' + degree + 'deg)');
      $(this).css('-webkit-transform', 'rotate(' + degree + 'deg)');
      $(this).css('-o-transform', 'rotate(' + degree + 'deg)');
      $(this).css('-ms-transform', 'rotate(' + degree + 'deg)');
      $(this).removeClass('original');
    );
  
  $(document).mousemove(mouse);

所做的更改是：

在函数内部，使用您的类遍历每个元素 计算每个元素的偏移量，而不是全部基于该类的第一个实例

【讨论】：

就是这样！感谢您的示例:)

嗨@ob80，请检查我的性能改进答案below

【参考方案2】：

我通过将所有项目的center_x 和center_y 设置为属性，提高了DBS answer 的性能，因此不必每次都计算：

var dash = $(".graphic-wave__dash");
if (dash.length > 0) 

    dash.each(function() 
      var offset = $(this).offset();
      $(this).attr('center_x',(offset.left) + ($(this).width() / 2));
      $(this).attr('center_y',(offset.top) + ($(this).height() / 2));
  );

  function mouse(evt) 
    dash.each(function() 
      var mouse_x = evt.pageX;
      var mouse_y = evt.pageY;
      var radians = Math.atan2(mouse_x - $(this).attr('center_x'), mouse_y - $(this).attr('center_y'));
      var degree = (radians * (180 / Math.PI) * -1) + 90;
      $(this).css('-moz-transform', 'rotate(' + degree + 'deg)');
      $(this).css('-webkit-transform', 'rotate(' + degree + 'deg)');
      $(this).css('-o-transform', 'rotate(' + degree + 'deg)');
      $(this).css('-ms-transform', 'rotate(' + degree + 'deg)');
      $(this).removeClass('original');
    );
  
  $(document).mousemove(mouse);

这里是小提琴：https://jsfiddle.net/7nxf07vo/6/

【讨论】：

如果您要进行优化，您还可以改进其他一些事情：鼠标位置变量不需要在循环内。您可能会放弃弧度/度数转换，因为 CSS 转换应该接受带有后缀 rad 而不是 deg 的弧度。

@DBS 嗯，主要的性能杀手是位置计算。 deg 计算依赖于单个数学运算，到目前为止，小提琴的工作非常有效。

确实，只是放弃了一些其他可能的调整:)