如何在 jQuery 中使用相对值创建动画
概述
相对值是指相对于任意单位递增或递减的值。在执行相对值动画时，对象不会重置到其初始位置，而是从当前状态开始增长。因此，可以通过将 jQuery 'animate()' 方法与任意选择器元素结合使用来创建相对值动画。因此，我们将通过一个示例来学习如何在 jQuery 中使用相对值和动画方法，这将帮助您了解相对值和动画。
语法
animate() 方法与动画值的语法如下:−
$(selector).animate(properties, speed, complete 回调函数);
属性− 上述语法中的属性是指动画期间或之后需要更改的样式属性。例如:left: -=1rem，right: +=1rem，top: -=1rem，bottom: +=1rem。这些是相对值的示例。
速度−它是动画运行或从当前动画变为最终动画的速度。速度有三种不同的值:快速、慢速和以毫秒为单位的数字。
完成回调函数−该函数将在动画完成时触发。
算法
步骤 1 − 在文本编辑器中创建一个 HTML 文件，并在其中添加 HTML 样板代码。
步骤 2− 现在将 jQuery 移动 CDN 链接添加到 HTML 文档。
步骤 3 − 为可移动对象创建一个 div 容器。
<div id="object"></div>
步骤 4 − 为控制器创建一个 div 容器。
<div class="controller"></div>
步骤 5 − 现在在控制器容器中添加四个按钮，分别为上、左、下、右，并设置它们各自的 ID 名称。
<button id="btn-top" class="btns">🔼</button> <div> <button id="btn-left" class="btns">◀</button> <button id="btn-bottom" class="btns">🔽</button> <button id="btn-right" class="btns">▶</button> </div>
步骤 6 − 在文件夹中创建一个 style.css 文件，并将其与 HTML 文件链接。
<link rel="stylesheet" href="style.css">
步骤 7 − 使用 CSS 样式属性设置页面样式，如下例所示。
步骤 8 − 现在在同一文件夹中创建一个 script.js 文件，并将其与主 HTML 文件链接。
<script src="script.js"></script>
步骤 9 − 现在使用 jQuery 选择器语法和 animate() 为可移动对象添加相对值动画。
$('#btn-top').click(() => {
$('div').animate({ 'top': '-=4rem' });
});
$('#btn-left').click(() => {
$('div').animate({ 'left': '-=4rem' });
});
$('#btn-bottom').click(() => {
$('div').animate({ 'top': '+=4rem' });
});
$('#btn-right').click(() => {
$('div').animate({ 'left': '+=4rem' });
});
步骤 10−打开浏览器，欣赏相对值动画。
示例
在本例中，我们将创建一个球和控制器示例，以理解 jQuery 动画的相对值。为此，我们创建了一个可移动的球作为对象，以及一个带有四个按钮的控制器。
<html>
<head>
<title>jQuery animation using relative value</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<style>
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: #0a0a0a;
}
button {
border: none;
background: transparent;
color: rgb(255, 255, 255);
font-size: 2rem;
}
.controller{
box-shadow: 0 0 10px rgb(187, 187, 187);
width: fit-content;
border-radius:10px;
padding: 1rem;
}
#object{
border-radius: 100%;
height: 50px;
width: 50px;
position: absolute;
top: 30%;
left: 20%;
text-align: center;
background-color: red;
box-shadow: 0 0 22px rgba(255, 255, 255, 0.692);
}
p{
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<div id="object"></div>
<div class="controller">
<button id="btn-top" class="btns">🔼</button>
<div>
<button id="btn-left" class="btns">◀</button>
<button id="btn-bottom" class="btns">🔽</button>
<button id="btn-right" class="btns">▶</button>
</div>
<p>tutorialspoint.com</p>
</div>
<p>Click the buttons on the controller and move the ball</p>
<script src="script.js"></script>
$('#btn-top').click(() => {
$('div').animate({ 'top': '-=4rem' });
});
$('#btn-left').click(() => {
$('div').animate({ 'left': '-=4rem' });
});
$('#btn-bottom').click(() => {
$('div').animate({ 'top': '+=4rem' });
});
$('#btn-right').click(() => {
$('div').animate({ 'left': '+=4rem' });
});
</body>
</html>
下图展示了上述示例的输出，其中有一个球和一个带有上、下、左、右四个按钮的控制器。因此，当用户点击以下任意按钮时，球将沿特定方向移动，距离当前位置 4rem 的距离。例如，如果用户点击右侧按钮，球将沿右侧方向移动，直到距离当前位置 4rem 的距离。
结论
相对动画值的这一特性主要用于游戏应用，玩家可以相对于地面沿任意方向移动，在这种情况下，玩家每次迈出一步所需的步数就是相对值。正如上例所示，我们刚刚创建了上、下、左、右四个按钮，我们还可以创建更多按钮以沿对角线方向移动。
