[{"data":1,"prerenderedAt":1616},["ShallowReactive",2],{"navigation":3,"\u002Fconcepts\u002Fframe-adapters":686,"\u002Fconcepts\u002Fframe-adapters-surround":1611},[4,31,57,147,168,198,652],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"快速入门","i-lucide-rocket","\u002Fgetting-started","01.getting-started",[10,14,18,22,26],{"title":11,"path":12,"stem":13},"简介","\u002Fgetting-started\u002Fintroduction","01.getting-started\u002F01.introduction",{"title":15,"path":16,"stem":17},"快速开始","\u002Fgetting-started\u002Fquickstart","01.getting-started\u002F02.quickstart",{"title":19,"path":20,"stem":21},"展示作品","\u002Fgetting-started\u002Fshowcase","01.getting-started\u002F03.showcase",{"title":23,"path":24,"stem":25},"示例","\u002Fgetting-started\u002Fexamples","01.getting-started\u002F04.examples",{"title":27,"path":28,"stem":29},"发布视频","\u002Fgetting-started\u002Flaunch-videos","01.getting-started\u002F05.launch-videos",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"核心概念","i-lucide-lightbulb","\u002Fconcepts","02.concepts",[37,41,45,49,53],{"title":38,"path":39,"stem":40},"合成","\u002Fconcepts\u002Fcompositions","02.concepts\u002F01.compositions",{"title":42,"path":43,"stem":44},"数据属性","\u002Fconcepts\u002Fdata-attributes","02.concepts\u002F02.data-attributes",{"title":46,"path":47,"stem":48},"变量","\u002Fconcepts\u002Fvariables","02.concepts\u002F03.variables",{"title":50,"path":51,"stem":52},"帧适配器","\u002Fconcepts\u002Fframe-adapters","02.concepts\u002F04.frame-adapters",{"title":54,"path":55,"stem":56},"确定性渲染","\u002Fconcepts\u002Fdeterminism","02.concepts\u002F05.determinism",{"title":58,"icon":59,"path":60,"stem":61,"children":62,"page":30},"使用指南","i-lucide-compass","\u002Fguides","03.guides",[63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143],{"title":64,"path":65,"stem":66},"工作流水线","\u002Fguides\u002Fpipeline","03.guides\u002F01.pipeline",{"title":68,"path":69,"stem":70},"HTML-in-Canvas","\u002Fguides\u002Fhtml-in-canvas","03.guides\u002F02.html-in-canvas",{"title":72,"path":73,"stem":74},"网站转视频","\u002Fguides\u002Fwebsite-to-video","03.guides\u002F03.website-to-video",{"title":76,"path":77,"stem":78},"Google Antigravity","\u002Fguides\u002Fantigravity","03.guides\u002F04.antigravity",{"title":80,"path":81,"stem":82},"GitHub Copilot CLI","\u002Fguides\u002Fcopilot-cli","03.guides\u002F05.copilot-cli",{"title":84,"path":85,"stem":86},"Claude Design","\u002Fguides\u002Fclaude-design","03.guides\u002F06.claude-design",{"title":88,"path":89,"stem":90},"Open Design","\u002Fguides\u002Fopen-design","03.guides\u002F07.open-design",{"title":92,"path":93,"stem":94},"提示词指南","\u002Fguides\u002Fprompting","03.guides\u002F08.prompting",{"title":96,"path":97,"stem":98},"Hyperframes vs Remotion","\u002Fguides\u002Fhyperframes-vs-remotion","03.guides\u002F09.hyperframes-vs-remotion",{"title":100,"path":101,"stem":102},"GSAP 动画","\u002Fguides\u002Fgsap-animation","03.guides\u002F10.gsap-animation",{"title":104,"path":105,"stem":106},"渲染","\u002Fguides\u002Frendering","03.guides\u002F11.rendering",{"title":108,"path":109,"stem":110},"去除背景（透明视频）","\u002Fguides\u002Fremove-background","03.guides\u002F12.remove-background",{"title":112,"path":113,"stem":114},"HDR 渲染","\u002Fguides\u002Fhdr","03.guides\u002F13.hdr",{"title":116,"path":117,"stem":118},"4K 渲染","\u002Fguides\u002F4k-rendering","03.guides\u002F14.4k-rendering",{"title":120,"path":121,"stem":122},"性能","\u002Fguides\u002Fperformance","03.guides\u002F15.performance",{"title":124,"path":125,"stem":126},"时间轴编辑","\u002Fguides\u002Ftimeline-editing","03.guides\u002F16.timeline-editing",{"title":128,"path":129,"stem":130},"视频编辑者速查表","\u002Fguides\u002Fvideo-editor-cheatsheet","03.guides\u002F17.video-editor-cheatsheet",{"title":132,"path":133,"stem":134},"常见错误","\u002Fguides\u002Fcommon-mistakes","03.guides\u002F18.common-mistakes",{"title":136,"path":137,"stem":138},"故障排除","\u002Fguides\u002Ftroubleshooting","03.guides\u002F19.troubleshooting",{"title":140,"path":141,"stem":142},"反馈收集","\u002Fguides\u002Ffeedback","03.guides\u002F20.feedback",{"title":144,"path":145,"stem":146},"HyperFrames MCP","\u002Fguides\u002Fmcp","03.guides\u002F21.mcp",{"title":148,"icon":149,"path":150,"stem":151,"children":152,"page":30},"部署","i-lucide-cloud","\u002Fdeploy","04.deploy",[153,156,160,164],{"title":148,"path":154,"stem":155},"\u002Fdeploy\u002Fdeploy","04.deploy\u002F01.deploy",{"title":157,"path":158,"stem":159},"AWS Lambda","\u002Fdeploy\u002Faws-lambda","04.deploy\u002F02.aws-lambda",{"title":161,"path":162,"stem":163},"Lambda 上的模板","\u002Fdeploy\u002Ftemplates-on-lambda","04.deploy\u002F03.templates-on-lambda",{"title":165,"path":166,"stem":167},"迁移到 HyperFrames Lambda","\u002Fdeploy\u002Fmigrating-to-hyperframes-lambda","04.deploy\u002F04.migrating-to-hyperframes-lambda",{"title":169,"icon":170,"path":171,"stem":172,"children":173,"page":30},"包","i-lucide-package","\u002Fpackages","05.packages",[174,178,182,186,190,194],{"title":175,"path":176,"stem":177},"@hyperframes\u002Fcore","\u002Fpackages\u002Fcore","05.packages\u002F01.core",{"title":179,"path":180,"stem":181},"@hyperframes\u002Fengine","\u002Fpackages\u002Fengine","05.packages\u002F02.engine",{"title":183,"path":184,"stem":185},"@hyperframes\u002Fplayer","\u002Fpackages\u002Fplayer","05.packages\u002F03.player",{"title":187,"path":188,"stem":189},"@hyperframes\u002Fproducer","\u002Fpackages\u002Fproducer","05.packages\u002F04.producer",{"title":191,"path":192,"stem":193},"@hyperframes\u002Fstudio","\u002Fpackages\u002Fstudio","05.packages\u002F05.studio",{"title":195,"path":196,"stem":197},"CLI","\u002Fpackages\u002Fcli","05.packages\u002F06.cli",{"title":199,"icon":200,"path":201,"stem":202,"children":203,"page":30},"组件目录","i-lucide-layout-grid","\u002Fcatalog","06.catalog",[204,270,324,358,420,478,512,546,584,598],{"title":205,"icon":206,"path":207,"stem":208,"children":209,"page":30},"字幕","i-lucide-captions","\u002Fcatalog\u002Fcaption","06.catalog\u002F01.caption",[210,214,218,222,226,230,234,238,242,246,250,254,258,262,266],{"title":211,"path":212,"stem":213},"裁剪擦除","\u002Fcatalog\u002Fcaption\u002Fcaption-clip-wipe","06.catalog\u002F01.caption\u002F01.caption-clip-wipe",{"title":215,"path":216,"stem":217},"编辑强调","\u002Fcatalog\u002Fcaption\u002Fcaption-editorial-emphasis","06.catalog\u002F01.caption\u002F02.caption-editorial-emphasis",{"title":219,"path":220,"stem":221},"Emoji 弹出","\u002Fcatalog\u002Fcaption\u002Fcaption-emoji-pop","06.catalog\u002F01.caption\u002F03.caption-emoji-pop",{"title":223,"path":224,"stem":225},"故障 RGB","\u002Fcatalog\u002Fcaption\u002Fcaption-glitch-rgb","06.catalog\u002F01.caption\u002F04.caption-glitch-rgb",{"title":227,"path":228,"stem":229},"渐变填充","\u002Fcatalog\u002Fcaption\u002Fcaption-gradient-fill","06.catalog\u002F01.caption\u002F05.caption-gradient-fill",{"title":231,"path":232,"stem":233},"高亮","\u002Fcatalog\u002Fcaption\u002Fcaption-highlight","06.catalog\u002F01.caption\u002F06.caption-highlight",{"title":235,"path":236,"stem":237},"动感冲击","\u002Fcatalog\u002Fcaption\u002Fcaption-kinetic-slam","06.catalog\u002F01.caption\u002F07.caption-kinetic-slam",{"title":239,"path":240,"stem":241},"矩阵解码","\u002Fcatalog\u002Fcaption\u002Fcaption-matrix-decode","06.catalog\u002F01.caption\u002F08.caption-matrix-decode",{"title":243,"path":244,"stem":245},"霓虹强调","\u002Fcatalog\u002Fcaption\u002Fcaption-neon-accent","06.catalog\u002F01.caption\u002F09.caption-neon-accent",{"title":247,"path":248,"stem":249},"霓虹发光","\u002Fcatalog\u002Fcaption\u002Fcaption-neon-glow","06.catalog\u002F01.caption\u002F10.caption-neon-glow",{"title":251,"path":252,"stem":253},"视差图层","\u002Fcatalog\u002Fcaption\u002Fcaption-parallax-layers","06.catalog\u002F01.caption\u002F11.caption-parallax-layers",{"title":255,"path":256,"stem":257},"粒子爆发","\u002Fcatalog\u002Fcaption\u002Fcaption-particle-burst","06.catalog\u002F01.caption\u002F12.caption-particle-burst",{"title":259,"path":260,"stem":261},"胶囊卡拉OK","\u002Fcatalog\u002Fcaption\u002Fcaption-pill-karaoke","06.catalog\u002F01.caption\u002F13.caption-pill-karaoke",{"title":263,"path":264,"stem":265},"纹理","\u002Fcatalog\u002Fcaption\u002Fcaption-texture","06.catalog\u002F01.caption\u002F14.caption-texture",{"title":267,"path":268,"stem":269},"字重切换","\u002Fcatalog\u002Fcaption\u002Fcaption-weight-shift","06.catalog\u002F01.caption\u002F15.caption-weight-shift",{"title":271,"icon":272,"path":273,"stem":274,"children":275,"page":30},"HTML 画布","i-lucide-layout-dashboard","\u002Fcatalog\u002Fhtml-canvas","06.catalog\u002F02.html-canvas",[276,280,284,288,292,296,300,304,308,312,316,320],{"title":277,"path":278,"stem":279},"iOS 26 Liquid Glass 主屏幕","\u002Fcatalog\u002Fhtml-canvas\u002Fios26-liquid-glass","06.catalog\u002F02.html-canvas\u002F01.ios26-liquid-glass",{"title":281,"path":282,"stem":283},"Liquid Glass 右键菜单","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-context-menu","06.catalog\u002F02.html-canvas\u002F02.liquid-glass-context-menu",{"title":285,"path":286,"stem":287},"Liquid Glass 媒体控制","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-media-controls","06.catalog\u002F02.html-canvas\u002F03.liquid-glass-media-controls",{"title":289,"path":290,"stem":291},"Liquid Glass 通知","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-notification","06.catalog\u002F02.html-canvas\u002F04.liquid-glass-notification",{"title":293,"path":294,"stem":295},"Liquid Glass 小组件","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-widgets","06.catalog\u002F02.html-canvas\u002F05.liquid-glass-widgets",{"title":297,"path":298,"stem":299},"macOS Tahoe Liquid Glass 桌面","\u002Fcatalog\u002Fhtml-canvas\u002Fmacos-tahoe-liquid-glass","06.catalog\u002F02.html-canvas\u002F06.macos-tahoe-liquid-glass",{"title":301,"path":302,"stem":303},"iPhone & MacBook 3D 展示","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-iphone-device","06.catalog\u002F02.html-canvas\u002F07.vfx-iphone-device",{"title":305,"path":306,"stem":307},"液态背景","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-liquid-background","06.catalog\u002F02.html-canvas\u002F08.vfx-liquid-background",{"title":309,"path":310,"stem":311},"磁力效果","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-magnetic","06.catalog\u002F02.html-canvas\u002F09.vfx-magnetic",{"title":313,"path":314,"stem":315},"传送门","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-portal","06.catalog\u002F02.html-canvas\u002F10.vfx-portal",{"title":317,"path":318,"stem":319},"碎裂效果","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-shatter","06.catalog\u002F02.html-canvas\u002F11.vfx-shatter",{"title":321,"path":322,"stem":323},"VFX 文字光标","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-text-cursor","06.catalog\u002F02.html-canvas\u002F12.vfx-text-cursor",{"title":325,"icon":326,"path":327,"stem":328,"children":329,"page":30},"社交叠加层","i-lucide-share-2","\u002Fcatalog\u002Fsocial-overlays","06.catalog\u002F03.social-overlays",[330,334,338,342,346,350,354],{"title":331,"path":332,"stem":333},"Instagram 关注","\u002Fcatalog\u002Fsocial-overlays\u002Finstagram-follow","06.catalog\u002F03.social-overlays\u002F01.instagram-follow",{"title":335,"path":336,"stem":337},"macOS 通知","\u002Fcatalog\u002Fsocial-overlays\u002Fmacos-notification","06.catalog\u002F03.social-overlays\u002F02.macos-notification",{"title":339,"path":340,"stem":341},"Reddit 帖子卡片","\u002Fcatalog\u002Fsocial-overlays\u002Freddit-post","06.catalog\u002F03.social-overlays\u002F03.reddit-post",{"title":343,"path":344,"stem":345},"Spotify 正在播放","\u002Fcatalog\u002Fsocial-overlays\u002Fspotify-card","06.catalog\u002F03.social-overlays\u002F04.spotify-card",{"title":347,"path":348,"stem":349},"TikTok 关注","\u002Fcatalog\u002Fsocial-overlays\u002Ftiktok-follow","06.catalog\u002F03.social-overlays\u002F05.tiktok-follow",{"title":351,"path":352,"stem":353},"X 帖子卡片","\u002Fcatalog\u002Fsocial-overlays\u002Fx-post","06.catalog\u002F03.social-overlays\u002F06.x-post",{"title":355,"path":356,"stem":357},"YouTube 下方三分之一","\u002Fcatalog\u002Fsocial-overlays\u002Fyt-lower-third","06.catalog\u002F03.social-overlays\u002F07.yt-lower-third",{"title":359,"icon":360,"path":361,"stem":362,"children":363,"page":30},"着色器过渡","i-lucide-wand-2","\u002Fcatalog\u002Fshader-transitions","06.catalog\u002F04.shader-transitions",[364,368,372,376,380,384,388,392,396,400,404,408,412,416],{"title":365,"path":366,"stem":367},"色散径向分裂","\u002Fcatalog\u002Fshader-transitions\u002Fchromatic-radial-split","06.catalog\u002F04.shader-transitions\u002F01.chromatic-radial-split",{"title":369,"path":370,"stem":371},"电影感变焦","\u002Fcatalog\u002Fshader-transitions\u002Fcinematic-zoom","06.catalog\u002F04.shader-transitions\u002F02.cinematic-zoom",{"title":373,"path":374,"stem":375},"交叉扭曲变形","\u002Fcatalog\u002Fshader-transitions\u002Fcross-warp-morph","06.catalog\u002F04.shader-transitions\u002F03.cross-warp-morph",{"title":377,"path":378,"stem":379},"域扭曲溶解","\u002Fcatalog\u002Fshader-transitions\u002Fdomain-warp-dissolve","06.catalog\u002F04.shader-transitions\u002F04.domain-warp-dissolve",{"title":381,"path":382,"stem":383},"白色闪光过渡","\u002Fcatalog\u002Fshader-transitions\u002Fflash-through-white","06.catalog\u002F04.shader-transitions\u002F05.flash-through-white",{"title":385,"path":386,"stem":387},"故障效果","\u002Fcatalog\u002Fshader-transitions\u002Fglitch","06.catalog\u002F04.shader-transitions\u002F06.glitch",{"title":389,"path":390,"stem":391},"引力透镜","\u002Fcatalog\u002Fshader-transitions\u002Fgravitational-lens","06.catalog\u002F04.shader-transitions\u002F07.gravitational-lens",{"title":393,"path":394,"stem":395},"光线泄漏","\u002Fcatalog\u002Fshader-transitions\u002Flight-leak","06.catalog\u002F04.shader-transitions\u002F08.light-leak",{"title":397,"path":398,"stem":399},"褶皱燃烧","\u002Fcatalog\u002Fshader-transitions\u002Fridged-burn","06.catalog\u002F04.shader-transitions\u002F09.ridged-burn",{"title":401,"path":402,"stem":403},"涟漪波纹","\u002Fcatalog\u002Fshader-transitions\u002Fripple-waves","06.catalog\u002F04.shader-transitions\u002F10.ripple-waves",{"title":405,"path":406,"stem":407},"SDF 光圈","\u002Fcatalog\u002Fshader-transitions\u002Fsdf-iris","06.catalog\u002F04.shader-transitions\u002F11.sdf-iris",{"title":409,"path":410,"stem":411},"漩涡涡流","\u002Fcatalog\u002Fshader-transitions\u002Fswirl-vortex","06.catalog\u002F04.shader-transitions\u002F12.swirl-vortex",{"title":413,"path":414,"stem":415},"热浪扭曲","\u002Fcatalog\u002Fshader-transitions\u002Fthermal-distortion","06.catalog\u002F04.shader-transitions\u002F13.thermal-distortion",{"title":417,"path":418,"stem":419},"快速摇摄","\u002Fcatalog\u002Fshader-transitions\u002Fwhip-pan","06.catalog\u002F04.shader-transitions\u002F14.whip-pan",{"title":421,"icon":422,"path":423,"stem":424,"children":425,"page":30},"CSS 过渡","i-lucide-repeat","\u002Fcatalog\u002Fcss-transitions","06.catalog\u002F05.css-transitions",[426,430,434,438,442,446,450,454,458,462,466,470,474],{"title":427,"path":428,"stem":429},"3D 过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-3d","06.catalog\u002F05.css-transitions\u002F01.transitions-3d",{"title":431,"path":432,"stem":433},"模糊过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-blur","06.catalog\u002F05.css-transitions\u002F02.transitions-blur",{"title":435,"path":436,"stem":437},"覆盖过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-cover","06.catalog\u002F05.css-transitions\u002F03.transitions-cover",{"title":439,"path":440,"stem":441},"破碎过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-destruction","06.catalog\u002F05.css-transitions\u002F04.transitions-destruction",{"title":443,"path":444,"stem":445},"溶解过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-dissolve","06.catalog\u002F05.css-transitions\u002F05.transitions-dissolve",{"title":447,"path":448,"stem":449},"扭曲过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-distortion","06.catalog\u002F05.css-transitions\u002F06.transitions-distortion",{"title":451,"path":452,"stem":453},"网格过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-grid","06.catalog\u002F05.css-transitions\u002F07.transitions-grid",{"title":455,"path":456,"stem":457},"光效过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-light","06.catalog\u002F05.css-transitions\u002F08.transitions-light",{"title":459,"path":460,"stem":461},"机械过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-mechanical","06.catalog\u002F05.css-transitions\u002F09.transitions-mechanical",{"title":463,"path":464,"stem":465},"其他过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-other","06.catalog\u002F05.css-transitions\u002F10.transitions-other",{"title":467,"path":468,"stem":469},"推移过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-push","06.catalog\u002F05.css-transitions\u002F11.transitions-push",{"title":471,"path":472,"stem":473},"径向过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-radial","06.catalog\u002F05.css-transitions\u002F12.transitions-radial",{"title":475,"path":476,"stem":477},"缩放过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-scale","06.catalog\u002F05.css-transitions\u002F13.transitions-scale",{"title":479,"icon":480,"path":481,"stem":482,"children":483,"page":30},"展示","i-lucide-monitor-play","\u002Fcatalog\u002Fshowcase","06.catalog\u002F06.showcase",[484,488,492,496,500,504,508],{"title":485,"path":486,"stem":487},"应用展示","\u002Fcatalog\u002Fshowcase\u002Fapp-showcase","06.catalog\u002F06.showcase\u002F01.app-showcase",{"title":489,"path":490,"stem":491},"Apple 金额计数器","\u002Fcatalog\u002Fshowcase\u002Fapple-money-count","06.catalog\u002F06.showcase\u002F02.apple-money-count",{"title":493,"path":494,"stem":495},"蓝色毛衣开场视频","\u002Fcatalog\u002Fshowcase\u002Fblue-sweater-intro-video","06.catalog\u002F06.showcase\u002F03.blue-sweater-intro-video",{"title":497,"path":498,"stem":499},"朝鲜封锁","\u002Fcatalog\u002Fshowcase\u002Fnorth-korea-locked-down","06.catalog\u002F06.showcase\u002F04.north-korea-locked-down",{"title":501,"path":502,"stem":503},"纽约巴黎航班","\u002Fcatalog\u002Fshowcase\u002Fnyc-paris-flight","06.catalog\u002F06.showcase\u002F05.nyc-paris-flight",{"title":505,"path":506,"stem":507},"3D UI 展示","\u002Fcatalog\u002Fshowcase\u002Fui-3d-reveal","06.catalog\u002F06.showcase\u002F06.ui-3d-reveal",{"title":509,"path":510,"stem":511},"VPN YouTube 广告片段","\u002Fcatalog\u002Fshowcase\u002Fvpn-youtube-spot","06.catalog\u002F06.showcase\u002F07.vpn-youtube-spot",{"title":513,"icon":514,"path":515,"stem":516,"children":517,"page":30},"数据","i-lucide-bar-chart-3","\u002Fcatalog\u002Fdata","06.catalog\u002F07.data",[518,522,526,530,534,538,542],{"title":519,"path":520,"stem":521},"数据图表","\u002Fcatalog\u002Fdata\u002Fdata-chart","06.catalog\u002F07.data\u002F01.data-chart",{"title":523,"path":524,"stem":525},"西班牙地图","\u002Fcatalog\u002Fdata\u002Fspain-map","06.catalog\u002F07.data\u002F02.spain-map",{"title":527,"path":528,"stem":529},"美国地图","\u002Fcatalog\u002Fdata\u002Fus-map","06.catalog\u002F07.data\u002F03.us-map",{"title":531,"path":532,"stem":533},"美国气泡地图","\u002Fcatalog\u002Fdata\u002Fus-map-bubble","06.catalog\u002F07.data\u002F04.us-map-bubble",{"title":535,"path":536,"stem":537},"美国流动地图","\u002Fcatalog\u002Fdata\u002Fus-map-flow","06.catalog\u002F07.data\u002F05.us-map-flow",{"title":539,"path":540,"stem":541},"美国六边形网格地图","\u002Fcatalog\u002Fdata\u002Fus-map-hex","06.catalog\u002F07.data\u002F06.us-map-hex",{"title":543,"path":544,"stem":545},"世界地图","\u002Fcatalog\u002Fdata\u002Fworld-map","06.catalog\u002F07.data\u002F07.world-map",{"title":547,"icon":548,"path":549,"stem":550,"children":551,"page":30},"效果","i-lucide-sparkles","\u002Fcatalog\u002Feffects","06.catalog\u002F08.effects",[552,556,560,564,568,572,576,580],{"title":553,"path":554,"stem":555},"差值混合","\u002Fcatalog\u002Feffects\u002Fcaption-blend-difference","06.catalog\u002F08.effects\u002F01.caption-blend-difference",{"title":557,"path":558,"stem":559},"胶片颗粒叠加","\u002Fcatalog\u002Feffects\u002Fgrain-overlay","06.catalog\u002F08.effects\u002F02.grain-overlay",{"title":561,"path":562,"stem":563},"网格像素化擦除","\u002Fcatalog\u002Feffects\u002Fgrid-pixelate-wipe","06.catalog\u002F08.effects\u002F03.grid-pixelate-wipe",{"title":565,"path":566,"stem":567},"视差缩小","\u002Fcatalog\u002Feffects\u002Fparallax-unzoom","06.catalog\u002F08.effects\u002F04.parallax-unzoom",{"title":569,"path":570,"stem":571},"视差放大","\u002Fcatalog\u002Feffects\u002Fparallax-zoom","06.catalog\u002F08.effects\u002F05.parallax-zoom",{"title":573,"path":574,"stem":575},"微光扫过","\u002Fcatalog\u002Feffects\u002Fshimmer-sweep","06.catalog\u002F08.effects\u002F06.shimmer-sweep",{"title":577,"path":578,"stem":579},"纹理遮罩文字","\u002Fcatalog\u002Feffects\u002Ftexture-mask-text","06.catalog\u002F08.effects\u002F07.texture-mask-text",{"title":581,"path":582,"stem":583},"暗角","\u002Fcatalog\u002Feffects\u002Fvignette","06.catalog\u002F08.effects\u002F08.vignette",{"title":585,"icon":586,"path":587,"stem":588,"children":589,"page":30},"区块","i-lucide-box","\u002Fcatalog\u002Fblocks","06.catalog\u002F09.blocks",[590,594],{"title":591,"path":592,"stem":593},"流程图","\u002Fcatalog\u002Fblocks\u002Fflowchart","06.catalog\u002F09.blocks\u002F01.flowchart",{"title":595,"path":596,"stem":597},"Logo 片尾","\u002Fcatalog\u002Fblocks\u002Flogo-outro","06.catalog\u002F09.blocks\u002F02.logo-outro",{"title":599,"icon":600,"path":601,"stem":602,"children":603,"page":30},"代码片段","i-lucide-code-2","\u002Fcatalog\u002Fcode-snippets","06.catalog\u002F10.code-snippets",[604,608,612,616,620,624,628,632,636,640,644,648],{"title":605,"path":606,"stem":607},"Dark 2026","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-2026","06.catalog\u002F10.code-snippets\u002F01.code-snippet-dark-2026",{"title":609,"path":610,"stem":611},"Dark Modern","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-modern","06.catalog\u002F10.code-snippets\u002F02.code-snippet-dark-modern",{"title":613,"path":614,"stem":615},"Dark+","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-plus","06.catalog\u002F10.code-snippets\u002F03.code-snippet-dark-plus",{"title":617,"path":618,"stem":619},"High Contrast","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-high-contrast","06.catalog\u002F10.code-snippets\u002F04.code-snippet-high-contrast",{"title":621,"path":622,"stem":623},"High Contrast Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-high-contrast-light","06.catalog\u002F10.code-snippets\u002F05.code-snippet-high-contrast-light",{"title":625,"path":626,"stem":627},"Light 2026","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-2026","06.catalog\u002F10.code-snippets\u002F06.code-snippet-light-2026",{"title":629,"path":630,"stem":631},"Light Modern","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-modern","06.catalog\u002F10.code-snippets\u002F07.code-snippet-light-modern",{"title":633,"path":634,"stem":635},"Light+","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-plus","06.catalog\u002F10.code-snippets\u002F08.code-snippet-light-plus",{"title":637,"path":638,"stem":639},"Monokai","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-monokai","06.catalog\u002F10.code-snippets\u002F09.code-snippet-monokai",{"title":641,"path":642,"stem":643},"Solarized Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-solarized-light","06.catalog\u002F10.code-snippets\u002F10.code-snippet-solarized-light",{"title":645,"path":646,"stem":647},"Visual Studio Dark","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-visual-studio-dark","06.catalog\u002F10.code-snippets\u002F11.code-snippet-visual-studio-dark",{"title":649,"path":650,"stem":651},"Visual Studio Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-visual-studio-light","06.catalog\u002F10.code-snippets\u002F12.code-snippet-visual-studio-light",{"title":653,"icon":654,"path":655,"stem":656,"children":657,"page":30},"参考","i-lucide-book-marked","\u002Freference","07.reference",[658,662,666,670,674,678,682],{"title":659,"path":660,"stem":661},"HTML Schema 参考","\u002Freference\u002Fhtml-schema","07.reference\u002F01.html-schema",{"title":663,"path":664,"stem":665},"贡献指南","\u002Freference\u002Fcontributing","07.reference\u002F02.contributing",{"title":667,"path":668,"stem":669},"贡献到 Catalog","\u002Freference\u002Fcatalog","07.reference\u002F03.catalog",{"title":671,"path":672,"stem":673},"发布渠道","\u002Freference\u002Frelease-channels","07.reference\u002F04.release-channels",{"title":675,"path":676,"stem":677},"测试本地 CLI 变更","\u002Freference\u002Ftesting-local-changes","07.reference\u002F05.testing-local-changes",{"title":679,"path":680,"stem":681},"Studio 手动 DOM 编辑","\u002Freference\u002Fstudio-manual-dom-editing","07.reference\u002F06.studio-manual-dom-editing",{"title":683,"path":684,"stem":685},"采用者","\u002Freference\u002Fadopters","07.reference\u002F07.adopters",{"id":687,"title":50,"body":688,"description":1605,"extension":1606,"links":1607,"meta":1608,"navigation":765,"path":51,"seo":1609,"stem":52,"__hash__":1610},"docs\u002F02.concepts\u002F04.frame-adapters.md",{"type":689,"value":690,"toc":1595},"minimark",[691,695,701,704,708,712,724,855,859,1056,1059,1088,1091,1094,1137,1140,1315,1318,1324,1365,1368,1371,1507,1510,1513,1516,1557,1560,1591],[692,693,694],"p",{},"帧适配器（Frame Adapter）模式是 Hyperframes 支持多种动画运行时的方式。每个适配器需要回答的核心问题是：",[696,697,698],"blockquote",{},[692,699,700],{},"在第 N 帧时，屏幕应该是什么样子？",[692,702,703],{},"如果一个运行时能回答这个问题，它就可以接入 Hyperframes。",[705,706,707],"info",{},"\n适配器 API 当前处于 **v0**（实验性）阶段。在 v1 之前可能会有破坏性变更。核心契约（按帧定位、确定性输出）是稳定的，但方法签名可能会演变。\n",[709,710,711],"h2",{"id":711},"工作原理",[692,713,714,715,719,720,723],{},"宿主应用（",[716,717,718],"a",{"href":180},"引擎","或",[716,721,722],{"href":188},"生产器","）通过按严格顺序调用适配器方法来驱动渲染。适配器从不控制自己的时钟——它只响应定位命令。",[725,726,731],"pre",{"className":727,"code":728,"language":729,"meta":730,"style":730},"language-mermaid shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","sequenceDiagram\nparticipant Host as 宿主（引擎）\nparticipant Adapter as 帧适配器\nparticipant Chrome as Chrome \u002F 浏览器\n\nHost->>Adapter: init(context)\nAdapter-->>Host: 就绪\nHost->>Adapter: getDurationFrames()\nAdapter-->>Host: 300 帧\n\nloop 遍历每一帧 0..300\nHost->>Host: 归一化帧（clamp、floor）\nHost->>Adapter: seekFrame(frame)\nAdapter->>Chrome: 更新 DOM \u002F canvas 状态\nAdapter-->>Host: 完成\nHost->>Chrome: 捕获像素缓冲区\nend\n\nHost->>Adapter: destroy()\nAdapter-->>Host: 清理完成\n","mermaid","",[732,733,734,742,748,754,760,767,773,779,785,791,796,802,808,814,820,826,832,838,843,849],"code",{"__ignoreMap":730},[735,736,739],"span",{"class":737,"line":738},"line",1,[735,740,741],{},"sequenceDiagram\n",[735,743,745],{"class":737,"line":744},2,[735,746,747],{},"participant Host as 宿主（引擎）\n",[735,749,751],{"class":737,"line":750},3,[735,752,753],{},"participant Adapter as 帧适配器\n",[735,755,757],{"class":737,"line":756},4,[735,758,759],{},"participant Chrome as Chrome \u002F 浏览器\n",[735,761,763],{"class":737,"line":762},5,[735,764,766],{"emptyLinePlaceholder":765},true,"\n",[735,768,770],{"class":737,"line":769},6,[735,771,772],{},"Host->>Adapter: init(context)\n",[735,774,776],{"class":737,"line":775},7,[735,777,778],{},"Adapter-->>Host: 就绪\n",[735,780,782],{"class":737,"line":781},8,[735,783,784],{},"Host->>Adapter: getDurationFrames()\n",[735,786,788],{"class":737,"line":787},9,[735,789,790],{},"Adapter-->>Host: 300 帧\n",[735,792,794],{"class":737,"line":793},10,[735,795,766],{"emptyLinePlaceholder":765},[735,797,799],{"class":737,"line":798},11,[735,800,801],{},"loop 遍历每一帧 0..300\n",[735,803,805],{"class":737,"line":804},12,[735,806,807],{},"Host->>Host: 归一化帧（clamp、floor）\n",[735,809,811],{"class":737,"line":810},13,[735,812,813],{},"Host->>Adapter: seekFrame(frame)\n",[735,815,817],{"class":737,"line":816},14,[735,818,819],{},"Adapter->>Chrome: 更新 DOM \u002F canvas 状态\n",[735,821,823],{"class":737,"line":822},15,[735,824,825],{},"Adapter-->>Host: 完成\n",[735,827,829],{"class":737,"line":828},16,[735,830,831],{},"Host->>Chrome: 捕获像素缓冲区\n",[735,833,835],{"class":737,"line":834},17,[735,836,837],{},"end\n",[735,839,841],{"class":737,"line":840},18,[735,842,766],{"emptyLinePlaceholder":765},[735,844,846],{"class":737,"line":845},19,[735,847,848],{},"Host->>Adapter: destroy()\n",[735,850,852],{"class":737,"line":851},20,[735,853,854],{},"Adapter-->>Host: 清理完成\n",[709,856,858],{"id":857},"适配器-apiv0","适配器 API（v0）",[725,860,865],{"className":861,"code":862,"language":863,"meta":864,"style":730},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ype FrameAdapterContext = {\ncompositionId: string;\nfps: number;\nwidth: number;\nheight: number;\nrootElement?: HTMLElement;\n};\n\nype FrameAdapter = {\nid: string;\ninit?: (ctx: FrameAdapterContext) => Promise\u003Cvoid> | void;\ngetDurationFrames: () => number;\nseekFrame: (frame: number) => Promise\u003Cvoid> | void;\ndestroy?: () => Promise\u003Cvoid> | void;\n};\n","typescript","adapters\u002Ftypes.ts",[732,866,867,880,892,897,902,907,918,923,927,936,945,987,1000,1030,1052],{"__ignoreMap":730},[735,868,869,873,877],{"class":737,"line":738},[735,870,872],{"class":871},"sTEyZ","ype FrameAdapterContext ",[735,874,876],{"class":875},"sMK4o","=",[735,878,879],{"class":875}," {\n",[735,881,882,886,889],{"class":737,"line":744},[735,883,885],{"class":884},"swJcz","compositionId",[735,887,888],{"class":875},":",[735,890,891],{"class":871}," string;\n",[735,893,894],{"class":737,"line":750},[735,895,896],{"class":871},"fps: number;\n",[735,898,899],{"class":737,"line":756},[735,900,901],{"class":871},"width: number;\n",[735,903,904],{"class":737,"line":762},[735,905,906],{"class":871},"height: number;\n",[735,908,909,912,915],{"class":737,"line":769},[735,910,911],{"class":871},"rootElement",[735,913,914],{"class":875},"?:",[735,916,917],{"class":871}," HTMLElement;\n",[735,919,920],{"class":737,"line":775},[735,921,922],{"class":875},"};\n",[735,924,925],{"class":737,"line":781},[735,926,766],{"emptyLinePlaceholder":765},[735,928,929,932,934],{"class":737,"line":787},[735,930,931],{"class":871},"ype FrameAdapter ",[735,933,876],{"class":875},[735,935,879],{"class":875},[735,937,938,941,943],{"class":737,"line":793},[735,939,940],{"class":884},"id",[735,942,888],{"class":875},[735,944,891],{"class":871},[735,946,947,950,952,955,959,961,965,968,972,975,978,981,984],{"class":737,"line":798},[735,948,949],{"class":871},"init",[735,951,914],{"class":875},[735,953,954],{"class":875}," (",[735,956,958],{"class":957},"sHdIc","ctx",[735,960,888],{"class":875},[735,962,964],{"class":963},"sBMFI"," FrameAdapterContext",[735,966,967],{"class":875},")",[735,969,971],{"class":970},"spNyl"," =>",[735,973,974],{"class":963}," Promise",[735,976,977],{"class":875},"\u003Cvoid>",[735,979,980],{"class":875}," |",[735,982,983],{"class":875}," void",[735,985,986],{"class":871},";\n",[735,988,989,992,995,997],{"class":737,"line":804},[735,990,991],{"class":871},"getDurationFrames: ",[735,993,994],{"class":875},"()",[735,996,971],{"class":970},[735,998,999],{"class":871}," number;\n",[735,1001,1002,1005,1008,1011,1013,1016,1018,1020,1022,1024,1026,1028],{"class":737,"line":810},[735,1003,1004],{"class":871},"seekFrame: ",[735,1006,1007],{"class":875},"(",[735,1009,1010],{"class":957},"frame",[735,1012,888],{"class":875},[735,1014,1015],{"class":963}," number",[735,1017,967],{"class":875},[735,1019,971],{"class":970},[735,1021,974],{"class":963},[735,1023,977],{"class":875},[735,1025,980],{"class":875},[735,1027,983],{"class":875},[735,1029,986],{"class":871},[735,1031,1032,1035,1037,1040,1042,1044,1046,1048,1050],{"class":737,"line":816},[735,1033,1034],{"class":871},"destroy",[735,1036,914],{"class":875},[735,1038,1039],{"class":875}," ()",[735,1041,971],{"class":970},[735,1043,974],{"class":963},[735,1045,977],{"class":875},[735,1047,980],{"class":875},[735,1049,983],{"class":875},[735,1051,986],{"class":871},[735,1053,1054],{"class":737,"line":822},[735,1055,922],{"class":875},[709,1057,1058],{"id":1058},"必须满足的语义",[1060,1061,1062,1069,1075,1080,1085],"ul",{},[1063,1064,1065,1068],"li",{},[732,1066,1067],{},"getDurationFrames()"," 必须返回一个 >= 0 的有限整数",[1063,1070,1071,1074],{},[732,1072,1073],{},"seekFrame(frame)"," 必须支持任意顺序的定位（向前、向后、随机）",[1063,1076,1077,1079],{},[732,1078,1073],{}," 对于相同的输入帧必须是幂等的",[1063,1081,1082,1084],{},[732,1083,1073],{}," 必须将内部时间限制在适配器的范围内",[1063,1086,1087],{},"适配器应该是暂停\u002F定位驱动的，而非时钟驱动的",[709,1089,1090],{"id":1090},"宿主编排",[692,1092,1093],{},"宿主在调用适配器之前会对帧进行归一化：",[725,1095,1098],{"className":861,"code":1096,"language":863,"meta":1097,"style":730},"normalizedFrame = clamp(Math.floor(frame), 0, durationFrames);\n","engine\u002Frender-loop.ts",[732,1099,1100],{"__ignoreMap":730},[735,1101,1102,1105,1107,1111,1114,1117,1120,1123,1126,1130,1132,1135],{"class":737,"line":738},[735,1103,1104],{"class":871},"normalizedFrame ",[735,1106,876],{"class":875},[735,1108,1110],{"class":1109},"s2Zo4"," clamp",[735,1112,1113],{"class":871},"(Math",[735,1115,1116],{"class":875},".",[735,1118,1119],{"class":1109},"floor",[735,1121,1122],{"class":871},"(frame)",[735,1124,1125],{"class":875},",",[735,1127,1129],{"class":1128},"sbssI"," 0",[735,1131,1125],{"class":875},[735,1133,1134],{"class":871}," durationFrames)",[735,1136,986],{"class":875},[692,1138,1139],{},"典型的渲染循环：",[725,1141,1143],{"className":861,"code":1142,"language":863,"meta":1097,"style":730},"await adapter.init?.({ compositionId, fps, width, height, rootElement });\nconst durationFrames = adapter.getDurationFrames();\n\nfor (let frame = 0; frame \u003C= durationFrames; frame += 1) {\nawait adapter.seekFrame(frame);\n\u002F\u002F 捕获该帧的像素缓冲区\n}\n\nawait adapter.destroy?.();\n",[732,1144,1145,1196,1217,1221,1265,1284,1290,1295,1299],{"__ignoreMap":730},[735,1146,1147,1151,1154,1156,1158,1161,1163,1166,1169,1171,1174,1176,1179,1181,1184,1186,1189,1192,1194],{"class":737,"line":738},[735,1148,1150],{"class":1149},"s7zQu","await",[735,1152,1153],{"class":871}," adapter",[735,1155,1116],{"class":875},[735,1157,949],{"class":1109},[735,1159,1160],{"class":875},"?.",[735,1162,1007],{"class":871},[735,1164,1165],{"class":875},"{",[735,1167,1168],{"class":871}," compositionId",[735,1170,1125],{"class":875},[735,1172,1173],{"class":871}," fps",[735,1175,1125],{"class":875},[735,1177,1178],{"class":871}," width",[735,1180,1125],{"class":875},[735,1182,1183],{"class":871}," height",[735,1185,1125],{"class":875},[735,1187,1188],{"class":871}," rootElement ",[735,1190,1191],{"class":875},"}",[735,1193,967],{"class":871},[735,1195,986],{"class":875},[735,1197,1198,1201,1204,1206,1208,1210,1213,1215],{"class":737,"line":744},[735,1199,1200],{"class":970},"const",[735,1202,1203],{"class":871}," durationFrames ",[735,1205,876],{"class":875},[735,1207,1153],{"class":871},[735,1209,1116],{"class":875},[735,1211,1212],{"class":1109},"getDurationFrames",[735,1214,994],{"class":871},[735,1216,986],{"class":875},[735,1218,1219],{"class":737,"line":750},[735,1220,766],{"emptyLinePlaceholder":765},[735,1222,1223,1226,1228,1231,1234,1236,1238,1241,1243,1246,1249,1251,1253,1256,1259,1262],{"class":737,"line":756},[735,1224,1225],{"class":1149},"for",[735,1227,954],{"class":871},[735,1229,1230],{"class":970},"let",[735,1232,1233],{"class":871}," frame ",[735,1235,876],{"class":875},[735,1237,1129],{"class":1128},[735,1239,1240],{"class":875},";",[735,1242,1233],{"class":871},[735,1244,1245],{"class":875},"\u003C=",[735,1247,1248],{"class":871}," durationFrames",[735,1250,1240],{"class":875},[735,1252,1233],{"class":871},[735,1254,1255],{"class":875},"+=",[735,1257,1258],{"class":1128}," 1",[735,1260,1261],{"class":871},") ",[735,1263,1264],{"class":875},"{\n",[735,1266,1267,1269,1271,1273,1276,1278,1280,1282],{"class":737,"line":762},[735,1268,1150],{"class":1149},[735,1270,1153],{"class":871},[735,1272,1116],{"class":875},[735,1274,1275],{"class":1109},"seekFrame",[735,1277,1007],{"class":884},[735,1279,1010],{"class":871},[735,1281,967],{"class":884},[735,1283,986],{"class":875},[735,1285,1286],{"class":737,"line":769},[735,1287,1289],{"class":1288},"sHwdD","\u002F\u002F 捕获该帧的像素缓冲区\n",[735,1291,1292],{"class":737,"line":775},[735,1293,1294],{"class":875},"}\n",[735,1296,1297],{"class":737,"line":781},[735,1298,766],{"emptyLinePlaceholder":765},[735,1300,1301,1303,1305,1307,1309,1311,1313],{"class":737,"line":787},[735,1302,1150],{"class":1149},[735,1304,1153],{"class":871},[735,1306,1116],{"class":875},[735,1308,1034],{"class":1109},[735,1310,1160],{"class":875},[735,1312,994],{"class":871},[735,1314,986],{"class":875},[709,1316,1317],{"id":1317},"确定性契约",[692,1319,1320,1321,1323],{},"以下规则对任何适配器来说都是不可协商的。它们是 Hyperframes ",[716,1322,54],{"href":55},"保证的基础。",[1060,1325,1326,1332,1339,1342,1345,1359,1362],{},[1063,1327,1328,1329],{},"规范时钟：",[732,1330,1331],{},"t = frame \u002F fps",[1063,1333,1334,1335,1338],{},"无挂钟依赖（",[732,1336,1337],{},"Date.now","、依赖漂移的逻辑）",[1063,1340,1341],{},"无未设种子的随机性",[1063,1343,1344],{},"无渲染时网络请求",[1063,1346,1347,1348,1351,1352,1351,1355,1358],{},"固定输出参数（",[732,1349,1350],{},"fps","、",[732,1353,1354],{},"width",[732,1356,1357],{},"height","）",[1063,1360,1361],{},"仅有限时长",[1063,1363,1364],{},"在定位前进行确定性帧量化",[709,1366,1367],{"id":1367},"支持的运行时",[692,1369,1370],{},"官方运行时适配器：",[1372,1373,1374,1390],"table",{},[1375,1376,1377],"thead",{},[1378,1379,1380,1384,1387],"tr",{},[1381,1382,1383],"th",{},"运行时",[1381,1385,1386],{},"定位方法",[1381,1388,1389],{},"Skill",[1391,1392,1393,1415,1435,1452,1468,1488],"tbody",{},[1378,1394,1395,1401,1410],{},[1396,1397,1398],"td",{},[716,1399,1400],{"href":101},"GSAP",[1396,1402,1403,1406,1407],{},[732,1404,1405],{},"timeline.totalTime(timeSeconds)"," 或 ",[732,1408,1409],{},"timeline.seek(timeSeconds)",[1396,1411,1412],{},[732,1413,1414],{},"\u002Fgsap",[1378,1416,1417,1420,1430],{},[1396,1418,1419],{},"Anime.js",[1396,1421,1422,1425,1426,1429],{},[732,1423,1424],{},"instance.seek(timeMs)","，适用于注册在 ",[732,1427,1428],{},"window.__hfAnime"," 上的动画",[1396,1431,1432],{},[732,1433,1434],{},"\u002Fanimejs",[1378,1436,1437,1440,1447],{},[1396,1438,1439],{},"CSS keyframes",[1396,1441,1442,1443,1446],{},"浏览器 ",[732,1444,1445],{},"Animation.currentTime","，带暂停的负延迟回退",[1396,1448,1449],{},[732,1450,1451],{},"\u002Fcss-animations",[1378,1453,1454,1457,1463],{},[1396,1455,1456],{},"Lottie \u002F dotLottie",[1396,1458,1459,1462],{},[732,1460,1461],{},"goToAndStop(timeMs, false)","、原始帧设置器或播放器定位 API",[1396,1464,1465],{},[732,1466,1467],{},"\u002Flottie",[1378,1469,1470,1473,1483],{},[1396,1471,1472],{},"Three.js \u002F WebGL",[1396,1474,1475,1478,1479,1482],{},[732,1476,1477],{},"hf-seek"," 事件加上 ",[732,1480,1481],{},"window.__hfThreeTime"," 用于确定性场景渲染",[1396,1484,1485],{},[732,1486,1487],{},"\u002Fthree",[1378,1489,1490,1493,1502],{},[1396,1491,1492],{},"Web Animations API",[1396,1494,1495,1498,1499],{},[732,1496,1497],{},"document.getAnimations()"," 和 ",[732,1500,1501],{},"animation.currentTime",[1396,1503,1504],{},[732,1505,1506],{},"\u002Fwaapi",[692,1508,1509],{},"欢迎社区贡献适配器——如果它能按帧定位，它就属于 Hyperframes。",[709,1511,1512],{"id":1512},"一致性测试",[692,1514,1515],{},"每个适配器应通过以下最低测试：",[1517,1518,1519,1526,1536,1542,1548],"ol",{},[1063,1520,1521,1525],{},[1522,1523,1524],"strong",{},"可重复性"," -- 对同一帧定位两次，获得相同的输出",[1063,1527,1528,1531,1532,1535],{},[1522,1529,1530],{},"随机定位"," -- 定位顺序 ",[732,1533,1534],{},"[90, 10, 50, 10]"," 产生确定性结果",[1063,1537,1538,1541],{},[1522,1539,1540],{},"边界值"," -- 负数和溢出帧值不会导致崩溃",[1063,1543,1544,1547],{},[1522,1545,1546],{},"持续时间"," -- 返回的持续时间是有限整数",[1063,1549,1550,1553,1554,1556],{},[1522,1551,1552],{},"清理"," -- ",[732,1555,1034],{}," 后没有泄漏的定时器\u002F监听器",[709,1558,1559],{"id":1559},"下一步",[1060,1561,1562,1569,1576,1583],{},[1063,1563,1564,1568],{},[1522,1565,1566],{},[716,1567,54],{"href":55},"\n了解适配器必须遵守的确定性保证",[1063,1570,1571,1575],{},[1522,1572,1573],{},[716,1574,100],{"href":101},"\n查看官方 GSAP 适配器的实际运作",[1063,1577,1578,1582],{},[1522,1579,1580],{},[716,1581,179],{"href":180},"\n在渲染期间驱动适配器的捕获引擎",[1063,1584,1585,1590],{},[1522,1586,1587],{},[716,1588,1589],{"href":664},"参与贡献","\n构建并贡献你自己的适配器",[1592,1593,1594],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":730,"searchDepth":738,"depth":744,"links":1596},[1597,1598,1599,1600,1601,1602,1603,1604],{"id":711,"depth":744,"text":711},{"id":857,"depth":744,"text":858},{"id":1058,"depth":744,"text":1058},{"id":1090,"depth":744,"text":1090},{"id":1317,"depth":744,"text":1317},{"id":1367,"depth":744,"text":1367},{"id":1512,"depth":744,"text":1512},{"id":1559,"depth":744,"text":1559},"将你自己的动画运行时引入 Hyperframes。","md",null,{},{"title":50,"description":1605},"1OlAY_cQJxr7o-ncFGTiRItVef-QOrxcqRtrTARGrVI",[1612,1614],{"title":46,"path":47,"stem":48,"description":1613,"children":-1},"为合成添加参数化，使同一源文件可以渲染不同的内容。",{"title":54,"path":55,"stem":56,"description":1615,"children":-1},"相同的输入，完全相同的输出。每次如此。",1780322253013]