动画中的不同步
我正在编写一个页面,该页面将CSS top
和left
属性递增,以便模拟两颗星围绕按钮移动的动画。我计算了测量值,起初看起来很好。然而,几分钟后,恒星变得不同步,并且不会同时改变动画。他们应该同时到达角落。有人可以解释为什么这是,我怎么能解决它?我的jsfiddle是在这里:https://jsfiddle.net/MCBlastoise/1503x4tr/12/动画中的不同步
这里是我的代码:
body {
\t margin:0px;
}
.heading {
\t text-align:center;
\t font-family:'Bungee Shade', Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
\t color:green;
\t font-weight:bold;
\t font-size:30px;
\t margin-top:0px;
}
.text {
\t color:red;
\t font-family:'Josefin Sans', Futura, Trebuchet MS, Arial, sans-serif;
\t font-size:21px;
\t text-align:justify;
\t margin-top:-15px;
}
br {
\t line-height:500%;
}
.container {
\t position:relative;
\t width:350px;
\t height:350px;
\t margin-top:42px;
\t margin-left:auto;
\t margin-right:auto;
}
.star {
\t width:40px;
\t height:40px;
\t position:absolute;
}
#starOne {
\t top:0px;
\t left:0px;
}
#starTwo {
\t top:310px;
\t left:310px;
}
.button {
\t width:250px;
\t height:250px;
\t border-style:solid;
\t border-color:red;
\t border-width:5px;
\t border-radius:60px;
\t text-align:center;
\t position:absolute;
\t bottom:50px;
\t left:50px;
}
.button:hover {
\t background-color: #7CFC00;
\t cursor:pointer
}
.button-text {
\t font-family:'Righteous', Courier New;
\t color:#9400D3;
\t font-size:76px;
\t line-height:125%;
}
#compliment {
\t text-align:center;
\t font-family:'VT323', Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
\t color:#ffd400;
\t font-size:50px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="Complement.css">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bungee+Shade|Josefin+Sans|VT323|Righteous">
<title>The Compliment Machine</title>
</head>
<body>
<h2 class="heading">The Compliment Machine</h2>
<p class="text">In the interest of spreading holiday cheer, I have designed this website with one goal in mind. Pressing the button below will randomly generate a compliment. Hopefully, this little experiment will brighten up your day.</p>
<div class="container" id="container">
<img src="Star.png" class="star" id="starOne">
<div class="button" onclick="timedFunction()" onmouseenter="startingFunction(), startingFunction2()" onmouseleave="endFunction()"> <span class="button-text">Click me!</span> </div>
<img src="Star.png" class="star" id="starTwo">
</div>
<br>
<p id="compliment"></p>
<script>
\t var userName = prompt("What is your name?");
\t var generatedUserName = userName === null || userName === "";
\t var compliment = [
\t \t "Have a nice day",
\t \t "you contribute to society",
\t \t "Always be yourself",
\t \t "you are a wonderful person",
\t \t "Keep up the good work",
\t \t "never stop believing in yourself",
\t \t "you have a great sense of humor",
\t \t "You should feel proud of yourself",
\t \t "Never stop trying",
\t \t "you are a winner"
\t ];
</script>
<script>
\t function timedFunction() { \t \t
\t \t document.getElementsByTagName("DIV")[0].style.display = "none";
\t \t document.getElementsByTagName("DIV")[1].style.display = "none";
\t \t document.getElementsByTagName("IMG")[0].style.display = "none";
\t \t document.getElementsByTagName("IMG")[1].style.display = "none";
\t \t var repeater = setInterval(inspiration, 1000);
\t }
\t var inspiration = function inspire() {
\t \t var result = Math.random();
\t \t
\t \t //This code block checks for null, undefined, and other falsy values in the prompt.
\t \t if (generatedUserName) {
\t \t \t if (0 <= result && result < 0.11) {
\t \t \t \t userName = "my friend";
\t \t \t }
\t \t \t if (0.21 <= result && result < 0.31) {
\t \t \t \t userName = "my friend";
\t \t \t }
\t \t \t if (0.41 <= result && result < 0.51) {
\t \t \t \t userName = "my friend";
\t \t \t }
\t \t \t if (0.71 <= result && result < 0.81) {
\t \t \t \t userName = "my friend";
\t \t \t }
\t \t \t if (0.81 <= result && result < 0.91) {
\t \t \t \t userName = "my friend";
\t \t \t }
\t \t \t if (0.11 <= result && result < 0.21) {
\t \t \t \t userName = "My friend";
\t \t \t }
\t \t \t if (0.31 <= result && result < 0.41) {
\t \t \t \t userName = "My friend";
\t \t \t }
\t \t \t if (0.51 <= result && result < 0.61) {
\t \t \t \t userName = "My friend";
\t \t \t }
\t \t \t if (0.61 <= result && result < 0.71) {
\t \t \t \t userName = "My friend";
\t \t \t }
\t \t \t if (0.91 <= result && result < 1) {
\t \t \t \t userName = "My friend";
\t \t \t }
\t \t }
\t \t
\t \t //This code block changes the sentence with ID 'compliment' randomly, based on the value of the variable 'result'.
\t \t if (0 <= result && result < 0.11) {
\t \t \t document.getElementById("compliment").innerHTML = compliment[0]+", "+userName+"!";
\t \t };
\t \t if (0.11 <= result && result < 0.21) {
\t \t \t document.getElementById("compliment").innerHTML = userName+", "+compliment[1]+".";
\t \t };
\t \t if (0.21 <= result && result < 0.31) {
\t \t \t document.getElementById("compliment").innerHTML = compliment[2]+", "+userName+".";
\t \t };
\t \t if (0.31 <= result && result < 0.41) {
\t \t \t document.getElementById("compliment").innerHTML = userName+", "+compliment[3]+".";
\t \t };
\t \t if (0.41 <= result && result < 0.51) {
\t \t \t document.getElementById("compliment").innerHTML = compliment[4]+", "+userName+"!";
\t \t };
\t \t if (0.51 <= result && result < 0.61) {
\t \t \t document.getElementById("compliment").innerHTML = userName+", "+compliment[5]+".";
\t \t };
\t \t if (0.61 <= result && result < 0.71) {
\t \t \t document.getElementById("compliment").innerHTML = userName+", "+compliment[6]+".";
\t \t };
\t \t if (0.71 <= result && result < 0.81) {
\t \t \t document.getElementById("compliment").innerHTML = compliment[7]+", "+userName+".";
\t \t };
\t \t if (0.81 <= result && result < 0.91) {
\t \t \t document.getElementById("compliment").innerHTML = compliment[8]+", "+userName+".";
\t \t };
\t \t if (0.91 <= result && result < 1) {
\t \t \t document.getElementById("compliment").innerHTML = userName+", "+compliment[9]+".";
\t \t };
\t }
\t var i = 0;
\t function limitedFunction() {
\t \t inspiration();
\t \t i++;
\t \t if (i === 5) {
\t \t \t document.getElementsByTagName("DIV")[0].style.display = "none";
\t \t \t document.getElementsByTagName("DIV")[1].style.display = "none";
\t \t \t document.getElementsByTagName("IMG")[0].style.display = "none";
\t \t \t document.getElementsByTagName("IMG")[1].style.display = "none";
\t \t }
\t }
</script>
<script>
\t var starOne = document.getElementById("starOne");
\t var starTwo = document.getElementById("starTwo");
\t var posLeft = 0;
\t var posTop = 0;
\t var posLeft2 = 310;
\t var posTop2 = 310;
\t
\t var startingFunction = function starterFunction() {
\t \t toRight = setInterval(moveRight, 1);
\t }
\t var startingFunction2 = function starterFunction2() {
\t \t toLeft = setInterval(moveLeft, 1);
\t }
\t
\t //The following four functions apply to the first star, which begins at the top-left.
\t function moveRight() {
\t \t posLeft++;
\t \t starOne.style.left = posLeft + 'px';
\t \t if (starOne.style.left === "310px") {
\t \t \t clearInterval(toRight);
\t \t \t toBottom = setInterval(moveDown, 1);
\t \t }
\t }
\t
\t function moveDown() {
\t \t posTop++;
\t \t starOne.style.top = posTop + 'px';
\t \t if (starOne.style.top === "310px") {
\t \t \t clearInterval(toBottom);
\t \t \t toLeft2 = setInterval(moveLeft2, 1);
\t \t }
\t }
\t
\t function moveLeft2() {
\t \t posLeft--;
\t \t starOne.style.left = posLeft + 'px';
\t \t if (starOne.style.left === "0px") {
\t \t \t clearInterval(toLeft2);
\t \t \t toTop2 = setInterval(moveUp2, 1);
\t \t }
\t }
\t
\t function moveUp2() {
\t \t posTop--;
\t \t starOne.style.top = posTop + 'px';
\t \t if (starOne.style.top === "0px") {
\t \t \t clearInterval(toTop2);
\t \t \t startingFunction();
\t \t }
\t }
\t
\t
\t //The following four functions apply to the second star, which begins at the bottom-right.
\t function moveLeft() {
\t \t posLeft2--;
\t \t starTwo.style.left = posLeft2 + 'px';
\t \t if (starTwo.style.left === "0px") {
\t \t \t clearInterval(toLeft);
\t \t \t toTop = setInterval(moveUp, 1);
\t \t }
\t }
\t
\t function moveUp() {
\t \t posTop2--;
\t \t starTwo.style.top = posTop2 + 'px';
\t \t if (starTwo.style.top === "0px") {
\t \t \t clearInterval(toTop);
\t \t \t toRight2 = setInterval(moveRight2, 1);
\t \t }
\t }
\t
\t function moveRight2() {
\t \t posLeft2++;
\t \t starTwo.style.left = posLeft2 + 'px';
\t \t if (starTwo.style.left === "310px") {
\t \t \t clearInterval(toRight2);
\t \t \t toBottom2 = setInterval(moveDown2, 1);
\t \t }
\t }
\t
\t function moveDown2() {
\t \t posTop2++;
\t \t starTwo.style.top = posTop2 + 'px';
\t \t if (starTwo.style.top === "310px") {
\t \t \t clearInterval(toBottom2);
\t \t \t startingFunction2();
\t \t }
\t }
\t
\t
\t //The following function cancels the animation when the mouse leaves the button.
\t function endFunction() {
\t \t //The following four if statements apply to the first star, which begins in the top-left.
\t \t if (0 <= posLeft && posLeft <= 310 && posTop === 0) {
\t \t \t clearInterval(toRight);
\t \t }
\t \t if (0 <= posTop && posTop <= 310 && posLeft === 310) {
\t \t \t clearInterval(toBottom);
\t \t }
\t \t if (0 <= posLeft && posLeft <= 310 && posTop === 310) {
\t \t \t clearInterval(toLeft2);
\t \t }
\t \t if (0 <= posTop && posTop <= 310 && posLeft === 0) {
\t \t \t clearInterval(toTop2);
\t \t }
\t \t
\t \t //The following four if statements apply to the second star, which begins in the bottom-right.
\t \t if (0 <= posLeft2 && posLeft2 <= 310 && posTop2 === 310) {
\t \t \t clearInterval(toLeft);
\t \t }
\t \t if (0 <= posTop2 && posTop2 <= 310 && posLeft2 === 0) {
\t \t \t clearInterval(toTop);
\t \t }
\t \t if (0 <= posLeft2 && posLeft2 <= 310 && posTop2 === 0) {
\t \t \t clearInterval(toRight2);
\t \t }
\t \t if (0 <= posTop2 && posTop2 <= 310 && posLeft2 === 310) {
\t \t \t clearInterval(toBottom2);
\t \t }
\t \t posLeft = 0;
\t \t posTop = 0;
\t \t posLeft2 = 310;
\t \t posTop2 = 310;
\t \t starOne.style.top = posTop + 'px';
\t \t starOne.style.left = posLeft + 'px';
\t \t starTwo.style.top = posTop2 + 'px';
\t \t starTwo.style.left = posLeft2 + 'px';
\t }
</script>
</body>
</html>
你怎么样使用另一种方法,即使用CSS动画属性的动画,不使用的setInterval在所有。 使用关键帧并在悬停时为星星制作动画。这里是工作示例
var starOne = document.getElementById("starOne");
var starTwo = document.getElementById("starTwo");
var posLeft = 0;
var posTop = 0;
var posLeft2 = 310;
var posTop2 = 310;
document.getElementById("btn").addEventListener("mouseover",function(){
\t starOne.classList.add("topStarAnimate");
starTwo.classList.add("bottomStarAnimate");
});
\t document.getElementById("btn").addEventListener("mouseleave",function(){
\t starOne.classList.remove("topStarAnimate");
starTwo.classList.remove("bottomStarAnimate");
});
body {
\t margin:0px;
}
.heading {
\t text-align:center;
\t font-family:'Bungee Shade', Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
\t color:green;
\t font-weight:bold;
\t font-size:30px;
\t margin-top:0px;
}
.text {
\t color:red;
\t font-family:'Josefin Sans', Futura, Trebuchet MS, Arial, sans-serif;
\t font-size:21px;
\t text-align:justify;
\t margin-top:-15px;
}
br {
\t line-height:500%;
}
.container {
\t position:relative;
\t width:350px;
\t height:350px;
\t margin-top:42px;
\t margin-left:auto;
\t margin-right:auto;
}
.star {
\t width:40px;
\t height:40px;
\t position:absolute;
}
#starOne {
\t top:0px;
\t left:0px;
}
#starTwo {
\t top:310px;
\t left:310px;
}
@keyframes topstar {
0%,100%{
top:0px;
left:0px;
}
25%{
top:0px;
left:310px;
}
50%{
top:310px;
left:310px;
}
75%{
top:310px;
left:0px;
}
}
@keyframes bottomstar {
0%,100%{
top:310px;
left:310px;
}
25%{
top:310px;
left:0px;
}
50%{
top:0px;
left:0px;
}
75%{
top:0px;
left:310px;
}
}
.topStarAnimate{
animation: topstar 4s infinite;
}
.bottomStarAnimate{
animation: bottomstar 4s infinite;
}
.button {
\t width:250px;
\t height:250px;
\t border-style:solid;
\t border-color:red;
\t border-width:5px;
\t border-radius:60px;
\t text-align:center;
\t position:absolute;
\t bottom:50px;
\t left:50px;
}
.button:hover {
\t background-color: #7CFC00;
\t cursor:pointer
}
.button-text {
\t font-family:'Righteous', Courier New;
\t color:#9400D3;
\t font-size:76px;
\t line-height:125%;
}
<!DOCTYPE html>
<title>The Compliment Machine</title>
<body>
<div class="container" id="container">
<img src="Star.png" class="star" id="starOne">
<div class="button" onclick="timedFunction()" id="btn"> <span class="button-text">Click me!</span> </div>
<img src="Star.png" class="star" id="starTwo">
</div>
<br>
<p id="compliment"></p>
</body>
我明白,关键帧是创建动画的替代方法。然而,我最初的问题是为什么这两个人会在不同的时间与当前的动画到达一个角落。如果对问题提出任何解决方案,我宁愿他们使用已在使用的方法。 – MCBlastoise
我对此不是100%确定,但可能是由于setInterval调用的漂移导致您看到动画无法正常工作。 你可以参考[这个问题](http://*.com/questions/985670/will-setinterval-drift)的第一个答案,意识到* setInterval每移动一定的毫秒*在几分钟内导致更大的显着差异。因此,我更喜欢并推荐在更长的时间内使用css进行动画。 – acesmndr
谢谢。我认为这可能是这样的。我现在将在关键帧上提及你的答案。 – MCBlastoise
我无法重现您的问题。 –
几分钟后,当星星在不同时间到达对角时,问题就会出现。 – MCBlastoise