【免费下载链接】textfoldFold papers, web pages, files, and AI replies into five levels of detail. Zoom from an overview to the original text.项目地址https://gitcode.com/gh_mirrors/te/textfold点击查看免费下载TextFold 是一个把论文、网页、文件和 AI 回复折叠成五个详细程度级别的阅读工具支持从主题概览一路放大到原文。很多读者第一次体验时都会问同一个问题用滚轮、双指捏合或缩放条去缩放一篇文档为什么文字会平滑地滑动、缩放、淡入淡出而不是生硬地重新排版这篇文章带你拆解TextFold 平滑缩放背后的三层实现用FLIP 动画完成逐词变形、用关键帧预布局让缩放过程零布局开销再用zoombench从屏幕帧级实测平滑度作为每次改动的回归门槛。一、五个级别缩放是一个位置不是一次跳转 ️TextFold 把任意文档折成五档级别名称你看到什么4Full原文每个字3Brief作者的 1–3 句原话2Key每个要点的结论和理由1Takeaway每个章节的一句话0Topic全文变成章节主题地图在实现上滚轮、捏合、滑条并不是跳到下一个级别而是移动一个连续的缩放位置4 Full … 0 Topic。你可以停在半路、随时折返手一停位置就会弹性地吸附到最近的级别。这一点在 textfold/web/reader.js 开头的注释里写得很直白zoom as a position, not a jump。二、FLIP 动画逐词变形的原理 先说结论TextFold 阅读器里每一个可见的部分——词、公式、圆点、标题、图——都是一个带data-id的元素这个 id 在所有级别之间保持不变。级别切换时它做的事情就是标准的 FLIPFirst, Last, Invert, PlayFirst切换前对屏幕附近的元素拍一张快照——记录每个部分的位置和外观。快照只量视口附近的东西一篇完整论文有约 2 万个这样的小块并且按容器 类名缓存计算样式避免反复触发样式计算见 snapshot()Last把内容重新渲染成新级别Invert对每个幸存的部分算出它从旧位置到新位置、从旧大小到新大小的差值Play用 Web Animations API 给每个元素挂一个transform: translate() scale()的动画让它滑回自己的新位置消失的部分则由一个幽灵副本在原地淡出。核心动画构建在 buildMotion()一次完整的定时变形由 morph() 串起来。FLIP 整段代码就在 textfold/web/reader.js 里。下面这段动图就是 FLIP 的效果级别切换时词和公式沿着连续的路径滑动、缩放而不是整页刷新三、关键帧预布局一个不做任何布局的舞台 FLIP 解决的是切换那一瞬间的动画但还有一个更棘手的问题每跨越一个级别屏幕附近的内容就要重新排版一次普通论文上约 30–70 ms。这个停顿手放在滚轮和滑条上能明显感觉到卡顿。TextFold 的解法叫 the stage舞台源码注释在 reader.js核心思想非常巧妙空闲时预布局当读者停下来不动时程序利用每一个空闲瞬间在一个隐藏的sandbox沙盒里把当前可见片段在每一个级别各排版一次并把每个可见部分的定位副本存下来——一共5 张关键帧。预热的调度逻辑在 warm()一次只排一个级别绝不抢占交互。相邻级别预建配对两张关键帧之间每个部分要么整体平移缩放move、要么淡出out、要么淡入in、要么换字体时交叉淡化x。把运动方式相同的几百个词合并成一组整组只有一个 GPU 图层、一条动画——密集论文从几千个词各跑各的变成几百组一起动。配对构建在 buildPair()注释里还留着一个真实教训不分组时某篇论文一半的帧都被丢掉了。缩放时只放片不排版缩放一触发页面被舞台盖住页面保持原样、不再重绘每一帧都只是移动和淡入淡出副本——包括跨越级别的那几帧全程零布局。舞台的准入在 stageBegin()逐帧推进在 stageFrame()。静止时换回真页面缩放停在某个级别时页面按该级别关键帧的样子画出真身在同一帧内接管舞台的位置观感上完全无缝见 stageCommit()。两个工程细节值得一提沙盒和舞台都放在一个封闭的 shadow tree里——几千个副本的增删移不在文档里浏览器插件翻译器、广告拦截就无须处理它们实测证明留在页面里会让页面冻结数秒而当关键帧还没就绪新开的页面、跨度过大的跳跃时缩放会回退到第二节说的实时 FLIP 动画保证任何时候都有得放。四、zoombench以屏幕视角的帧级实测 感觉流畅不是指标。TextFold 把平滑度当规则——项目文档 docs/DEVELOPMENT.md 里有一节专门叫Smoothness is a rule任何改动都不许让缩放变得更不流畅改之前和改之后都必须实测。测量工具是 tools/zoombench.py。它为什么这么设计文件开头的注释讲得很清楚用 Playwright 驱动 Chromium开 Mac 的 GPUMetal、2 倍像素密度模拟真实读者的屏幕在每个版本页面上重放同样的手势捏合放大、捏合缩小、拖拽级别条、点击 Full然后读Chrome 自己的帧 trace实际呈现的帧数、丢帧数、最长的帧间隔统计逻辑见 stats()。为什么不用requestAnimationFrame量帧间隔因为默认无头浏览器是软件渲染、1 倍像素只看得见主线程——v0.8 版本在那个环境里每一帧都在 17 ms 以内、完美无缺却在真实 GPU 2 倍屏上每 5 帧丢 1 帧而后者才是读者真正感觉到的。运行方式在密集论文 2512.23916 上对比各版本python3 -m textfold export 2512.23916 python3 tools/zoombench.py 2512.23916输出类似pinch out -L3: {ms: 1760, presented: 105, dropped: 0, drop%: 0, worst gaps ms: [18, 17, 17, 17]}——丢帧数和最长卡顿一目了然。五、小结三层机制各管一段FLIP 动画级别离散跳转时的逐词变形靠data-id贯穿五个级别量旧位、排新版、反转变形、滑回原位关键帧预布局 舞台连续缩放时的零布局体验空闲时把五个级别全部预排好缩放时只移动 GPU 上的副本zoombench 帧级实测用真实 GPU、真实屏幕帧 trace 把平滑变成一个可回归的硬指标。想继续深挖入口是 textfold/web/reader.js渲染 FLIP 变形 舞台和 tools/zoombench.py平滑度实测项目文档在 docs/DEVELOPMENT.md 的Smoothness is a rule一节。赞分享【免费下载链接】textfoldFold papers, web pages, files, and AI replies into five levels of detail. Zoom from an overview to the original text.项目地址https://gitcode.com/gh_mirrors/te/textfold点击查看免费下载相关推荐CartCut关键帧动画完全指南19个内置动效预设不装After Effects做出平滑运动特效CartCut关键帧动画完全指南19个内置动效预设不装After Effects做出平滑运动特效 CartCut 是一款面向 AI 智能体的开源视频编辑器Mergen开发环境搭建从编译到运行的简单步骤Mergen开发环境搭建从编译到运行的简单步骤 Mergen是一款功能强大的x64 PE到LLVM IR反混淆与反虚拟化工具能够将汇编代码转换为LLVM中间深度解析开源无人机飞控系统从STM32实战到嵌入式系统开发深度解析开源无人机飞控系统从STM32实战到嵌入式系统开发 在嵌入式系统开发领域无人机飞控系统代表着实时控制技术的最高挑战。本文将深入探讨基于STM32的轻无人机嵌入式智能硬件上一篇《The Book of Shaders》开篇导读Fragment Shader片段着色器并行渲染原理与完整学习路径下一篇深色系架构图生成技能 architecture-diagramClaude Skill 设计规范与实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考