1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
---
title: Animation
slug: Web/API/Animation
tags:
- API
- Animations
- Experimental
- Interface
- Reference
- Web Animations
- waapi
- web animation api
translation_of: Web/API/Animation
---
<p>{{ APIRef("Web Animations API") }}{{SeeCompatTable}}</p>
<p>L'interface <strong><code>Animation</code></strong> de <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">l'API Web Animations</a> correspond à un lecteur d'animations et offre les commandes nécessaires au contrôle et à la chronologie d'un noeud ou d'une source d'animation.</p>
<h2 id="Constructeur">Constructeur</h2>
<dl>
<dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
<dd>Crée une nouvelle instance de l'objet <code>Animation</code>.</dd>
</dl>
<h2 id="Propriétés">Propriétés</h2>
<dl>
<dt>{{domxref("Animation.currentTime")}}</dt>
<dd>La valeur actuelle de temps de l'animation en millisecondes, que l'animation soit en pause ou en cours. Si l'animation ne possède pas de {{domxref("AnimationTimeline", "timeline")}}, est inactive ou n'a toujours pas été lancée, la valeur est <code>null</code>.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.effect")}}</dt>
<dd>Récupère et défini le {{domxref("KeyframeEffect")}} associé à cette animation.</dd>
<dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
<dd>Retourne la <code>Promise </code>terminée en cours pour cette animation.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.id")}}</dt>
<dd>Récupère et défini le <code>String</code> utilisé pour identifier l'animation.</dd>
<dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
<dd>Retourne une valeur énumérée qui décit l'état de lecture de l'animation.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.playbackRate")}}</dt>
<dd>Retourne et défini la fréquence de lecture de l'animation.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
<dd>Retourne la <code>Promise </code>prête en cours pour l'animation.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.startTime")}}</dt>
<dd>Retourne et défini le moment prévu auquel la lecture de l'animation devrait commencer.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.timeline")}}</dt>
<dd>Retourne et défini la {{domxref("AnimationTimeline", "timeline")}} associée à cette animation.</dd>
</dl>
<h3 id="Gestionnaire_d'événements">Gestionnaire d'événements</h3>
<dl>
<dt>{{domxref("Animation.oncancel")}}</dt>
<dd>Retourne et défini le gestionnaire d'événement pour l'événement <code>cancel </code>(annuler).</dd>
<dt>{{domxref("Animation.onfinish")}}</dt>
<dd>Retourne et défini le gestionnaire d'événement pour l'événement <code>finish</code> (terminer).</dd>
</dl>
<h2 id="Méthodes">Méthodes</h2>
<dl>
<dt>{{domxref("Animation.cancel()")}}</dt>
<dd>Supprime toutes les {{domxref("KeyframeEffect", "keyframeEffects")}} dues à cette animation et interomp la lecture.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.finish()")}}</dt>
<dd>Cherche la fin de l'animation, en fonction que l'animation soit en lecture normale ou inversée.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.pause()")}}</dt>
<dd>Suspend la lecture de l'animation.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.play()")}}</dt>
<dd>Démarre ou reprend la lecture de l'animation, ou redémarre l'animation au début si celle-ci est déjà terminée.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.reverse()")}}</dt>
<dd>Inverse la direction de lecture, en s'arrêtant au début de l'animation. Si l'animation est terminée ou annulée, elle sera jouée de la fin vers le début.</dd>
</dl>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaire</th>
</tr>
<tr>
<td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
<td>{{Spec2("Web Animations")}}</td>
<td>Définition initiale</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Support simple</td>
<td>{{CompatChrome(39.0)}} [1]</td>
<td>{{CompatGeckoDesktop(48)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>effet, ligne temporelle, terminée, prête</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Constructeur</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop(48)}}</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Support simple</td>
<td>{{CompatVersionUnknown}} [1]</td>
<td>{{CompatGeckoMobile(48)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Les version précédent Chomme 44 implémente AnimationPlayer (le nom de l'interface dans la version précédente de cette spécification).</p>
<p> </p>
|
