# Animer le long d’un tracé avec Hana et Spline - Spline Academy (https://spline.design/fr/academy/tutorials/how-to-animate-along-a-path-with-hana-and-spline)

> Dans ce tutoriel, nous vous montrons comment utiliser l’une de nos récentes mises à jour de Hana pour animer facilement des formes ou des designs le long…

1. [Academy](https://spline.design/fr/academy)
2. [Tutoriels](https://spline.design/fr/academy/tutorials)
3. Animer le long d’un tracé avec Hana et Spline

# Animer le long d’un tracé avec Hana et Spline

HanaDébutant7 min

Dans ce tutoriel, nous vous montrons comment utiliser l’une de nos récentes mises à jour de Hana pour animer facilement des formes ou des designs le long d’une trajectoire personnalisée.

Nous vous présentons différentes façons de dessiner un tracé dans Hana, d’aligner des formes sur ce tracé, de créer des animations, d’ajuster les décalages de position et de choisir entre une orientation globale et tangentielle.

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

## Ce que vous allez apprendre

1. [0:00Intro](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=0s)
2. [0:16Créer un tracé avec l’outil Vector](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=16s)
3. [1:00Utiliser Align to Path](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=60s)
4. [2:07Créer des animations](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=127s)
5. [3:23Créer un tracé à partir d’une forme](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=203s)
6. [4:03Ajuster les décalages de position](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=243s)
7. [4:53Orientation globale ou tangentielle](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=293s)
8. [6:13Align to Path en 3D](https://www.youtube.com/watch?v=u-fEUpXoyCU&t=373s)

## Ressources associées

- [Shapes Follow PathModèle](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 ModiferDocument](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana#%F0%9F%8E%A2-modifiers)

## Présentation

- Hana
- 7 min
- Débutant

## Fait partie de

- [Hana | Tout ce qu’il faut savoir](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know/how-to-animate-along-a-path-with-hana-and-spline)

## Tutoriels associés

[Tous les tutoriels](https://spline.design/fr/academy/tutorials)

[Créer une interaction Follow en 2DHanaDébutant8 min](https://spline.design/fr/academy/tutorials/create-a-2d-follow-interaction)[Premiers pas avec la 2D interactive dans HanaHanaDébutant17 min](https://spline.design/fr/academy/tutorials/get-started-with-interactive-2d-in-hana)[Créer avec Hana des designs interactifs qui réagissent à votre sourisHanaDébutant6 min](https://spline.design/fr/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

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

L’éditeur 3D et 2D pour les équipes et leurs agents. Publiez sur le web, iOS et Android.

#### Interrogez l’IA sur Spline

#### Produits

- [Design 3D](https://spline.design/fr/3d-design)
- [Hana](https://spline.design/fr/hana)
- [Omma](https://omma.build)
- [Génération 3D par IA](https://spline.design/fr/ai-generate)
- [Spline MCP](https://spline.design/fr/mcp)
- [Spline Arena](https://spline.design/fr/arena)
- [Tarifs](https://spline.design/fr/pricing)
- [Enterprise](https://spline.design/fr/enterprise)

#### Runtimes

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

#### Apps

- [Télécharger](https://spline.design/fr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Télécharger Spline Mirror](https://spline.design/download-mirror)

#### Apprendre

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

#### Communauté

- [Communauté Spline](https://community.spline.design)
- [Blog](https://spline.design/fr/blog)
- [Nouveautés](https://spline.design/fr/changelog)
- [Éducation](https://spline.design/fr/education)
- [Contra](https://spline.design/contra)
- [Affiliation](https://spline.design/fr/affiliate)

#### Entreprise

- [Clients](https://spline.design/fr/customers)
- [Carrières](https://www.ycombinator.com/companies/spline/jobs)
- [Sécurité](https://spline.design/fr/security)

#### Mentions légales

- [Conditions générales](https://spline.design/terms)
- [Confidentialité](https://spline.design/privacy)

#### Contact

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

© 2026 - Spline, Inc.