当前位置：首页 > JavaScript

js 实现 flash

2026-04-05 10:54:29JavaScript

实现 Flash 效果的 JavaScript 方法

使用 JavaScript 可以实现类似 Flash 的动画效果，例如元素的闪烁、渐变或动态变化。以下是几种常见的实现方式：

使用 CSS 动画结合 JavaScript

通过动态添加或移除 CSS 类来实现闪烁效果：

function flashElement(element, duration, interval) {
    let timer = setInterval(() => {
        element.classList.toggle('flash-effect');
    }, interval);

    setTimeout(() => {
        clearInterval(timer);
        element.classList.remove('flash-effect');
    }, duration);
}

// 使用示例
const element = document.getElementById('target');
flashElement(element, 3000, 500);

对应的 CSS 样式：

.flash-effect {
    background-color: yellow;
    transition: background-color 0.3s ease;
}

使用 requestAnimationFrame 实现平滑动画

对于更复杂的动画效果，可以使用 requestAnimationFrame：

function flashWithRAF(element, duration, color) {
    const startTime = performance.now();

    function update(time) {
        const elapsed = time - startTime;
        const progress = (elapsed % 500) / 500; // 每500ms一个周期

        if (elapsed < duration) {
            const intensity = Math.abs(Math.sin(progress * Math.PI));
            element.style.backgroundColor = `rgba(255, 255, 0, ${intensity})`;
            requestAnimationFrame(update);
        } else {
            element.style.backgroundColor = '';
        }
    }

    requestAnimationFrame(update);
}

使用 Canvas 实现高级动画

对于需要更复杂视觉效果的场景，可以使用 Canvas：

const canvas = document.getElementById('flashCanvas');
const ctx = canvas.getContext('2d');

function flashCircle(x, y, duration) {
    let radius = 0;
    const maxRadius = 50;
    const startTime = performance.now();

    function draw() {
        const elapsed = performance.now() - startTime;
        const progress = elapsed / duration;

        if (progress < 1) {
            radius = maxRadius * (1 - progress);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(255, 255, 0, ${1 - progress})`;
            ctx.fill();
            requestAnimationFrame(draw);
        } else {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
    }

    draw();
}

使用 WebGL 实现 3D 效果

对于需要 3D 效果的场景，可以使用 WebGL 或 Three.js 库：

js 实现 flash

// 使用Three.js的简单示例
import * as THREE from 'three';

function createFlashEffect() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();

    const geometry = new THREE.SphereGeometry(1, 32, 32);
    const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
    const sphere = new THREE.Mesh(geometry, material);
    scene.add(sphere);

    camera.position.z = 5;

    function animate() {
        requestAnimationFrame(animate);
        sphere.material.opacity = Math.abs(Math.sin(Date.now() * 0.005));
        renderer.render(scene, camera);
    }

    animate();
}