用 React 构建像素艺术动画制作器 | 适合初学者的项目

简介

在这个项目中，我们将带你逐步使用 React 构建一个简单的像素艺术动画制作器。在本指南结束时，你将拥有一个基本的像素艺术编辑器，在其中你可以绘制像素艺术并查看生成的动画。这个项目对初学者很友好，并且提供了一种有趣的方式来深入 React 和像素艺术的世界！

👀 预览

🎯 任务

在这个项目中，你将学习：

如何初始化一个 React 项目并安装必要的依赖项。
如何创建一个调色板组件供用户选择颜色。
如何构建一个绘图网格以允许用户绘制像素艺术。
如何实现一个艺术预览组件来显示正在制作的像素艺术。
如何在主应用程序中组合所有组件。
如何为应用程序设置样式以改善用户体验。

🏆 成果

完成这个项目后，你将能够：

设置一个 React 项目并安装依赖项。
在 React 中创建功能组件。
使用 React 状态和属性来管理应用程序数据。
在 React 中处理事件。
使用 CSS 为 React 应用程序设置样式。

项目设置

要求：

在新的 React 项目中安装依赖项。

功能：

使用必要的依赖项和基本项目结构初始化项目。

步骤：

打开终端并导航到项目文件夹：
```
cd react-pixel-art-animator
```
你需要在 project 目录下运行此命令。
在项目中安装依赖项：
```
npm install
```

设计调色板组件

要求：

创建一个调色板，用户可以从中选择颜色。

功能：

显示一组颜色选项。
允许用户选择一种颜色。

步骤：

// src/Palette.js
import React from "react";

const colors = [
  "#FFFFFF",
  "#000000",
  "#F78CA2",
  "#4caf50",
  "#5CD2E6",
  "#FFD700",
  "#FF69B4",
  "#8bc34a",
  "#8A2BE2",
  "#5F9EA0"
];

function Palette({ selectedColor, setSelectedColor }) {
  return (
    <div className="palette">
      {colors.map((color) => (
        <div
          key={color}
          className={`color-box ${color === selectedColor ? "selected" : ""}`}
          style={{ backgroundColor: color }}
          onClick={() => setSelectedColor(color)}
        ></div>
      ))}
    </div>
  );
}

export default Palette;

此组件显示一排颜色框，用户可以点击它们来选择一种颜色。

✨ 查看解决方案并练习

构建绘图网格

要求：

构建一个网格，让用户能够绘制像素艺术。

功能：

渲染一个网格布局。
允许用户使用所选颜色填充网格方块。

步骤：

// src/Grid.js
import React from "react";

function Grid({ grid, setGrid, selectedColor }) {
  const updatePixel = (rowIndex, colIndex) => {
    const newGrid = [...grid];
    newGrid[rowIndex][colIndex] = selectedColor;
    setGrid(newGrid);
  };

  return (
    <div className="grid">
      {grid.map((row, rowIndex) => (
        <div key={rowIndex} className="grid-row">
          {row.map((color, colIndex) => (
            <div
              key={colIndex}
              className="grid-pixel"
              style={{ backgroundColor: color }}
              onClick={() => updatePixel(rowIndex, colIndex)}
            ></div>
          ))}
        </div>
      ))}
    </div>
  );
}

export default Grid;

网格组件将允许用户通过点击每个方块来绘制像素艺术。

✨ 查看解决方案并练习

实现艺术预览

要求：

显示用户创建的像素艺术的预览。

功能：

在创建像素艺术时渲染用户的作品。

步骤：

// SpriteDisplay.js;
import React from "react";

function SpriteDisplay({ grid }) {
  return (
    <div className="sprite-display">
      {grid.map((row, rowIndex) => (
        <div key={rowIndex} className="sprite-row">
          {row.map((color, colIndex) => (
            <div
              key={colIndex}
              className="sprite-pixel"
              style={{ backgroundColor: color }}
            ></div>
          ))}
        </div>
      ))}
    </div>
  );
}

export default SpriteDisplay;

✨ 查看解决方案并练习

将组件集成到主应用程序中

要求：

组合调色板（Palette）、网格（Grid）和精灵显示（SpriteDisplay）组件。

功能：

显示集成了这些组件的主应用程序。

步骤：

// App.js
import React, { useState } from "react";
import Palette from "./Palette";
import Grid from "./Grid";
import SpriteDisplay from "./SpriteDisplay";
import "./App.css";

const initialCatSprite = [
  [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#4caf50",
    "#4caf50",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#ffffff",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#ffffff",
    "#8bc34a",
    "#8bc34a",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#8bc34a",
    "#000000",
    "#8bc34a"
  ],
  [
    "#ffffff",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a"
  ],
  [
    "#8bc34a",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#8bc34a",
    "#8bc34a",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#8bc34a",
    "#8bc34a",
    "#ffffff",
    "#ffffff",
    "#8bc34a",
    "#8bc34a",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ]
];

function App() {
  const [selectedColor, setSelectedColor] = useState("#000000");
  const [grid, setGrid] = useState(initialCatSprite);

  return (
    <div className="App">
      <h1>像素艺术动画制作器</h1>
      <Palette
        selectedColor={selectedColor}
        setSelectedColor={setSelectedColor}
      />
      <Grid grid={grid} setGrid={setGrid} selectedColor={selectedColor} />
      <SpriteDisplay grid={grid} />
    </div>
  );
}

export default App;

✨ 查看解决方案并练习

为应用程序添加样式

要求：

使应用程序在视觉上更具吸引力。

功能：

为应用程序组件设置样式，以提升用户体验。

步骤：

/*App.css*/
.App {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  font-family: "Arial", sans-serif;
  background-color: #f4f4f4;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

.palette {
  display: flex;
  margin-bottom: 20px;
}

.color-box {
  width: 30px;
  height: 30px;
  margin: 0 5px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s;
}

.color-box:hover,
.color-box.selected {
  border-color: #000;
}

.grid {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.grid-row {
  display: flex;
}

.grid-pixel {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.grid-pixel:hover {
  border-color: #888;
}

.sprite-display {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.sprite-row {
  display: flex;
}

.sprite-pixel {
  width: 30px;
  height: 30px;
}

/* 调整整体大小和间距以呈现现代外观 */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e9ecef;
}

✨ 查看解决方案并练习