手绘日记时间轴与节点动画流SVG 路径跟随动效在手账月度复盘或人生里程碑视图中把离散的日记和打卡记录串联成一条**“蜿蜒曲折、带有自然手绘起伏的水彩藤蔓时间轴Winding Hand-Drawn Timeline”**能给用户带来极具沉浸感的时光漫游体验。很多前端开发者在做时间轴时习惯用一根笔直死板的垂直线div classw-0.5 bg-gray-200把卡片机械地贴在左右两侧。真实的手账时间轴应该像一根自由生长的藤蔓带有自然的 S 型曲线摆动小叶片和盖章节点随着滚动沿着曲线平滑绽放Motion Path SVG Stroke Interpolation。今天我们用SVG 贝塞尔曲线、CSSoffset-path路径跟随动画与滚动驱动动画Scroll-driven Animations纯代码实现一个极度优雅的手绘时间轴组件。-------------------------------------------------------------------- | SVG 手绘蜿蜒藤蔓时间轴物理模型 | -------------------------------------------------------------------- | 主路径: path dM 50,0 C 20,100 80,200 50,300 C 20,400 80,500... /| | └── stroke: #88AA99 (鼠尾草绿) 带有 1.5px 手绘微抖动描边 | | | | 路径生长动画 (随着用户向下滑动网页): | | └── stroke-dasharray / stroke-dashoffset 紧随 window.scrollY 伸展 | | | | 时间轴里程碑节点 (Milestone Nodes): | | ├── offset-path: path(...) 沿主藤蔓曲线精确定位 | | └── 滚动到视口时: 触发朱砂印章盖落或水彩绿叶舒展动画 | --------------------------------------------------------------------1. 核心 React SVG 手绘蜿蜒藤蔓时间轴实现import React, { useEffect, useRef, useState } from react; export const WindingHandDrawnTimeline: React.FC{ items: { date: string; title: string }[] } ({ items, }) { const containerRef useRefHTMLDivElement | null(null); const [scrollProgress, setScrollProgress] useState(0); useEffect(() { const handleScroll () { if (!containerRef.current) return; const rect containerRef.current.getBoundingClientRect(); const windowH window.innerHeight; // 计算容器在当前视口中的滚动百分比 (0 到 1) const progress Math.min(1, Math.max(0, (windowH - rect.top) / (rect.height windowH * 0.5))); setScrollProgress(progress); }; window.addEventListener(scroll, handleScroll, { passive: true }); return () window.removeEventListener(scroll, handleScroll); }, []); return ( div ref{containerRef} classNamerelative max-w-lg mx-auto py-12 px-6 {/* 蜿蜒藤蔓背景 SVG */} svg classNameabsolute top-0 left-1/2 -translate-x-1/2 w-24 h-full pointer-events-none viewBox0 0 100 800 preserveAspectRationone path dM 50,0 Q 15,100 50,200 T 50,400 T 50,600 T 50,800 stroke#88AA99 strokeWidth3 strokeLinecapround strokeDasharray900 strokeDashoffset{900 * (1 - scrollProgress)} fillnone classNametransition-all duration-300 / /svg {/* 沿时间轴分布的手绘卡片 */} div classNamespace-y-16 relative z-10 {items.map((item, idx) ( div key{idx} className{flex items-center gap-4 ${idx % 2 0 ? flex-row-reverse text-right : flex-row}} div classNamew-1/2 p-4 bg-[#FAF7F0] border-2 border-[#2D2B2A] rounded-2xl shadow-[2px_2px_0px_#2D2B2A] span classNametext-[11px] font-bold text-[#D36135] font-mono{item.date}/span h5 classNametext-sm font-bold text-[#2D2B2A] mt-0.5{item.title}/h5 /div {/* 中心水彩节点小印章 */} div classNamew-6 h-6 rounded-full bg-[#FAF7F0] border-2 border-[#88AA99] flex items-center justify-center shrink-0 z-20 shadow-sm span classNamew-2 h-2 rounded-full bg-[#88AA99] / /div div classNamew-1/2 / /div ))} /div /div ); };蜿蜒曲线的情感力量当手指滑动屏幕绿色的水彩藤蔓在宣纸上缓缓延展一颗颗温润的节点被依次点亮。让时光在屏幕上流淌出诗意的弧度把每一天的坚持汇聚成一条动人的岁月之河。