像素跳动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/gaotlantis/article/details/144855291

效果说明

本案例实现了一个图片像素跳动的动画效果。将图片分解成像素块，默认进行垂直运动，当鼠标悬浮时切换为水平运动，创造出独特的视觉效果。

实现原理

1. 图片像素化处理

通过 Canvas 的 getImageData 方法获取图片像素数据，并转换为可操作的像素对象：

function initPixels() {
    const offscreen = document.createElement('canvas');
    const offscreenCtx = offscreen.getContext('2d');
    // ... 绘制图片到离屏 canvas
    const imageData = offscreenCtx.getImageData(0, 0, canvas.width, canvas.height);
    // 遍历图片数据，创建像素对象
    for (let y = 0; y < canvas.height; y += pixelSize) {
        for (let x = 0; x < canvas.width; x += pixelSize) {
            const index = (y canvas.width + x) 4;
            pixels.push({
            x, y,
            baseX: x,
            baseY: y,
            color: rgb(${r}, ${g}, ${b}),
            amplitude: Math.random() 3 + 2,
            angle: Math.random() Math.PI 2,
            speed: 0.03 + Math.random() 0.02
            // ...
            });
        }
    }
}

2. 像素运动控制

每个像素点都具有独立的运动参数，通过正弦函数实现周期运动：

function updatePixels() {
    pixels.forEach(pixel => {
        pixel.angle += pixel.speed;
        
        if (isMouseOver) {
            // 水平运动
            pixel.x = pixel.baseX + Math.sin(pixel.angle) * pixel.currentAmplitude;
            pixel.y = pixel.baseY;
        } else {
            // 垂直运动
            pixel.x = pixel.baseX;
            pixel.y = pixel.baseY + Math.sin(pixel.angle) * pixel.currentAmplitude;
        }
    });
}

3. 平滑过渡实现

使用 currentAmplitude 和 targetAmplitude 实现运动幅度的平滑过渡
通过 mouseenter/mouseleave 事件切换运动方向

随机改变振幅使动画更加生动

// 鼠标事件处理
canvas.addEventListener('mouseenter', () => {
    isMouseOver = true;
    pixels.forEach(pixel => {
        pixel.targetAmplitude = Math.random() 3 + 2;
        });
    });
    // 定期随机改变振幅
    setInterval(() => {
        pixels.forEach(pixel => {
            if (Math.random() < 0.1) {
            pixel.targetAmplitude = Math.random() 3 + 2;
        }
    });
}, 2000);