JS控制CSS动画随机延迟与持续时间方法

前往漫画官网入口并下载

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JS实现CSS动画随机延迟与持续时间》，聊聊，希望可以帮助到正在努力赚钱的你。

本文探讨了如何通过JavaScript动态控制CSS动画的播放时间与延迟。由于纯CSS无法实现随机值，我们将利用JavaScript的Math.random()函数生成随机数，并将其应用于元素的animation属性，从而为动画带来更强的动态性和不可预测性，适用于需要模拟自然或游戏效果的场景。

纯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);

代码解析与使用

1. document.querySelector(".cactus-anim"): 这行代码用于获取HTML中class为cactus-anim的元素。确保你的HTML中存在这个元素，并且它将是动画的目标。
2. randNum(min, max) 函数: 这是一个通用的辅助函数，用于生成指定范围（min到max，包含min但不包含max）内的随机浮点数。Math.random()返回一个0（包含）到1（不包含）之间的浮点数。通过简单的数学运算，我们可以将其缩放到任意区间。
3. 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游戏中的障碍物移动等场景，使得每次游戏体验都略有不同。

理论要掌握，实操不能落！以上关于《JS控制CSS动画随机延迟与持续时间方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！