我有一个随机点生成器,它会在屏幕上生成随机数量的点。我正在尝试使用.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:fiddle