我正在尝试为两个不同的对象设置动画，div格式化为方形，另一个格式化为圆形。每个对象都有一个按钮来启动动画，其中包括从左到右移动对象。我已经包含了以下代码。我遇到的问题是，如果我单击“移动方块”按钮然后单击“移动圆圈”按钮，则方块会向左移动。我试图做的是将对象彼此独立地移动。
我确信有一个面向对象的解决方案，但我已经搜索过，并没有发现任何对我有意义的东西。有什么建议吗？
$(document).ready(function() {
var moveSquare = $('#moveSquare');
var moveCircle = $('#moveCircle');
var square = $('#square');
var squareText = $('#squareText');
square.css({
top: '100px',
left: '0px',
color: 'white',
position: 'fixed',
'text-align': 'center'
});
var pos_square = square.position();
squareText.html(pos_square.top + 'px' + '<br/>' + pos_square.left + 'px');
var circle = $('#circle');
var circleText = $('#circleText');
circle.css({
top: '300px',
left: '0px',
color: 'white',
position: 'fixed',
'text-align': 'center'
});
var pos_circle = circle.position();
circleText.html(pos_circle.top + 'px' + '<br/>' + pos_circle.left + 'px');
moveSquare.on('click', function() {
console.log('movesuqare here');
requestAnimationFrame(function(timestamp) {
starttime = timestamp;
move(timestamp, square, squareText, 800, 5000);
});
});
moveCircle.on('click', function() {
console.log('movecircle here');
requestAnimationFrame(function(timestamp) {
starttime = timestamp;
move(timestamp, circle, circleText, 800, 1000);
});
});
function move(timestamp, element, elementText, distance, duration) {
var runtime = timestamp - starttime;
var progress = runtime / duration;
progress = Math.min(progress, 1);
var leftPos = (distance * progress).toFixed(0) + 'px';
element.css({
left: leftPos,
position: 'absolute'
});
element.css({
'text-align': 'center'
});
var topPos = element.css('top') + '<br/>';
elementText.html(topPos + leftPos);
console.log(element.prop('id') + leftPos);
if (runtime < duration) {
requestAnimationFrame(function(timestamp) {
move(timestamp, element, elementText, distance, duration);
});
}
}
});html {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
body {
font-family: 'Courier New';
color: black;
font-size: 15px;
width: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.container {
width: 100px;
height: 100px;
}
.square_css {
width: 100px;
height: 100px;
background-color: blue;
}
.circle_css {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
}
.shapeText {
padding-top: 30%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="<?php echo URL; ?>views/index/css/index_Main.css" />
</head>
<body>
<div>
<input type="button" id="moveSquare" value="Move Square" />
</div>
<div>
<input type="button" id="moveCircle" value="Move Circle" />
</div>
<div id="square" class="square_css">
<div id="squareText" class="shapeText"></div>
</div>
<div id="circle" class="circle_css">
<div id="circleText" class="shapeText"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo URL; ?>views/index/js/index_main.js"></script>
</body>
</html>
答案 0 :(得分：1)
问题是由共享公共变量starttime的两个动画引起的。
要修复，您需要某种方式让每个动画都有自己的starttime。
您可以通过多种方式执行此操作，其中最简单的方法是将点击处理程序的开始时间与其他参数一起传递给move()。由于move()自称，starttime需要传递给下一个电话。
$(document).ready(function() {
var square = $('#square').css({
'top': '100px',
'left': '0px',
'color': 'white',
'position': 'fixed',
'text-align': 'center'
});
var circle = $('#circle').css({
'top': '300px',
'left': '0px',
'color': 'white',
'position': 'fixed',
'text-align': 'center'
});
var squareText = $('#squareText');
var circleText = $('#circleText');
var pos_square = square.position();
var pos_circle = circle.position();
squareText.html(pos_square.top + 'px' + '<br/>' + pos_square.left + 'px');
circleText.html(pos_circle.top + 'px' + '<br/>' + pos_circle.left + 'px');
$('#moveSquare').on('click', function() { // button
console.log('movesuqare here');
requestAnimationFrame(function(timestamp) {
move(timestamp, timestamp, square, squareText, 800, 5000);
});
});
$('#moveCircle').on('click', function() { // button
console.log('movecircle here');
requestAnimationFrame(function(timestamp) {
move(timestamp, timestamp, circle, circleText, 800, 1000);
});
});
function move(starttime, timestamp, element, elementText, distance, duration) {
var runtime = timestamp - starttime;
var progress = runtime / duration;
progress = Math.min(progress, 1);
var leftPos = (distance * progress).toFixed(0) + 'px';
element.css({
left: leftPos,
position: 'absolute'
});
element.css({
'text-align': 'center'
});
var topPos = element.css('top') + '<br/>';
elementText.html(topPos + leftPos);
console.log(element.prop('id') + leftPos);
if (runtime < duration) {
requestAnimationFrame(function(timestamp) {
move(starttime, timestamp, element, elementText, distance, duration);
});
}
}
});html {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
body {
font-family: 'Courier New';
color: black;
font-size: 15px;
width: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.container {
width: 100px;
height: 100px;
}
.square_css {
width: 100px;
height: 100px;
background-color: blue;
}
.circle_css {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
}
.shapeText {
padding-top: 30%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="<?php echo URL; ?>views/index/css/index_Main.css" />
</head>
<body>
<div>
<input type="button" id="moveSquare" value="Move Square" />
</div>
<div>
<input type="button" id="moveCircle" value="Move Circle" />
</div>
<div id="square" class="square_css">
<div id="squareText" class="shapeText"></div>
</div>
<div id="circle" class="circle_css">
<div id="circleText" class="shapeText"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo URL; ?>views/index/js/index_main.js"></script>
</body>
</html>