JS实现闪动
实现闪动效果的方法
使用JavaScript实现闪动效果可以通过多种方式完成，以下是几种常见的方法：
方法一：使用CSS动画结合JavaScript控制
定义一个CSS动画，通过JavaScript动态添加或移除类名来触发闪动效果。
/* CSS部分 */
.flash {
animation: flash 0.5s infinite;
}
@keyframes flash {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}// JavaScript部分
const element = document.getElementById('target');
element.classList.add('flash');
// 停止闪动
function stopFlash() {
element.classList.remove('flash');
}方法二：纯JavaScript实现
使用setInterval不断改变元素的可见性来实现闪动效果。
const element = document.getElementById('target');
let isVisible = true;
const flashInterval = setInterval(() => {
isVisible = !isVisible;
element.style.opacity = isVisible ? '1' : '0';
}, 500);
// 停止闪动
function stopFlash() {
clearInterval(flashInterval);
element.style.opacity = '1';
}方法三：使用requestAnimationFrame
这种方法性能更好，适合需要精细控制动画的场景。
const element = document.getElementById('target');
let startTime = null;
let flashing = true;
function flash(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
const progress = (elapsed % 500) / 500;
element.style.opacity = progress < 0.5 ? '1' : '0';
if (flashing) {
requestAnimationFrame(flash);
}
}
// 开始闪动
requestAnimationFrame(flash);
// 停止闪动
function stopFlash() {
flashing = false;
element.style.opacity = '1';
}注意事项
- 对于简单的闪动效果，CSS动画方案性能更好且代码更简洁
- 使用JavaScript控制可以实现更复杂的闪动逻辑和交互
- 记得在不需要闪动时清除定时器或动画帧请求，避免内存泄漏
- 考虑添加过渡效果使闪动更平滑，例如使用transition属性
扩展应用
可以通过修改上述代码实现不同形式的闪动：
- 改变颜色而非透明度
- 添加缩放效果
- 实现有节奏的闪动模式
- 根据用户交互触发闪动
