[{"data":1,"prerenderedAt":1886},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fgsap-animation":686,"\u002Fguides\u002Fgsap-animation-surround":1881},[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":100,"body":688,"description":1875,"extension":1876,"links":1877,"meta":1878,"navigation":829,"path":101,"seo":1879,"stem":102,"__hash__":1880},"docs\u002F03.guides\u002F10.gsap-animation.md",{"type":689,"value":690,"toc":1865},"minimark",[691,706,710,713,977,1001,1004,1052,1055,1115,1118,1158,1161,1164,1281,1284,1381,1396,1399,1402,1630,1647,1650,1665,1795,1827,1830,1861],[692,693,694,695,702,703,705],"p",{},"Hyperframes 使用 ",[696,697,701],"a",{"href":698,"rel":699},"https:\u002F\u002Fgsap.com\u002F",[700],"nofollow","GSAP"," 进行动画。时间线是暂停的，由运行时控制——你定义动画，框架处理播放。有关动画运行时如何接入 Hyperframes 的背景，请参见",[696,704,50],{"href":51},"。",[707,708,709],"h2",{"id":709},"设置",[692,711,712],{},"包含 GSAP 并创建暂停的时间线：",[714,715,721],"pre",{"className":716,"code":717,"language":718,"meta":719,"style":720},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3\u002Fdist\u002Fgsap.min.js\">\u003C\u002Fscript>\n\u003Cscript>\n\u002F\u002F 1. 创建暂停的时间线——框架控制播放\nconst tl = gsap.timeline({ paused: true });\n\n\u002F\u002F 2. 使用位置参数（第 3 个参数）进行绝对计时\nl.to(\"#title\", { opacity: 1, duration: 0.5 }, 0);\n\n\u002F\u002F 3. 初始化全局时间线注册表（如果尚未存在）\nwindow.__timelines = window.__timelines || {};\n\n\u002F\u002F 4. 使用 data-composition-id 作为键注册时间线\nwindow.__timelines[\"root\"] = tl;\n\u003C\u002Fscript>\n","html","index.html","",[722,723,724,761,770,777,824,831,837,892,897,903,929,934,940,967],"code",{"__ignoreMap":720},[725,726,729,733,737,741,744,747,751,753,756,758],"span",{"class":727,"line":728},"line",1,[725,730,732],{"class":731},"sMK4o","\u003C",[725,734,736],{"class":735},"swJcz","script",[725,738,740],{"class":739},"spNyl"," src",[725,742,743],{"class":731},"=",[725,745,746],{"class":731},"\"",[725,748,750],{"class":749},"sfazB","https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3\u002Fdist\u002Fgsap.min.js",[725,752,746],{"class":731},[725,754,755],{"class":731},">\u003C\u002F",[725,757,736],{"class":735},[725,759,760],{"class":731},">\n",[725,762,764,766,768],{"class":727,"line":763},2,[725,765,732],{"class":731},[725,767,736],{"class":735},[725,769,760],{"class":731},[725,771,773],{"class":727,"line":772},3,[725,774,776],{"class":775},"sHwdD","\u002F\u002F 1. 创建暂停的时间线——框架控制播放\n",[725,778,780,783,787,789,792,795,799,802,805,808,811,815,818,821],{"class":727,"line":779},4,[725,781,782],{"class":739},"const",[725,784,786],{"class":785},"sTEyZ"," tl ",[725,788,743],{"class":731},[725,790,791],{"class":785}," gsap",[725,793,794],{"class":731},".",[725,796,798],{"class":797},"s2Zo4","timeline",[725,800,801],{"class":785},"(",[725,803,804],{"class":731},"{",[725,806,807],{"class":735}," paused",[725,809,810],{"class":731},":",[725,812,814],{"class":813},"sfNiH"," true",[725,816,817],{"class":731}," }",[725,819,820],{"class":785},")",[725,822,823],{"class":731},";\n",[725,825,827],{"class":727,"line":826},5,[725,828,830],{"emptyLinePlaceholder":829},true,"\n",[725,832,834],{"class":727,"line":833},6,[725,835,836],{"class":775},"\u002F\u002F 2. 使用位置参数（第 3 个参数）进行绝对计时\n",[725,838,840,843,845,848,850,852,855,857,860,863,866,868,872,874,877,879,882,885,888,890],{"class":727,"line":839},7,[725,841,842],{"class":785},"l",[725,844,794],{"class":731},[725,846,847],{"class":797},"to",[725,849,801],{"class":785},[725,851,746],{"class":731},[725,853,854],{"class":749},"#title",[725,856,746],{"class":731},[725,858,859],{"class":731},",",[725,861,862],{"class":731}," {",[725,864,865],{"class":735}," opacity",[725,867,810],{"class":731},[725,869,871],{"class":870},"sbssI"," 1",[725,873,859],{"class":731},[725,875,876],{"class":735}," duration",[725,878,810],{"class":731},[725,880,881],{"class":870}," 0.5",[725,883,884],{"class":731}," },",[725,886,887],{"class":870}," 0",[725,889,820],{"class":785},[725,891,823],{"class":731},[725,893,895],{"class":727,"line":894},8,[725,896,830],{"emptyLinePlaceholder":829},[725,898,900],{"class":727,"line":899},9,[725,901,902],{"class":775},"\u002F\u002F 3. 初始化全局时间线注册表（如果尚未存在）\n",[725,904,906,909,911,914,916,919,921,923,926],{"class":727,"line":905},10,[725,907,908],{"class":785},"window",[725,910,794],{"class":731},[725,912,913],{"class":785},"__timelines ",[725,915,743],{"class":731},[725,917,918],{"class":785}," window",[725,920,794],{"class":731},[725,922,913],{"class":785},[725,924,925],{"class":731},"||",[725,927,928],{"class":731}," {};\n",[725,930,932],{"class":727,"line":931},11,[725,933,830],{"emptyLinePlaceholder":829},[725,935,937],{"class":727,"line":936},12,[725,938,939],{"class":775},"\u002F\u002F 4. 使用 data-composition-id 作为键注册时间线\n",[725,941,943,945,947,950,952,955,957,960,962,965],{"class":727,"line":942},13,[725,944,908],{"class":785},[725,946,794],{"class":731},[725,948,949],{"class":785},"__timelines[",[725,951,746],{"class":731},[725,953,954],{"class":749},"root",[725,956,746],{"class":731},[725,958,959],{"class":785},"] ",[725,961,743],{"class":731},[725,963,964],{"class":785}," tl",[725,966,823],{"class":731},[725,968,970,973,975],{"class":727,"line":969},14,[725,971,972],{"class":731},"\u003C\u002F",[725,974,736],{"class":735},[725,976,760],{"class":731},[978,979,980,987],"blockquote",{},[692,981,982,983],{},"ℹ️ ",[984,985,986],"strong",{},"Note",[692,988,989,990,993,994,997,998,1000],{},"你在 ",[722,991,992],{},"window.__timelines"," 中使用的键必须与合成根元素上的 ",[722,995,996],{},"data-composition-id"," 属性匹配。参见",[696,999,38],{"href":39},"了解根元素的结构。",[707,1002,1003],{"id":1003},"关键规则",[1005,1006,1007,1022,1037,1046],"ol",{},[1008,1009,1010,1017,1018,1021],"li",{},[984,1011,1012,1013,1016],{},"始终使用 ",[722,1014,1015],{},"{ paused: true }"," 创建时间线"," — 框架通过",[696,1019,1020],{"href":55},"确定性搜索","控制播放",[1008,1023,1024,1030,1031,1036],{},[984,1025,1026,1027,1029],{},"在 ",[722,1028,992],{}," 上注册时间线","，使用 ",[696,1032,1034],{"href":1033},"\u002Fconcepts\u002Fdata-attributes#%E5%90%88%E6%88%90%E5%B1%9E%E6%80%A7",[722,1035,996],{}," 作为键",[1008,1038,1039,1042,1043],{},[984,1040,1041],{},"使用位置参数","（第 3 个参数）进行绝对计时：",[722,1044,1045],{},"tl.to(el, vars, 1.5)",[1008,1047,1048,1051],{},[984,1049,1050],{},"只对视觉属性做动画"," — 永远不要在脚本中控制媒体播放",[707,1053,1054],{"id":1054},"支持的方法",[1056,1057,1058,1071],"table",{},[1059,1060,1061],"thead",{},[1062,1063,1064,1068],"tr",{},[1065,1066,1067],"th",{},"方法",[1065,1069,1070],{},"描述",[1072,1073,1074,1085,1095,1105],"tbody",{},[1062,1075,1076,1082],{},[1077,1078,1079],"td",{},[722,1080,1081],{},"tl.to(target, vars, position)",[1077,1083,1084],{},"动画到指定值",[1062,1086,1087,1092],{},[1077,1088,1089],{},[722,1090,1091],{},"tl.from(target, vars, position)",[1077,1093,1094],{},"从指定值动画",[1062,1096,1097,1102],{},[1077,1098,1099],{},[722,1100,1101],{},"tl.fromTo(target, fromVars, toVars, position)",[1077,1103,1104],{},"从\u002F到指定值动画",[1062,1106,1107,1112],{},[1077,1108,1109],{},[722,1110,1111],{},"tl.set(target, vars, position)",[1077,1113,1114],{},"立即设置值",[707,1116,1117],{"id":1117},"支持的属性",[692,1119,1120,1123,1124,1123,1127,1123,1130,1123,1133,1123,1136,1123,1139,1123,1142,1123,1145,1123,1148,1123,1151,1123,1154,1157],{},[722,1121,1122],{},"opacity","、",[722,1125,1126],{},"x",[722,1128,1129],{},"y",[722,1131,1132],{},"scale",[722,1134,1135],{},"scaleX",[722,1137,1138],{},"scaleY",[722,1140,1141],{},"rotation",[722,1143,1144],{},"width",[722,1146,1147],{},"height",[722,1149,1150],{},"visibility",[722,1152,1153],{},"color",[722,1155,1156],{},"backgroundColor","，以及任何 CSS 可动画属性。",[707,1159,1160],{"id":1160},"时间线时长与合成时长",[692,1162,1163],{},"合成的时长等于其 GSAP 时间线时长。两者直接关联：",[714,1165,1170],{"className":1166,"code":1167,"language":1168,"meta":1169,"style":720},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F 你的最后一个动画在 3 秒结束...\nl.from(\"#title\", { opacity: 0, y: -50, duration: 1 }, 0);\nl.to(\"#title\", { opacity: 0, duration: 1 }, 2);\n\u002F\u002F ...所以这个合成恰好是 3 秒长。\n","javascript","compositions\u002Fintro-anim.html",[722,1171,1172,1177,1233,1276],{"__ignoreMap":720},[725,1173,1174],{"class":727,"line":728},[725,1175,1176],{"class":775},"\u002F\u002F 你的最后一个动画在 3 秒结束...\n",[725,1178,1179,1181,1183,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1209,1211,1214,1217,1219,1221,1223,1225,1227,1229,1231],{"class":727,"line":763},[725,1180,842],{"class":785},[725,1182,794],{"class":731},[725,1184,1185],{"class":797},"from",[725,1187,801],{"class":785},[725,1189,746],{"class":731},[725,1191,854],{"class":749},[725,1193,746],{"class":731},[725,1195,859],{"class":731},[725,1197,862],{"class":731},[725,1199,865],{"class":735},[725,1201,810],{"class":731},[725,1203,887],{"class":870},[725,1205,859],{"class":731},[725,1207,1208],{"class":735}," y",[725,1210,810],{"class":731},[725,1212,1213],{"class":731}," -",[725,1215,1216],{"class":870},"50",[725,1218,859],{"class":731},[725,1220,876],{"class":735},[725,1222,810],{"class":731},[725,1224,871],{"class":870},[725,1226,884],{"class":731},[725,1228,887],{"class":870},[725,1230,820],{"class":785},[725,1232,823],{"class":731},[725,1234,1235,1237,1239,1241,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265,1267,1269,1272,1274],{"class":727,"line":772},[725,1236,842],{"class":785},[725,1238,794],{"class":731},[725,1240,847],{"class":797},[725,1242,801],{"class":785},[725,1244,746],{"class":731},[725,1246,854],{"class":749},[725,1248,746],{"class":731},[725,1250,859],{"class":731},[725,1252,862],{"class":731},[725,1254,865],{"class":735},[725,1256,810],{"class":731},[725,1258,887],{"class":870},[725,1260,859],{"class":731},[725,1262,876],{"class":735},[725,1264,810],{"class":731},[725,1266,871],{"class":870},[725,1268,884],{"class":731},[725,1270,1271],{"class":870}," 2",[725,1273,820],{"class":785},[725,1275,823],{"class":731},[725,1277,1278],{"class":727,"line":779},[725,1279,1280],{"class":775},"\u002F\u002F ...所以这个合成恰好是 3 秒长。\n",[692,1282,1283],{},"如果你的合成包含一个 283 秒长的视频片段，但你的最后一个 GSAP 动画在 8 秒结束，合成将只有 8 秒长，视频会被截短。要延长时间线以匹配视频：",[714,1285,1287],{"className":1166,"code":1286,"language":1168,"meta":719,"style":720},"\u002F\u002F 你所有的视觉动画\nl.to(\"#lower-third\", { left: -640, duration: 0.6 }, 7.2);\n\n\u002F\u002F 将时间线延长到 283 秒以匹配视频长度。\n\u002F\u002F 这在 283s 添加一个零时长的补间，不影响任何元素。\nl.set({}, {}, 283);\n",[722,1288,1289,1294,1343,1347,1352,1357],{"__ignoreMap":720},[725,1290,1291],{"class":727,"line":728},[725,1292,1293],{"class":775},"\u002F\u002F 你所有的视觉动画\n",[725,1295,1296,1298,1300,1302,1304,1306,1309,1311,1313,1315,1318,1320,1322,1325,1327,1329,1331,1334,1336,1339,1341],{"class":727,"line":763},[725,1297,842],{"class":785},[725,1299,794],{"class":731},[725,1301,847],{"class":797},[725,1303,801],{"class":785},[725,1305,746],{"class":731},[725,1307,1308],{"class":749},"#lower-third",[725,1310,746],{"class":731},[725,1312,859],{"class":731},[725,1314,862],{"class":731},[725,1316,1317],{"class":735}," left",[725,1319,810],{"class":731},[725,1321,1213],{"class":731},[725,1323,1324],{"class":870},"640",[725,1326,859],{"class":731},[725,1328,876],{"class":735},[725,1330,810],{"class":731},[725,1332,1333],{"class":870}," 0.6",[725,1335,884],{"class":731},[725,1337,1338],{"class":870}," 7.2",[725,1340,820],{"class":785},[725,1342,823],{"class":731},[725,1344,1345],{"class":727,"line":772},[725,1346,830],{"emptyLinePlaceholder":829},[725,1348,1349],{"class":727,"line":779},[725,1350,1351],{"class":775},"\u002F\u002F 将时间线延长到 283 秒以匹配视频长度。\n",[725,1353,1354],{"class":727,"line":826},[725,1355,1356],{"class":775},"\u002F\u002F 这在 283s 添加一个零时长的补间，不影响任何元素。\n",[725,1358,1359,1361,1363,1366,1368,1371,1374,1377,1379],{"class":727,"line":833},[725,1360,842],{"class":785},[725,1362,794],{"class":731},[725,1364,1365],{"class":797},"set",[725,1367,801],{"class":785},[725,1369,1370],{"class":731},"{},",[725,1372,1373],{"class":731}," {},",[725,1375,1376],{"class":870}," 283",[725,1378,820],{"class":785},[725,1380,823],{"class":731},[978,1382,1383,1389],{},[692,1384,1385,1386],{},"⚠️ ",[984,1387,1388],{},"Warning",[692,1390,1391,1392,1395],{},"这是 Hyperframes 中最常见的错误之一。如果你的视频提前截断，时间线太短了。参见",[696,1393,1394],{"href":133},"常见错误：合成时长短于视频","了解更多详情。",[707,1397,1398],{"id":1398},"不应该做什么",[692,1400,1401],{},"这些模式会破坏你的合成或导致同步问题：",[714,1403,1405],{"className":1166,"code":1404,"language":1168,"meta":719,"style":720},"\u002F\u002F 错误：在脚本中播放媒体——框架拥有媒体播放权\ndocument.getElementById(\"el-video\").play();\ndocument.getElementById(\"el-audio\").currentTime = 5;\n\n\u002F\u002F 错误：创建非暂停的时间线\nconst tl = gsap.timeline(); \u002F\u002F 缺少 { paused: true }！\n\n\u002F\u002F 错误：直接对 \u003Cvideo> 元素的尺寸做动画\nl.to(\"#el-video\", { width: 500, height: 280 }, 5);\n\n\u002F\u002F 错误：手动嵌套子时间线\nconst masterTL = window.__timelines[\"root\"];\nmasterTL.add(window.__timelines[\"intro-anim\"], 0);\n",[722,1406,1407,1412,1443,1474,1478,1483,1505,1509,1514,1561,1565,1570,1596],{"__ignoreMap":720},[725,1408,1409],{"class":727,"line":728},[725,1410,1411],{"class":775},"\u002F\u002F 错误：在脚本中播放媒体——框架拥有媒体播放权\n",[725,1413,1414,1417,1419,1422,1424,1426,1429,1431,1433,1435,1438,1441],{"class":727,"line":763},[725,1415,1416],{"class":785},"document",[725,1418,794],{"class":731},[725,1420,1421],{"class":797},"getElementById",[725,1423,801],{"class":785},[725,1425,746],{"class":731},[725,1427,1428],{"class":749},"el-video",[725,1430,746],{"class":731},[725,1432,820],{"class":785},[725,1434,794],{"class":731},[725,1436,1437],{"class":797},"play",[725,1439,1440],{"class":785},"()",[725,1442,823],{"class":731},[725,1444,1445,1447,1449,1451,1453,1455,1458,1460,1462,1464,1467,1469,1472],{"class":727,"line":772},[725,1446,1416],{"class":785},[725,1448,794],{"class":731},[725,1450,1421],{"class":797},[725,1452,801],{"class":785},[725,1454,746],{"class":731},[725,1456,1457],{"class":749},"el-audio",[725,1459,746],{"class":731},[725,1461,820],{"class":785},[725,1463,794],{"class":731},[725,1465,1466],{"class":785},"currentTime ",[725,1468,743],{"class":731},[725,1470,1471],{"class":870}," 5",[725,1473,823],{"class":731},[725,1475,1476],{"class":727,"line":779},[725,1477,830],{"emptyLinePlaceholder":829},[725,1479,1480],{"class":727,"line":826},[725,1481,1482],{"class":775},"\u002F\u002F 错误：创建非暂停的时间线\n",[725,1484,1485,1487,1489,1491,1493,1495,1497,1499,1502],{"class":727,"line":833},[725,1486,782],{"class":739},[725,1488,786],{"class":785},[725,1490,743],{"class":731},[725,1492,791],{"class":785},[725,1494,794],{"class":731},[725,1496,798],{"class":797},[725,1498,1440],{"class":785},[725,1500,1501],{"class":731},";",[725,1503,1504],{"class":775}," \u002F\u002F 缺少 { paused: true }！\n",[725,1506,1507],{"class":727,"line":839},[725,1508,830],{"emptyLinePlaceholder":829},[725,1510,1511],{"class":727,"line":894},[725,1512,1513],{"class":775},"\u002F\u002F 错误：直接对 \u003Cvideo> 元素的尺寸做动画\n",[725,1515,1516,1518,1520,1522,1524,1526,1529,1531,1533,1535,1538,1540,1543,1545,1548,1550,1553,1555,1557,1559],{"class":727,"line":899},[725,1517,842],{"class":785},[725,1519,794],{"class":731},[725,1521,847],{"class":797},[725,1523,801],{"class":785},[725,1525,746],{"class":731},[725,1527,1528],{"class":749},"#el-video",[725,1530,746],{"class":731},[725,1532,859],{"class":731},[725,1534,862],{"class":731},[725,1536,1537],{"class":735}," width",[725,1539,810],{"class":731},[725,1541,1542],{"class":870}," 500",[725,1544,859],{"class":731},[725,1546,1547],{"class":735}," height",[725,1549,810],{"class":731},[725,1551,1552],{"class":870}," 280",[725,1554,884],{"class":731},[725,1556,1471],{"class":870},[725,1558,820],{"class":785},[725,1560,823],{"class":731},[725,1562,1563],{"class":727,"line":905},[725,1564,830],{"emptyLinePlaceholder":829},[725,1566,1567],{"class":727,"line":931},[725,1568,1569],{"class":775},"\u002F\u002F 错误：手动嵌套子时间线\n",[725,1571,1572,1574,1577,1579,1581,1583,1585,1587,1589,1591,1594],{"class":727,"line":936},[725,1573,782],{"class":739},[725,1575,1576],{"class":785}," masterTL ",[725,1578,743],{"class":731},[725,1580,918],{"class":785},[725,1582,794],{"class":731},[725,1584,949],{"class":785},[725,1586,746],{"class":731},[725,1588,954],{"class":749},[725,1590,746],{"class":731},[725,1592,1593],{"class":785},"]",[725,1595,823],{"class":731},[725,1597,1598,1601,1603,1606,1609,1611,1613,1615,1618,1620,1622,1624,1626,1628],{"class":727,"line":942},[725,1599,1600],{"class":785},"masterTL",[725,1602,794],{"class":731},[725,1604,1605],{"class":797},"add",[725,1607,1608],{"class":785},"(window",[725,1610,794],{"class":731},[725,1612,949],{"class":785},[725,1614,746],{"class":731},[725,1616,1617],{"class":749},"intro-anim",[725,1619,746],{"class":731},[725,1621,1593],{"class":785},[725,1623,859],{"class":731},[725,1625,887],{"class":870},[725,1627,820],{"class":785},[725,1629,823],{"class":731},[692,1631,1632,1633,1123,1637,1641,1642,1646],{},"框架自动管理",[696,1634,1636],{"href":1635},"\u002Freference\u002Fhtml-schema#%E6%A1%86%E6%9E%B6%E7%AE%A1%E7%90%86%E7%9A%84%E8%A1%8C%E4%B8%BA","媒体播放",[696,1638,1640],{"href":1639},"\u002Fconcepts\u002Fcompositions#%E4%B8%A4%E4%B8%AA%E5%B1%82%E6%AC%A1%E5%8E%9F%E7%94%9F%E5%85%83%E7%B4%A0%E5%92%8C%E8%84%9A%E6%9C%AC","clip 生命周期","和",[696,1643,1645],{"href":1644},"#%E5%AD%90%E5%90%88%E6%88%90%E6%97%B6%E9%97%B4%E7%BA%BF","子合成嵌套","。复制此行为的脚本会产生冲突。",[707,1648,1649],{"id":1649},"子合成时间线",[692,1651,1652,1653,1657,1658,1664],{},"每个",[696,1654,1656],{"href":1655},"\u002Fconcepts\u002Fcompositions#%E5%B5%8C%E5%A5%97%E5%90%88%E6%88%90","嵌套合成","注册自己的时间线。框架根据 ",[696,1659,1661],{"href":1660},"\u002Fconcepts\u002Fdata-attributes#%E6%97%B6%E5%BA%8F%E5%B1%9E%E6%80%A7",[722,1662,1663],{},"data-start"," 自动将子合成时间线嵌套到父时间线中：",[714,1666,1668],{"className":1166,"code":1667,"language":1168,"meta":1169,"style":720},"\u002F\u002F 在 compositions\u002Fintro-anim.html 中\nconst tl = gsap.timeline({ paused: true });\nl.from(\".title\", { opacity: 0, y: -50, duration: 1 });\nwindow.__timelines[\"intro-anim\"] = tl;\n\n\u002F\u002F 不要手动将子时间线添加到主时间线：\n\u002F\u002F masterTL.add(window.__timelines[\"intro-anim\"], 0); \u002F\u002F 不需要\n",[722,1669,1670,1675,1705,1756,1778,1782,1787],{"__ignoreMap":720},[725,1671,1672],{"class":727,"line":728},[725,1673,1674],{"class":775},"\u002F\u002F 在 compositions\u002Fintro-anim.html 中\n",[725,1676,1677,1679,1681,1683,1685,1687,1689,1691,1693,1695,1697,1699,1701,1703],{"class":727,"line":763},[725,1678,782],{"class":739},[725,1680,786],{"class":785},[725,1682,743],{"class":731},[725,1684,791],{"class":785},[725,1686,794],{"class":731},[725,1688,798],{"class":797},[725,1690,801],{"class":785},[725,1692,804],{"class":731},[725,1694,807],{"class":735},[725,1696,810],{"class":731},[725,1698,814],{"class":813},[725,1700,817],{"class":731},[725,1702,820],{"class":785},[725,1704,823],{"class":731},[725,1706,1707,1709,1711,1713,1715,1717,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740,1742,1744,1746,1748,1750,1752,1754],{"class":727,"line":772},[725,1708,842],{"class":785},[725,1710,794],{"class":731},[725,1712,1185],{"class":797},[725,1714,801],{"class":785},[725,1716,746],{"class":731},[725,1718,1719],{"class":749},".title",[725,1721,746],{"class":731},[725,1723,859],{"class":731},[725,1725,862],{"class":731},[725,1727,865],{"class":735},[725,1729,810],{"class":731},[725,1731,887],{"class":870},[725,1733,859],{"class":731},[725,1735,1208],{"class":735},[725,1737,810],{"class":731},[725,1739,1213],{"class":731},[725,1741,1216],{"class":870},[725,1743,859],{"class":731},[725,1745,876],{"class":735},[725,1747,810],{"class":731},[725,1749,871],{"class":870},[725,1751,817],{"class":731},[725,1753,820],{"class":785},[725,1755,823],{"class":731},[725,1757,1758,1760,1762,1764,1766,1768,1770,1772,1774,1776],{"class":727,"line":779},[725,1759,908],{"class":785},[725,1761,794],{"class":731},[725,1763,949],{"class":785},[725,1765,746],{"class":731},[725,1767,1617],{"class":749},[725,1769,746],{"class":731},[725,1771,959],{"class":785},[725,1773,743],{"class":731},[725,1775,964],{"class":785},[725,1777,823],{"class":731},[725,1779,1780],{"class":727,"line":826},[725,1781,830],{"emptyLinePlaceholder":829},[725,1783,1784],{"class":727,"line":833},[725,1785,1786],{"class":775},"\u002F\u002F 不要手动将子时间线添加到主时间线：\n",[725,1788,1789,1792],{"class":727,"line":839},[725,1790,1791],{"class":775},"\u002F\u002F masterTL.add(window.__timelines[\"intro-anim\"], 0);",[725,1793,1794],{"class":775}," \u002F\u002F 不需要\n",[978,1796,1797,1801],{},[692,1798,1385,1799],{},[984,1800,1388],{},[692,1802,1803,1804,1807,1808,1123,1810,1123,1812,1815,1816,1819,1820,1823,1824,1826],{},"不要直接对 ",[722,1805,1806],{},"\u003Cvideo>"," 元素的 ",[722,1809,1144],{},[722,1811,1147],{},[722,1813,1814],{},"top"," 或 ",[722,1817,1818],{},"left"," 做动画——这可能导致浏览器停止渲染帧。将视频包装在 ",[722,1821,1822],{},"\u003Cdiv>"," 中并对其包装器做动画。参见",[696,1825,132],{"href":133},"了解详细解释。",[707,1828,1829],{"id":1829},"下一步",[1831,1832,1833,1840,1847,1854],"ul",{},[1008,1834,1835,1839],{},[984,1836,1837],{},[696,1838,38],{"href":39},"\n理解时间线动画的构建块",[1008,1841,1842,1846],{},[984,1843,1844],{},[696,1845,50],{"href":51},"\n了解 GSAP 如何接入渲染管线",[1008,1848,1849,1853],{},[984,1850,1851],{},[696,1852,132],{"href":133},"\n避免破坏动画的陷阱",[1008,1855,1856,1860],{},[984,1857,1858],{},[696,1859,659],{"href":660},"\n合成属性的完整参考",[1862,1863,1864],"style",{},"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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}",{"title":720,"searchDepth":728,"depth":763,"links":1866},[1867,1868,1869,1870,1871,1872,1873,1874],{"id":709,"depth":763,"text":709},{"id":1003,"depth":763,"text":1003},{"id":1054,"depth":763,"text":1054},{"id":1117,"depth":763,"text":1117},{"id":1160,"depth":763,"text":1160},{"id":1398,"depth":763,"text":1398},{"id":1649,"depth":763,"text":1649},{"id":1829,"depth":763,"text":1829},"使用 GSAP 为 Hyperframes 合成添加动画。","md",null,{},{"title":100,"description":1875},"m6REO6hdO8p8KPBAxu08PBjNh0SjI5MbXRdLXDLa0sE",[1882,1884],{"title":96,"path":97,"stem":98,"description":1883,"children":-1},"我们为什么构建 Hyperframes、它在实践中与 Remotion 有何不同，以及每个工具适合的场景。",{"title":104,"path":105,"stem":106,"description":1885,"children":-1},"在本地或 Docker 中将合成渲染为 MP4、MOV 或 WebM。",1780322243767]