Path Animator

About this plugin

## 🎬 Path Animator — Bring Movement to Every PathAnimate objects along paths with precision. Support for rotation, scaling, and opacity animations with real-time preview directly inside Figma.### 🌟 Features📍 Path Animation: Move any object from start to end along a designated path.⏱ Flexible Timing: Adjustable duration from 0.5s to 20s.🎞 Frame Rate Control: Customizable from 10fps to 60fps for silky smoothness.🔄 Advanced Looping: Support for specific counts, infinite loops, and Ping-Pong mode.↻ Dynamic Rotation: Follow path orientation automatically or set custom angles.⤡ Transform FX: Animate Scale and Opacity transitions simultaneously.### 🚀 Quick StartPrepare: Prepare your Object (Shape/Frame/Instance) and Path. (Note: Shapes must be Flattened into paths first).Select: Select both elements and click Refresh. Use ⇅ to swap if the target and path are misidentified.Configure: Tweak the timing, easing, and transformation settings in the panel.Preview & Export: Hit ▶ Play for real-time canvas preview. Use Generate Code for seamless developer handoff.### ⚠️ Important TipsFlatten Paths: Always use Flatten on basic shapes to ensure compatibility.Instance Only: Avoid using Main Components; use Instances for smoother path manipulation.Independent Dev: This is a trial version (10 free uses). If you find it helpful, please consider upgrading to the Pro Version to support my work! ☕️📩 Support: [email protected]## 🎬 Path Animator — 让线条赋予物体灵魂Path Animator 是一款专为设计师打造的路径动效工具。它打破了静态设计的限制，让物体能够沿着任意路径丝滑游走。支持旋转、缩放、透明度等多维动画叠加，在 Figma 画布内即可实现实时动效预览与代码交付。### 🌟 功能亮点 (Feature List)核心功能深度解析📍 路径追踪物体完美贴合指定路径，从起点至终点灵动穿梭⏱ 精准时长0.5s 至 20s 自由定义，掌控动效节奏🎞 流畅帧率支持 10fps ~ 60fps 调节，适配不同性能需求🔄 循环逻辑支持自定义次数、无限循环及 Ping-Pong (来回) 模式↻ 复合旋转自动跟随路径切线方向，或自定义起止角度偏移⤡ 变换动效支持起始与结束状态的 缩放 (Scale) 与 透明度 (Opacity) 动叠加### 🚀 使用指南 (How to Use)准备艺术素材动画主体：任意形状、Frame 或组件实例（注意：请避免直接使用主组件）。运动路径：矢量路径、几何形状（需右键执行 Flatten 转换为标准路径）。建立关联同时选中「动画主体」与「路径」，点击插件内的 刷新 (Refresh) 按钮。插件将智能识别对象。若识别有误，点击 ⇅ 切换 即可修正。精调参数根据设计需求配置时长、帧率、循环模式。开启“沿路径旋转”获取更自然的仿生效果，或叠加缩放与透明度变化。实时预览与交付点击 ▶ Play 开启画布实时预览，⏹ Stop 随时中止。满意后点击 Generate Code。插件将根据代码环境自动优化样式支持，一键完成动效交付。### 🛠 技术规格 (Technical Specs)路径兼容：全面支持 VECTOR, ELLIPSE, RECTANGLE, LINE 等矢量类型。核心算法：支持 SVG 路径指令 (M, L, C, Q, Z)，采用 Ease-in-out 缓动函数。平滑度：基于贝塞尔曲线的 20 步均匀采样技术，确保视觉无锯齿感。### ⚠️ 注意事项 (Notes)路径处理：原始形状（如多边形）必须执行 Flatten (Ctrl/Cmd+E) 后方可被解析。组件建议：请使用组件实例（Instance）而非主组件（Main Component）进行动画制作。性能优化：过于复杂的路径节点可能影响预览性能。关于支持：本插件为个人独立开发，提供 10 次免费试用。若它能为您带来效率提升，诚挚邀请您解锁专业版以支持后续开发。