jQuery Animation扩展了Circle中的Div

Question

我不知道如何在谷歌搜索这个或者至少在这里搜索stackoverflow。也许你们有一个关于这个动画的词来搜索或者如何调用它。

无论如何，我的想法如下。你有一个简单的div，当你点击它时，从div的中心开始应该增加4个其他div，它们与点击的div有一点距离并被放置在半圆上。也许图像可以帮助你的想象力跟随我的想法：

你们有没有人知道如何编码？

编辑：从Comment添加代码，而.squadplayerinfo是扩展div，.playercard是外部div，.field是外部div

function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left + (elem.width() / 2)), 2) + Math.pow(mouseY - (elem.offset().top + (elem.height() / 2)), 2)));
}

$(document).on("mousemove", ".field", function(e) {
    var mX, mY, distance,
    $element  = $(".playercard");

    mX = e.pageX;
    mY = e.pageY;
    distance = calculateDistance($element, mX, mY);

    if(distance > 100) {
        $(".squadplayerinfo").each(function(index) {
            (index == 1 || index == 2) ? radius = 100 : radius = 75;

            angle = toRadians(360 / $(".squadplayerinfo").length * (index + 0.5) / 2);

            $(this).animate({
                opacity: 0,
                right: "+=" + calcX(angle),
                top: "+=" + calcY(angle)
            }, 750, function() {
                // done animating
            });
        });
    }
});

Answer 1

我玩了几分钟的想法，我认为这就是你要找的东西：

// javascript
var amount = $(".expand").length;
var radius = 200;

$("#trigger").click(function() {
  var x, y, angle;
  $(".expand").each(function(index) {
    angle = toRadians(360 / amount * index);
    x = calcX(angle);
    y = calcY(angle);
    $(this).animate({
      right: "-=" + x,
      top: "-=" + y
    }, 2000, function() {
      // done animating
    });
  });
});

function calcX(angleRadians) {
  return Math.floor(radius * Math.cos(angleRadians));
}

function calcY(angleRadians) {
  return Math.floor(radius * Math.sin(angleRadians));
}

function toRadians(angleDegrees) {
  return angleDegrees * Math.PI / 180;
}

/* css */

.expand {
  position: absolute;
  top: 50%;
  right: 50%;
}
#trigger {
  position: absolute;
  top: 200px;
  right: 200px;
}

<!-- html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>

<button id="trigger">click me</button>

它可以根据div的数量动态计算角度，并且可以轻松控制半径：）

希望这有帮助...祝你好运

修改

我注意到你只希望你的div传播到屏幕的上半部分，所以请改变这一行：

angle = toRadians(360 / amount * index);

到这一个：

angle = toRadians(360 / amount * (index + 0.5) / 2);

EDIT＃2

由于HansMartin编辑了他的帖子，这是一个片段，当鼠标接近div（或指定的任何其他div）时将移动div。此代码段使用this答案来检查div的接近程度。

// javascript
var amount = $(".expand").length;
var radius = 200;
var first_animation = true;

$('#check-mouse-area').mousemove(function(event) {
  if (first_animation) {
    if (isNear($(".expand"), 200, event)) {
      first_animation = false;
      var x, y, angle;
      $(".expand").each(function(index) {
        angle = toRadians(360 / amount * (index + 0.5) / 2);
        x = calcX(angle);
        y = calcY(angle);
        $(this).animate({
          right: "-=" + x,
          top: "-=" + y
        }, 2000, function() {
          // done animating
        });
      });
    }
  }
});

function calcX(angleRadians) {
  return Math.floor(radius * Math.cos(angleRadians));
}

function calcY(angleRadians) {
  return Math.floor(radius * Math.sin(angleRadians));
}

function toRadians(angleDegrees) {
  return angleDegrees * Math.PI / 180;
}

function isNear(element, distance, event) {

  var left = element.offset().left - distance,
    top = element.offset().top - distance,
    right = left + element.width() + 2 * distance,
    bottom = top + element.height() + 2 * distance,
    x = event.pageX,
    y = event.pageY;

  return (x > left && x < right && y > top && y < bottom);

}

.expand {
  position: absolute;
  top: 50%;
  right: 50%;
}
#check-mouse-area {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

<!-- html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check-mouse-area"></div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>

主要变化来自

$("#trigger").click(function () {

到

$('#check-mouse-area').mousemove(function (event) {
...
if (isNear($(".expand"), 200, event)) {

由于鼠标移动事件被称为很多，我添加了first animation布尔值，以便动画只会触发一次。