纯CSS的局限性
在web开发中，css动画是实现页面动态效果的强大工具。开发者可以通过animation属性定义动画的名称、持续时间、延迟、缓动函数以及重复次数等。然而，css本身是一种声明式语言，它在定义动画属性时，要求所有值都是预先确定的静态值。这意味着我们无法在css中直接使用随机数或动态计算来设定动画的播放时间（animation-duration）或延迟（animation-delay）。例如，原始的css代码：
.cactus-anim {
animation: cactus-move 1.3s 0.5s linear infinite;
}
@keyframes cactus-move {
0% {
left: 700px;
}
100% {
left: -40px;
}
}这里的1.3s和0.5s是固定值，无法在运行时随机变化。尽管SCSS等CSS预处理器提供了变量和函数功能，但它们仅在编译阶段起作用，无法在浏览器运行时生成随机值。为了实现动画时间与延迟的随机化，我们需要借助JavaScript的动态能力。
JavaScript动态控制动画属性
JavaScript能够访问和修改DOM元素的样式属性，这为我们动态控制CSS动画提供了可能。核心思想是利用JavaScript生成随机数，然后将这些随机数作为值赋给元素的animation属性。
以下是实现这一功能的JavaScript代码：
// 获取需要应用动画的元素
const anim = document.querySelector(".cactus-anim");
/**
* 生成指定范围内的随机浮点数
* @param {number} min - 最小值
* @param {number} max - 最大值
* @returns {number} 介于min和max之间的随机数
*/
function randNum(min, max) {
return Math.random() * (max - min) + min;
}
/**
* 设置元素的动画时间与延迟为随机值
* 每次调用都会生成新的随机动画参数
*/
function randAnimTime() {
// 生成动画持续时间，例如在1到2秒之间
const duration = randNum(1, 2);
// 生成动画延迟时间，例如在0到0.7秒之间
const delay = randNum(0, 0.7);
// 构建新的animation属性值
// 格式为 "animation-name duration delay timing-function iteration-count"
anim.style.animation = `cactus-move ${duration}s ${delay}s linear infinite`;
}
// 示例：在页面加载完成后立即设置随机动画时间
document.addEventListener('DOMContentLoaded', () => {
randAnimTime();
});
// 示例：如果需要每次动画循环结束后重新随机化，可以监听animationiteration事件
// anim.addEventListener('animationiteration', randAnimTime);代码解析与使用
- document.querySelector(".cactus-anim"): 这行代码用于获取HTML中class为cactus-anim的元素。确保你的HTML中存在这个元素，并且它将是动画的目标。
- randNum(min, max) 函数: 这是一个通用的辅助函数，用于生成指定范围（min到max，包含min但不包含max）内的随机浮点数。Math.random()返回一个0（包含）到1（不包含）之间的浮点数。通过简单的数学运算，我们可以将其缩放到任意区间。
-
randAnimTime() 函数:
- 它首先调用randNum函数两次，分别生成动画的持续时间（例如1到2秒之间）和动画的延迟时间（例如0到0.7秒之间）。
- 然后，它通过anim.style.animation直接修改元素的内联样式。这里，我们重新构建了完整的animation属性值，包括动画名称（cactus-move）、随机生成的持续时间、随机生成的延迟时间、缓动函数（linear）和重复次数（infinite）。
最佳实践与注意事项
- 初始加载: 可以在页面加载完成后（例如，使用DOMContentLoaded事件监听器）立即调用randAnimTime()来设置初始的随机动画。
- 重复随机化: 如果你希望每次动画循环结束后都重新随机化时间，可以监听animationiteration事件，并在事件触发时再次调用randAnimTime()。然而，对于无限循环的动画，这可能会导致动画在每次迭代开始时出现轻微的跳动或不连贯。
- 性能考量: 频繁地修改DOM元素的样式可能会对性能产生一定影响，但对于单个或少量元素的动画，这种影响通常可以忽略不计。
- CSS与JS分离: 尽管这里我们直接在JavaScript中设置了animation属性，但为了保持代码的清晰和可维护性，通常建议将动画的定义（如@keyframes规则）保留在CSS中，而只通过JavaScript动态修改那些需要随机化的属性。
- 兼容性: animation属性在现代浏览器中具有良好的兼容性。
总结
通过结合CSS定义动画骨架和JavaScript进行运行时参数调整，我们能够突破纯CSS的局限性，实现CSS动画时间与延迟的随机化。这种方法为创建更具动态性、更自然或更具游戏感的交互效果提供了强大的工具，尤其适用于如Dino游戏中的障碍物移动等场景，使得每次游戏体验都略有不同。
立即学习“Java免费学习笔记（深入）”；
