javascript - 使用 .animate() 在 div 之间画线

问题描述

我有一个随机点生成器，它在屏幕上产生随机数量的点。我正在尝试使用 .animate() 连接这些点。我不认为使用关键帧是可行的，因为点的连接方式必须根据数字的不同而不同。这里有一些代码可以阐明这种情况：

$(document).ready(function() {

// This is the number of dots to be shown
const randomDotArray = [3, 4, 5, 6, 7, 8, 9];
const randomDotGenerator = Math.floor(Math.random() * randomDotArray.length);

//This gets back a random value from the randomDotArray
const randomNumberOfDots = randomDotArray[randomDotGenerator];

console.log(randomNumberOfDots, 'this is the number of dots that are 
appearing this time');

// defining the variables
const dot1 = $('.div1');
const dot2 = $('.div2');
const dot3 = $('.div3');
const dot4 = $('.div4');
const dot5 = $('.div5');
const dot6 = $('.div6');
const dot7 = $('.div7');
const dot8 = $('.div8');
const dot9 = $('.div9');

// hiding dots
dot1.hide();
dot2.hide();
dot3.hide();
dot4.hide();
dot5.hide();
dot6.hide();
dot7.hide();
dot8.hide();
dot9.hide();

// Getting the center of each dot
const dot1Offset = dot1.offset();
const dot2Offset = dot2.offset();
const dot3Offset = dot3.offset();
const dot4Offset = dot4.offset();
const dot5Offset = dot5.offset();
const dot6Offset = dot6.offset();
const dot7Offset = dot7.offset();
const dot8Offset = dot8.offset();
const dot9Offset = dot9.offset();

const dot1Width = dot1.width();
const dot2Width = dot2.width();
const dot3Width = dot3.width();
const dot4Width = dot4.width();
const dot5Width = dot5.width();
const dot6Width = dot6.width();
const dot7Width = dot7.width();
const dot8Width = dot8.width();
const dot9Width = dot9.width();

const dot1Height = dot1.height();
const dot2Height = dot2.height();
const dot3Height = dot3.height();
const dot4Height = dot4.height();
const dot5Height = dot5.height();
const dot6Height = dot6.height();
const dot7Height = dot7.height();
const dot8Height = dot8.height();
const dot9Height = dot9.height();

// X co-ordinate of dot
const dot1CenterX = dot1Offset.left + dot1Width / 2;
const dot2CenterX = dot2Offset.left + dot2Width / 2;
const dot3CenterX = dot3Offset.left + dot3Width / 2;
const dot4CenterX = dot4Offset.left + dot4Width / 2;
const dot5CenterX = dot5Offset.left + dot5Width / 2;
const dot6CenterX = dot6Offset.left + dot6Width / 2;
const dot7CenterX = dot7Offset.left + dot7Width / 2;
const dot8CenterX = dot8Offset.left + dot8Width / 2;
const dot9CenterX = dot9Offset.left + dot9Width / 2;

// Y co-ordinate of dot
const dot1CenterY = dot1Offset.top + dot1Height / 2;
const dot2CenterY = dot2Offset.top + dot2Height / 2;
const dot3CenterY = dot3Offset.top + dot3Height / 2;
const dot4CenterY = dot4Offset.top + dot4Height / 2;
const dot5CenterY = dot5Offset.top + dot5Height / 2;
const dot6CenterY = dot6Offset.top + dot6Height / 2;
const dot7CenterY = dot7Offset.top + dot7Height / 2;
const dot8CenterY = dot8Offset.top + dot8Height / 2;
const dot9CenterY = dot9Offset.top + dot9Height / 2;

console.log(dot1CenterX, dot1CenterY);

// runs setPosition to make dots appear
$('.generate').click(function() {
  setPosition();
});

// I want to add the line animation here in the case statements
function setPosition() {
  switch (randomNumberOfDivs) {
    case 3:
      dot1.show();
      dot4.show();
      dot7.show();
      break;
    case 4:
      dot1.show();
      dot4.show();
      dot7.show();
      dot8.show();
      break;
    case 5:
      dot1.show();
      dot3.show();
      dot4.show();
      dot5.show();
      dot6.show();
      break;
    case 6:
      dot1.show();
      dot2.show();
      dot3.show();
      dot4.show();
      dot5.show();
      dot6.show();
      break;
    case 7:
      dot1.show();
      dot2.show();
      dot3.show();
      dot4.show();
      dot5.show();
      dot6.show();
      dot7.show();
      break;
    case 8:
      dot1.show();
      dot2.show();
      dot3.show();
      dot4.show();
      dot5.show();
      dot6.show();
      dot7.show();
      dot8.show();
      break;
    case 9:
      dot1.show();
      dot2.show();
      dot3.show();
      dot4.show();
      dot5.show();
      dot6.show();
      dot7.show();
      dot8.show();
      dot9.show();
  }
}


});

我开始获取点的中心，因为我认为这是我应该从动画开始的地方

jsfiddle：小提琴

标签： javascriptjquerysvg

javascript - 使用 .animate() 在 div 之间画线

问题描述

解决方案

推荐阅读