SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useEffect, useState, useRef } from 'react';
const ElectromagneticWave = () => {
const [time, setTime] = useState(0);
const requestRef = useRef<number>();
const animate = (t: number) => {
setTime(t / 1000);
requestRef.current = requestAnimationFrame(animate);
};
useEffect(() => {
requestRef.current = requestAnimationFrame(animate);
return () => {
if (requestRef.current) cancelAnimationFrame(requestRef.current);
};
}, []);
电磁波是如何产生的
移开即停止播放
'use client';
import React, { useEffect, useRef, useState, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
const ACCENT_COLOR = '#38bdf8'; // Cyan
const HARMONIC_COLORS = ['#fbbf24', '#f472b6', '#4ade80', '#818cf8'];
const FourierDecomposition = () => {
const requestRef = useRef<number>();
const [time, setTime] = useState(0);
// 动画循环
const animate = (t: number) => {
setTime(t / 1000);
requestRef.current = requestAn
把复杂信号分解成多个不同频率的正弦信号
移开即停止播放
import React, { useState, useEffect, useRef } from 'react';
const OpAmpPrinciple = () => {
const [time, setTime] = useState(0);
const requestRef = useRef();
// 模拟参数
const amplitude = 40;
const frequency = 0.05;
const gain = 2.5;
const rin = 100;
const rf = 250;
useEffect(() => {
const animate = (t) => {
setTime(t * 0.002);
requestRef.current = requestAnimationFrame(animate);
};
requestRef.current = requestAnimationFrame(animate);
return () => canc
生成一个运算放大器工作原理动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export default function TransistorWorkingPrinciple() {
const [phase, setPhase] = useState(0); // 0: Off, 1: Gate Charging, 2: Channel Formed, 3: Conducting
const [electrons, setElectrons] = useState([]);
const requestRef = useRef();
// 模拟生命周期：循环展示工作原理
useEffect(() => {
const timer = setInterval(() => {
setPhase((prev) => (prev + 1) % 4);
生成一个晶体管工作原理动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLOR_BG = "#0f172a";
const COLOR_PC = "#38bdf8"; // Sky blue
const COLOR_MCU = "#fbbf24"; // Amber
const COLOR_WIRE_TX = "#22d3ee"; // Cyan
const COLOR_WIRE_RX = "#f472b6"; // Pink
const COLOR_DATA = "#4ade80"; // Green
const COLOR_TEXT = "#e2e8f0"; // Slate 200
// Helper to get bits from char (LSB first for UART)
const getBits = (char: string) => {
con
单片机中通过UART口，电脑和51单片机通信过程
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
// Colors
const COLOR_BG = '#0f172a';
const COLOR_P_BG = 'rgba(236, 72, 153, 0.1)'; // Pink tint
const COLOR_N_BG = 'rgba(6, 182, 212, 0.1)'; // Cyan tint
const COLOR_HOLE = '#ec4899'; // P-type carrier (+)
const COLOR_ELECTRON = '#06b6d4'; // N-type carrier (-)
const COLOR_ION_NEG = '#9d174d'; // Fixed acceptor (-)
const COLOR_I
講解電子學 pn半導體的結合
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// --- 常量与配置 ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 配色方案：深色科技风
const THEME = {
bg: '#0f172a', // Slate 900
panel: '#1e293b', // Slate 800
grid: '#334155', // Slate 700
primary: '#0ea5e9', // Sky 500 (常规/电路)
cut: '#facc15', // Yellow 400 (切割 - 纯净)
coag: '#f97316', // Orange 500 (凝血 - 热力)
text: '#f1f5f9', // Slate 100
textDim: '#94a3b8', // Slate 400