【canvas】图片打碎与重组动画

帅比九日

已于 2024-05-16 17:54:37 修改

阅读量438

点赞数 4

分类专栏：踩过的坑文章标签：前端 canvas javascript

于 2024-04-29 11:11:22 首次发布

本文链接：https://blog.csdn.net/qq_41883423/article/details/138305964

版权

踩过的坑专栏收录该内容

149 篇文章 3 订阅

订阅专栏

本文详细介绍了如何使用HTML5的Canvas和JavaScript创建图片打碎并逐渐重组的动画效果，包括图片加载、切片处理、动画实现等步骤，适用于提升Web开发中的用户体验。

摘要由CSDN通过智能技术生成

前端图片动画：图片打碎与重组

在Web开发中，图片动画是一种常见而有效的方式来提升用户体验。这篇博客将介绍如何利用HTML5的Canvas元素及JavaScript来实现一个图片被打碎并逐渐重组的动画效果。通过浅显易懂的步骤解释，您将了解如何通过编程来达到这样的视觉效果。
请添加图片描述

基本设定

首先，我们需要一个简单的HTML页面来承载我们的脚本与展示内容。页面包括一个用来上传图片的文件输入框和一个<canvas>元素。通过CSS，我们为<canvas>设置了边框以便更好地观察效果。

<input type="file" accept="image/*" id="imageLoader" name="imageLoader" />
<canvas id="imageCanvas"></canvas>

加载与处理图片

当用户选择文件后，通过FileReader对象来读取图片并将其转换成data URL，这样图片就可以被Image对象使用，并进一步处理。一旦图片加载完成，我们会通过img.onload事件获取图片尺寸，然后设置canvas的宽度和高度与图片相同。

var img = new Image();
img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;
    pieceWidth = Math.floor(img.width / piecesX);
    pieceHeight = Math.floor(img.height / piecesY);
    shatterImage(); // 调用打碎图片的函数
    animate(); // 开始动画
};
img.src = event.target.result;

打碎图片

接下来是“打碎图片”的关键部分。为了实现碎片效果，我们首先定义了将图片切分成多少块。通过两层循环遍历，每个碎片的位置和大小都被计算出来，并存储在一个数组中。

function shatterImage() {
    for (let i = 0; i < piecesY; i++) {
        for (let j = 0; j < piecesX; j++) {
            pieces.push({
                x: pieceWidth * j,
                y: pieceHeight * i,
                offsetX: (Math.random() - 0.5) * shatterAngle,
                offsetY: (Math.random() - 0.5) * shatterAngle
            });
        }
    }
}

碎片的初始偏移量由offsetX和offsetY决定，这里使用随机数生成一个范围内的值，借此模拟碎片被打散的效果。

动画效果

最后是实现动画，让这些碎片逐渐回到原位。在animate函数中，每次动画帧我们都重新绘制所有碎片。碎片位置的偏移量逐渐减少，模拟重组效果。

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    pieces.forEach((piece) => {
        ctx.drawImage(img, piece.x, piece.y, pieceWidth, pieceHeight, piece.x + piece.offsetX, piece.y + piece.offsetY, pieceWidth, pieceHeight);
        if (Math.abs(piece.offsetX) > 0.5) piece.offsetX *= 0.95;
        if (Math.abs(piece.offsetY) > 0.5) piece.offsetY *= 0.95;
    });
    requestAnimationFrame(animate);
}

这里使用requestAnimationFrame来优化动画效果，确保动画的流畅和性能。

完整代码实现

以下的代码可以直接复制到一个html文件中运行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Canvas Image Animation</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <input type="file" accept="image/*" id="imageLoader" name="imageLoader" />
    <canvas id="imageCanvas"></canvas>

    <script>
        window.onload = function () {
            var imageLoader = document.getElementById('imageLoader');
            imageLoader.addEventListener('change', handleImage, false);

            var canvas = document.getElementById('imageCanvas');
            var ctx = canvas.getContext('2d');

            var img = new Image();
            var pieces = [];
            var pieceWidth, pieceHeight;
            var piecesX = 8; // Number of horizontal pieces
            var piecesY = 8; // Number of vertical pieces
            var shatterAngle = 300; // Spread of the shatter

            function handleImage(e) {
                var reader = new FileReader();
                reader.onload = function (event) {
                    img.onload = function () {
                        canvas.width = img.width;
                        canvas.height = img.height;
                        pieceWidth = Math.floor(img.width / piecesX);
                        pieceHeight = Math.floor(img.height / piecesY);
                        shatterImage();
                        animate(); // 开始对碎片的动画处理
                    };
                    img.src = event.target.result;
                };
                reader.readAsDataURL(e.target.files[0]);
            }

            function shatterImage() {
                for (let i = 0; i < piecesY; i++) {
                    for (let j = 0; j < piecesX; j++) {
                        pieces.push({
                            x: pieceWidth * j,
                            y: pieceHeight * i,
                            offsetX: (Math.random() - 0.5) * shatterAngle,
                            offsetY: (Math.random() - 0.5) * shatterAngle
                        });
                    }
                }
            }

            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                pieces.forEach((piece, index) => {
                    ctx.drawImage(img, piece.x, piece.y, pieceWidth, pieceHeight, piece.x + piece.offsetX, piece.y + piece.offsetY, pieceWidth, pieceHeight);
                    // Gradually reposition pieces to original position
                    if (Math.abs(piece.offsetX) > 0.5) piece.offsetX *= 0.95;
                    if (Math.abs(piece.offsetY) > 0.5) piece.offsetY *= 0.95;
                });

                requestAnimationFrame(animate);
            }
        }
    </script>
</body>

</html>