Skip to content

Commit f54a61a

Browse files
Blessing-Mbasumn2u
Blessing-Mba
authored and
sumn2u
committed
translated animation-resources to french language
1 parent f59075f commit f54a61a

File tree

7 files changed

+630
-0
lines changed

7 files changed

+630
-0
lines changed

‎fr/animation-resources/README.md

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
layout: editorial
3+
chapter: 26
4+
pageNumber: 252
5+
description: "Ressources pour les animations en JavaScript, y compris des bibliothèques, des tutoriels, des articles et des cadres pour créer des animations engageantes.
6+
---
7+
8+
# Chapitre 26
9+
# Ressources d’animation
10+
11+
Les animations en JavaScript sont un moyen puissant de créer des expériences utilisateur attrayantes sur le Web. Ce chapitre couvrira diverses ressources, notamment des bibliothèques, des tutoriels, des articles et des frameworks, qui aident les développeurs à créer des animations à l’aide de JavaScript.
12+
13+
## Introduction aux animations JavaScript
14+
15+
Les animations JavaScript permettent aux développeurs de créer du contenu Web dynamique et visuellement attrayant. Les animations peuvent être utilisées à diverses fins, telles que l’amélioration des interfaces utilisateur, la fourniture de commentaires et la création de contenu plus attrayant.
16+
17+
### Bibliothèques
18+
19+
Les bibliothèques d’animation JavaScript facilitent la création d’animations complexes. Voici quelques bibliothèques populaires:
20+
21+
1. **[GSAP (GreenSock Animation Platform)](https://greensock.com/gsap/)**: Une bibliothèque puissante pour créer des animations hautes performances.
22+
2. **[Anime.js](https://animejs.com/)**: Une bibliothèque légère pour la gestion des animations.
23+
3. **[Three.js](https://threejs.org/)**: Une bibliothèque pour créer des animations 3D.
24+
4. **[Velocity.js](http://velocityjs.org/)**: Un moteur d’animation rapide.
25+
26+
### Tutoriels
27+
Pour commencer à utiliser les animations JavaScript, consultez ces tutoriels:
28+
29+
1. **[MDN Web Docs: Utilisation des animations CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)**: Un guide complet sur les animations CSS.
30+
2. **[JavaScript.info: JavaScript Animations](https://javascript.info/js-animation/)**: Une introduction aux animations JavaScript.
31+
3. **[GreenSock Learning Resources](https://greensock.com/learning/)**: Tutoriels et ressources pour l’apprentissage du GSAP.
32+
33+
### Cadres
34+
35+
Les frameworks offrent une approche structurée de la création d’animations. Parmi les frameworks populaires, citons:
36+
37+
1. **[React Spring](https://react-spring.io/)**: Une bibliothèque d’animation basée sur la physique des ressorts pour React.
38+
2. **[Framer Motion](https://www.framer.com/motion/)**: Une bibliothèque de mouvements prête pour la production pour React.
39+
40+
Dans ce chapitre, nous allons explorer en détail les sujets suivants:
41+
42+
* [Premiers pas avec GSAP](./gsap.md)
43+
* [Création d’animations avec Anime.js](./animejs.md)
44+
* [Animations 3D avec Three.js](./threejs.md)
45+
* [Animations rapides avec Velocity.js](./velocityjs.md)
46+
* [Utilisation de React Spring pour les animations](./react-spring.md)
47+
* [Animation à l’aide de Framer Motion](./framer-motion.md)
48+
49+
Plongeons dans chaque sujet pour comprendre comment utiliser efficacement ces ressources.

‎fr/animation-resources/animejs.md

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
chapter: 26
3+
pageNumber: 254
4+
description: Création d’animations avec Anime.js, une bibliothèque d’animations JavaScript légère.
5+
---
6+
7+
## Création d’animations avec Anime.js
8+
9+
Anime.js s’agit d’une bibliothèque d’animation JavaScript légère dotée d’une API simple mais puissante.
10+
11+
**Installation**
12+
13+
Vous pouvez inclure Anime.js dans votre projet à l’aide de npm :
14+
15+
```bash
16+
npm install animejs
17+
```
18+
19+
Vous pouvez également utiliser un CDN :
20+
21+
```html
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
23+
```
24+
25+
**Animation de base**
26+
27+
Voici un exemple simple d’utilisation de Anime.js pour animer un élément :
28+
29+
```html
30+
<!DOCTYPE html>
31+
<html lang="en">
32+
<head>
33+
<meta charset="UTF-8">
34+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
35+
<title>Animation Anime.js</title>
36+
</head>
37+
<body>
38+
<div id="box" style="width:100px; height:100px; background-color:red;"></div>
39+
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
40+
<script>
41+
anime({
42+
targets: '#box',
43+
translateX: 250,
44+
duration: 1000
45+
});
46+
</script>
47+
</body>
48+
</html>
49+
```
50+
51+
**Animation avancée**
52+
53+
Anime.js fournit diverses fonctionnalités pour les animations avancées, telles que les images clés, la chronologie et l’accélération.
54+
55+
56+
- **Images clés:**
57+
Les images clés vous permettent de définir plusieurs étapes d’une animation. Voici un exemple:
58+
59+
```javascript
60+
anime({
61+
targets: '#box',
62+
keyframes: [
63+
{translateX: 100},
64+
{translateY: 100},
65+
{translateX: 0},
66+
{translateY: 0}
67+
],
68+
duration: 4000
69+
});
70+
```
71+
72+
73+
- **Chronologie:**
74+
Les chronologies vous permettent de séquencer des animations. Voici un exemple:
75+
76+
```javascript
77+
var tl = anime.timeline({
78+
easing: 'easeOutExpo',
79+
duration: 750
80+
});
81+
82+
tl.add({
83+
targets: '#box',
84+
translateX: 250
85+
}).add({
86+
targets: '#box',
87+
translateY: 250
88+
}, '-=500'); // Démarre 500 ms avant la fin de l’animation précédente
89+
```
90+
91+
92+
- **Assouplissement:**
93+
Anime.js offre une variété d’options d’accélération pour rendre les animations plus naturelles. Voici un exemple:
94+
95+
```javascript
96+
anime({
97+
targets: '#box',
98+
translateX: 250,
99+
duration: 1000,
100+
easing: 'easeInOutQuad'
101+
});
102+
```
103+
104+
{% hint style="info" %}
105+
Pour plus de détails et d’exemples, consultez la documentation Anime.js.
106+
{% endhint %}

‎fr/animation-resources/framer-motion.md

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
chapter: 26
3+
pageNumber: 255
4+
description: Utilisation de Framer Motion pour les animations dans les applications React.
5+
---
6+
7+
## Animation à l’aide de Framer Motion
8+
9+
Framer Motion est une bibliothèque de mouvements prête pour la production pour React. Il facilite la création d’animations complexes.
10+
11+
**Installation**
12+
13+
Vous pouvez inclure Framer Motion dans votre projet à l’aide de npm:
14+
15+
```bash
16+
npm install framer-motion
17+
```
18+
19+
**Animation de base**
20+
21+
Voici un exemple simple d’utilisation de Framer Motion pour animer un composant:
22+
23+
```javascript
24+
import React from 'react';
25+
import { motion } from 'framer-motion';
26+
27+
const AnimatedComponent = () => {
28+
return (
29+
<motion.div animate={{ x: 100 }} transition={{ duration: 1 }}>
30+
Je vais me déplacer vers la droite
31+
</motion.div>
32+
);
33+
};
34+
35+
export default AnimatedComponent;
36+
```
37+
38+
**Animation avancée**
39+
40+
Framer Motion fournit diverses fonctionnalités pour les animations avancées, telles que les images clés, les mouvements et les animations de mise en page.
41+
42+
43+
- **Images clés:**
44+
Les images clés vous permettent de définir plusieurs étapes d’une animation. Voici un exemple :
45+
46+
```javascript
47+
import React from 'react';
48+
import { motion } from 'framer-motion';
49+
50+
const KeyframeComponent = () => {
51+
return (
52+
<motion.div
53+
animate={{ x: [0, 100, 0] }}
54+
transition={{ duration: 2, ease: 'easeInOut' }}
55+
>
56+
Je vais faire des allers-retours
57+
</motion.div>
58+
);
59+
};
60+
61+
export default KeyframeComponent;
62+
```
63+
64+
65+
- **Gestes**
66+
Framer Motion vous permet de créer des animations basées sur les gestes de l’utilisateur. Voici un exemple:
67+
68+
```javascript
69+
import React from 'react';
70+
import { motion } from 'framer-motion';
71+
72+
const GestureComponent = () => {
73+
return (
74+
<motion.div
75+
drag
76+
dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
77+
>
78+
Traîne-moi partout
79+
</motion.div>
80+
);
81+
};
82+
83+
export default GestureComponent;
84+
```
85+
86+
87+
- **Animations de mise en page**
88+
Framer Motion facilite l’animation des modifications de mise en page. Voici un exemple:
89+
90+
```javascript
91+
import React, { useState } from 'react';
92+
import { motion } from 'framer-motion';
93+
94+
const LayoutAnimationComponent = () => {
95+
const [isOpen, setIsOpen] = useState(false);
96+
97+
return (
98+
<motion.div layout onClick={() => setIsOpen(!isOpen)} style={{ background: 'lightblue', padding: '10px' }}>
99+
{isOpen ? 'Click to collapse' : 'Click to expand'}
100+
</motion.div>
101+
);
102+
};
103+
104+
export default LayoutAnimationComponent;
105+
```
106+
107+
{% hint style="info" %}
108+
Pour plus de détails et d’exemples, consultez la documentation de Framer Motion.
109+
{% endhint %}

‎fr/animation-resources/gsap.md

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
chapter: 26
3+
pageNumber: 291
4+
description: Premiers pas avec GSAP, une bibliothèque puissante pour créer des animations hautes performances.
5+
---
6+
7+
## Premiers pas avec GSAP
8+
9+
GSAP (GreenSock Animation Platform) est une bibliothèque puissante pour la création d’animations hautes performances. Il est largement utilisé en raison de sa robustesse et de sa flexibilité.
10+
11+
**Installation**
12+
13+
Vous pouvez inclure GSAP dans votre projet à l’aide de npm:
14+
15+
16+
```bash
17+
npm install gsap
18+
```
19+
20+
Vous pouvez également utiliser un CDN:
21+
22+
```html
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
24+
```
25+
26+
**Animation de base**
27+
28+
Voici un exemple simple d’utilisation de GSAP pour animer un élément:
29+
30+
```html
31+
<!DOCTYPE html>
32+
<html lang="en">
33+
<head>
34+
<meta charset="UTF-8">
35+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
36+
<title>Animation GSAP</title>
37+
</head>
38+
<body>
39+
<div id="box" style="width:100px; height:100px; background-color:red;"></div>
40+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
41+
<script>
42+
gsap.to("#box", {x: 100, duration: 1});
43+
</script>
44+
</body>
45+
</html>
46+
```
47+
48+
**Animation avancée**
49+
50+
GSAP fournit diverses fonctionnalités pour les animations avancées, telles que les chronologies, l’échelonnement et l’assouplissement.
51+
52+
53+
- **Chronologie:**
54+
Les chronologies vous permettent de séquencer des animations. Voici un exemple:
55+
56+
```javascript
57+
const name = "John";
58+
const greeting = `Hello, ${name}!`;
59+
console.log(greeting); // Output: Hello, John!
60+
```
61+
62+
63+
- **Tituber:**
64+
Tituber vous permet d’animer plusieurs éléments avec un délai entre chacun. Voici un exemple:
65+
66+
```javascript
67+
gsap.to(".box", {x: 100, duration: 1, stagger: 0.2});
68+
```
69+
70+
71+
- **Assouplissement:**
72+
GSAP offre une variété d’options d’accélération pour rendre les animations plus naturelles. Voici un exemple:
73+
74+
```javascript
75+
gsap.to("#box", {x: 100, duration: 1, ease: "bounce"});
76+
```
77+
78+
{% hint style="info" %}
79+
Pour plus de détails et d’exemples, consultez la documentation GSAP.
80+
{% endhint %}

0 commit comments

Comments
 (0)