SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Shared Config ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ==========================================
// VIEW 3: PROTOCOL DECODING (New)
// ==========================================
const DECODING_FIELDS = [
{ id: 'method', label: 'METHOD', value: 'GET', color: '#00ccff', startLine: 0 },
{ id: 'url', label: 'URL', value: '/api/v1/status', color: '#00ff66', startLine: 1 },
{ id: 'vers
Protocol decoding details
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
// --- Shared Config ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ==========================================
// VIEW 1: DATA ASSEMBLY
// ==========================================
const GRID_ROWS = 5;
const GRID_COLS = 5;
const TOTAL_PACKETS = GRID_ROWS * GRID_COLS;
const PACKET_SIZE = 40;
const PACKET_GAP = 4;
const SPEED_MULTIPLIER = 0.25;
type PacketStatus = 'queued' | 'transit' | 'assembling' | 'docked
Packet reassembly (v2)
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Shared Config ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ==========================================
// VIEW 4: FILE RECONSTRUCTION (Refined Matrix)
// ==========================================
const MATRIX_ROWS = 8;
const MATRIX_COLS = 10;
const TOTAL_BLOCKS = MATRIX_ROWS * MATRIX_COLS;
const HEADER_ROWS = 2;
const BLOCK_SIZE = 30;
const BLOCK_GAP = 4;
const HTTP_HEADERS = [
{ key: '
File restoration process
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Shared Config ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ==========================================
// PROTOCOL ANALYSIS (Reversed Layer Logic)
// ==========================================
type DetectionMethod = 'port' | 'content';
interface ProtoPacket {
id: number;
x: number;
y: number;
protocol: string; // 'HTTP', 'SSH', 'DNS'
method: DetectionMethod;
binary: string;
po
Network protocol analysis
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ============================================================================
// SOLAR SYSTEM VIEW (New High Fidelity)
// ============================================================================
interface PlanetConfig {
name: string;
radius: number; // size of the planet
distance: number; // distance from sun
speed: number; // orbital speed factor
Solar system: eight planets
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ============================================================================
// TCP HANDSHAKE VIEW (Preserved)
// ============================================================================
export const TCPHandshakeView = () => {
const [step, setStep] = useState(0); // 0: Idle, 1: SYN, 2: SYN-ACK, 3: ACK, 4: Connected
useEffect(() => {
const timer
TCP three-way handshake
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ============================================================================
// BUBBLE SORT VIEW (Preserved)
// ============================================================================
export const BubbleSortView = () => {
const [arr, setArr] = useState([40, 100, 20, 80, 60, 120, 10, 90]);
const [comparing, setComparing] = useState<number[]>([]);
c