# Paano Mag-animate sa Kahabaan ng Path gamit ang Hana at Spline - Hana | Lahat ng Kailangan Mong Malaman - 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 Kurso](https://spline.design/fil/academy/collections)
3. [Hana | Lahat ng Kailangan Mong Malaman](https://spline.design/fil/academy/collections/hana-everything-you-need-to-know)
4. Paano Mag-animate sa Kahabaan ng Path gamit ang Hana at Spline

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

Aralin 11 ng 15HanaBaguhan7 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

## Susunod

[Magdisenyo at Mag-animate gamit ang mga Vector Mask7 minBaguhan](https://spline.design/fil/academy/collections/hana-everything-you-need-to-know/design-and-animate-with-vector-masks)[Magpatuloy](https://spline.design/fil/academy/collections/hana-everything-you-need-to-know/design-and-animate-with-vector-masks)

[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.