# Paano Mag-animate sa Kahabaan ng Path gamit ang Hana at Spline - Spline Academy (https://spline.design/fil/academy/tutorials/how-to-animate-along-a-path-with-hana-and-spline)

> Sa tutorial na ito, ipapakita namin kung paano gamitin ang isa sa mga bagong update namin sa Hana, at kung paano mo madaling mai-animate ang mga hugis o…

1. [Academy](https://spline.design/fil/academy)
2. [Mga Tutorial](https://spline.design/fil/academy/tutorials)
3. Paano Mag-animate sa Kahabaan ng Path gamit ang Hana at Spline

# Paano Mag-animate sa Kahabaan ng Path gamit ang Hana at Spline

HanaBaguhan7 min

Sa tutorial na ito, ipapakita namin kung paano gamitin ang isa sa mga bagong update namin sa Hana, at kung paano mo madaling mai-animate ang mga hugis o design sa isang custom na trajectory.

Gagabayan ka namin sa iba't ibang paraan ng pagdidisenyo ng path sa Hana, kung paano i-align ang mga hugis sa path na iyon, gumawa ng mga animation, mag-adjust ng mga position offset, at pumili sa pagitan ng world at tangential na orientation.

Mga Demo 👉 <https://app.spline.design/ui/6a36d303-a217-4466-95f5-85a1561c5725>

## Ang matututunan mo

1. [0:00Intro](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=0s)
2. [0:16Paano gumawa ng path gamit ang Vector Tool](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=16s)
3. [1:00Paano gamitin ang Align to Path](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=60s)
4. [2:07Paggawa ng mga Animation](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=127s)
5. [3:23Paano gumawa ng path gamit ang isang Shape](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=203s)
6. [4:03Pag-adjust ng mga Position Offset](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=243s)
7. [4:53World vs. Tangential na Orientation](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=293s)
8. [6:13Align to Path sa 3D](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=373s)

## Mga kaugnay na resource

- [Shapes Follow PathTemplate](https://app.spline.design/academy/tutorials/how-to-animate-along-a-path-with-hana-and-spline?redirect-duplicate-template-uuid=86ecf61d-28ed-4c69-9f76-029bd8130eed&is-2d-file=true)
- [Algin to Path ModiferDokumento](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana#%F0%9F%8E%A2-modifiers)

## Overview

- Hana
- 7 min
- Baguhan

## Bahagi ng

- [Hana | Lahat ng Kailangan Mong Malaman](https://spline.design/fil/academy/collections/hana-everything-you-need-to-know/how-to-animate-along-a-path-with-hana-and-spline)

## Mga kaugnay na tutorial

[Lahat ng tutorial](https://spline.design/fil/academy/tutorials)

[Gumawa ng 2D Follow InteractionHanaBaguhan8 min](https://spline.design/fil/academy/tutorials/create-a-2d-follow-interaction)[Magsimula sa Interactive 2D sa HanaHanaBaguhan17 min](https://spline.design/fil/academy/tutorials/get-started-with-interactive-2d-in-hana)[Gumawa ng mga Interactive na Design na Tumutugon sa Mouse Mo gamit ang HanaHanaBaguhan6 min](https://spline.design/fil/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

[Spline](https://spline.design/fil)

Ang 3D at 2D editor para sa mga team at kanilang mga agent. I-publish sa web, iOS at Android.

#### Magtanong sa AI tungkol sa Spline

#### Mga Produkto

- [3D Design](https://spline.design/fil/3d-design)
- [Hana](https://spline.design/fil/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/fil/ai-generate)
- [Spline MCP](https://spline.design/fil/mcp)
- [Spline Arena](https://spline.design/fil/arena)
- [Presyo](https://spline.design/fil/pricing)
- [Enterprise](https://spline.design/fil/enterprise)

#### Runtimes

- [Web](https://spline.design/fil/web)
- [iOS](https://spline.design/fil/ios)
- [Android](https://spline.design/fil/android)

#### Apps

- [I-download](https://spline.design/fil/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [I-download ang Spline Mirror](https://spline.design/download-mirror)

#### Matuto

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/fil/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Mga Solusyon](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/fil/blog)
- [Changelog](https://spline.design/fil/changelog)
- [Edukasyon](https://spline.design/fil/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/fil/affiliate)

#### Kumpanya

- [Mga Customer](https://spline.design/fil/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/fil/security)

#### Legal

- [Mga Tuntunin at Kundisyon](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.