我有一个圆形动画,其中深蓝色的圆圈出现在随机位置并展开。当这些扩展的圆圈大约覆盖屏幕的一半时,扩展圆圈的颜色变为浅蓝色。您可以在此处查看动画:https://rimildeyjsr.github.io/spotify-circle-animation/
过了一会儿,动画变得有点乱,不同颜色的圆圈随机出现。为了获得平滑的动画,当交换颜色时,我认为较新的圆圈应该与旧的圆圈出现在同一个地方。
这是我现在的代码:
CSS:
.initial-div {
width: 1000px;
height: 1000px;
transform: scale(0);
}
.position-div{
position: absolute;
border-radius: 50%;
display: none;
}
.section {
overflow-y: hidden;
}
.animate {
-webkit-animation: expand 100s;
}
@-webkit-keyframes expand {
0%{
-webkit-transform: scale(0,0);
}
100%{
-webkit-transform: scale(1,1);
}
}
jQuery的:
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
var circles = [];
function makeDiv(color){
var divsize = 1000;
$newdiv = $('<div/>').addClass('initial-div').css({
'background-color': color
});
var posx = (Math.random() * ($('.section').width()) - (divsize / 2)).toFixed();
var posy = (Math.random() * ($('.section').height()) - (divsize / 2)).toFixed();
var circle = {
x : posx,
y : posy
};
$newdiv.addClass('position-div').css({
'left':posx+'px',
'top':posy+'px'
}).appendTo("#fullpage").addClass('animate').css({'display':'block'}).one(animationEnd,function(){
$(this).remove();
});
}
$(document).ready(function(){
var colorArray = ['#11256c','#24ccdf'];
var i= 0,flag=0;
var color = colorArray[i];
setInterval(function(){
flag++;
makeDiv(color);
if (flag == 10){
color = colorArray[i];
i++;
if (i == 2) {
i = 0;
}
flag=0;
}
},2000);
});
我认为我们需要一个具有旧圆圈的x和y位置的对象数组,但我不确定如何适应该函数。有人可以帮忙吗?
答案 0 :(得分:1)
你可以这样做,只需填充圆形数组,并为每次迭代采用相同的坐标
var circles = [];
function makeDiv(color, index){
$newdiv = $('<div/>').addClass('initial-div').css({
'background-color': color
});
// access the coordinates with index so for each iteration they will be the same
$newdiv.addClass('position-div').css({
'left':circles[index].x+'px',
'top':circles[index].y+'px'
}).appendTo("#fullpage").addClass('animate').css({'display':'block'}).one(animationEnd,function(){
$(this).remove();
});
}
$(document).ready(function(){
// populate your circles array with randomm coordinates
for (var i = 0; i < 11; i++) {
var divsize = 1000;
var circle = {
x : (Math.random() * ($('.section').width()) - (divsize / 2)).toFixed(),
y : (Math.random() * ($('.section').height()) - (divsize / 2)).toFixed()
};
circles.push(circle);
}
var colorArray = ['#11256c','#24ccdf'];
var i= 0,flag=0;
var color = colorArray[i];
setInterval(function(){
// pass the index (flag)
makeDiv(color, flag);
flag++;
if (flag == 10){
color = colorArray[i];
i++;
if (i == 2) {
i = 0;
}
flag=0;
}
},2000);
});
这将是您的问题的答案但我不认为这会减少性能问题,您需要在一些迭代后删除圆圈