下面是详细讲解"javascript 人物逼真行走,已完成"的完整攻略。
本攻略旨在讲解如何通过JavaScript实现人物逼真行走的效果。该效果主要通过CSS动画实现，同时使用JavaScript控制CSS动画完成人物行走的过程。
首先，我们需要准备好用于展示人物行走的图片。这些图片可以是人物行走各个姿势的连续帧，例如人物从左侧走到右侧的过程中，可以准备好人物向左走的10帧图和人物向右走的10帧图。通常，图片素材位置应该在项目的images文件夹中，并需要在CSS代码中进行引用。
在准备好人物图片素材之后，我们可以通过CSS动画实现人物行走的效果。人物行走的核心是运动。我们可以使用@keyframes规则来定义动画的各个关键帧，并使用animation属性将动画应用到人物图片上。具体代码如下：
/* 定义人物左走的动画 */
@keyframes walk-left {
from {
transform: scaleX(1); /* 图片默认朝右，需要翻转朝左 */
}
to {
transform: translateX(-400px) scaleX(-1); /* 图片向左移动400px，同时翻转回正面 */
}
}
/* 定义人物右走的动画 */
@keyframes walk-right {
from {
transform: scaleX(-1); /* 图片默认朝左，需要翻转朝右 */
}
to {
transform: translateX(400px) scaleX(1); /* 图片向右移动400px，同时翻转回正面 */
}
}
/* 将动画应用到人物图片上 */
.image {
position: absolute; /* 需要和其他元素重叠 */
width: 100px; /* 图片宽度 */
height: 100px; /* 图片高度 */
background-image: url(../images/walk-right-1.png); /* 引用图片 */
animation-duration: 1s; /* 动画时长 */
animation-timing-function: steps(10); /* 关键帧数量 */
animation-iteration-count: infinite; /* 循环播放 */
animation-direction: alternate; /* 往返播放动画 */
}
/* 通过CSS选择器定义人物左走时应该展示的帧 */
.image.left {
background-image: url(../images/walk-left-1.png);
animation-name: walk-left;
}
/* 通过CSS选择器定义人物右走时应该展示的帧 */
.image.right {
background-image: url(../images/walk-right-1.png);
animation-name: walk-right;
}
在上述代码中，我们定义了两个动画walk-left和walk-right，分别用于控制人物向左走和向右走。我们将动画应用到人物图片上，并使用animation-name属性指定当前应该播放的动画。最后，我们可以通过添加.left和.right样式类来控制人物左右行走时应该展示的帧。
现在我们已经准备好了CSS动画效果，但是这些动画并没有被启动。我们还需要编写JavaScript代码来控制动画的运行。我们可以通过添加样式类的形式来控制人物左右行走，并使用setTimeout函数实现持续的人物行走效果。具体代码如下：
const imageEl = document.querySelector(".image"); // 获取人物图片元素
let moveInterval; // 定义行走定时器变量
let isMoving = false; // 定义是否正在行走
// 定义人物向左走的函数
function moveLeft() {
if (!isMoving) {
isMoving = true;
imageEl.classList.add("left"); // 添加左行走样式类
moveInterval = setInterval(() => {
// 持续往左行走，并控制循环行走
imageEl.classList.toggle("left");
imageEl.style.left =
parseInt(imageEl.style.left || "0") - 10 + "px";
if (parseInt(imageEl.style.left || "0") < -100) {
imageEl.style.left = "100%";
}
}, 100);
}
}
// 定义人物向右走的函数
function moveRight() {
if (!isMoving) {
isMoving = true;
imageEl.classList.add("right"); // 添加右行走样式类
moveInterval = setInterval(() => {
// 持续往右行走，并控制循环行走
imageEl.classList.toggle("right");
imageEl.style.left =
parseInt(imageEl.style.left || "0") + 10 + "px";
if (parseInt(imageEl.style.left || "0") > window.innerWidth) {
imageEl.style.left = "-100px";
}
}, 100);
}
}
// 定义停止行走的函数
function stopMove() {
if (isMoving) {
isMoving = false;
clearInterval(moveInterval); // 停止定时器
imageEl.classList.remove("left", "right"); // 移除行走样式类
}
}
// 监听键盘事件，完成人物行走效果
document.addEventListener("keydown", (e) => {
switch (e.code) {
case "ArrowLeft":
moveLeft();
break;
case "ArrowRight":
moveRight();
break;
}
});
// 监听键盘松开事件，停止人物行走效果
document.addEventListener("keyup", (e) => {
if (e.code === "ArrowLeft" || e.code === "ArrowRight") {
stopMove();
}
});
在上述代码中，我们首先通过document.querySelector方法获取人物图片元素，并定义了三个函数moveLeft、moveRight和stopMove来控制人物的行走。这三个函数逻辑基本一致，都是添加或移除某些CSS样式，并通过setInterval函数实现持续行走的效果。其中，在每个定时器循环结束时，我们需要通过判断图片位置来控制人物行走。
最后，我们通过document.addEventListener方法监听键盘事件，当用户按下方向键时，调用相应的行走函数；当用户松开方向键时，调用停止行走函数。
以下是两个示例，一个用于展示人物向左行走，另一个用于展示人物向右行走。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS人物向左行走示例</title>
<style>
/* 样式内容上面已经给出 */
</style>
</head>
<body>
<div class="container">
<div class="image"></div>
</div>
<script>
// js代码上面已经给出
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS人物向右行走示例</title>
<style>
/* 样式内容上面已经给出 */
</style>
</head>
<body>
<div class="container">
<div class="image right"></div>
</div>
<script>
// js代码上面已经给出
</script>
</body>
</html>
两个示例的代码逻辑基本一致，只是人物行走的方向不同。我们只需要将图片元素的样式类修改为.left或.right即可控制人物向左或向右行走。
本文链接：http://task.lmcjl.com/news/1204.html