You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

263 lines
10 KiB

2 years ago
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
Un KeyframeTrack est une séquence chronométrée de [link:https://en.wikipedia.org/wiki/Key_frame keyframes],
qui est composée de listes de durées et de valeurs connexes, qui sont utilisées pour animer
une propriété spécifique d'un objet.
</p>
<p>
Pour avoir un aperçu des différents éléments du système d'animation de three.js, consultez
l'article "Système d'Animation" dans la section "Étapes Suivantes" du manuel.
</p>
<p>
Contrairement à la hiérarchie d'animation du
[link:https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3 JSON model format] un
`KeyframeTrack` ne stocke pas ses keyframes comme étant des objets dans un tableau à "clés" (stockant
les durées et les valeurs pour chaque frame ensemble à un même endroit).
</p>
<p>
A la place, il y a toujours deux tableaux dans un `KeyframeTrack`: le tableau [page:.times times]
stocke les durées pour chaque keyframes de ce track dans un ordre séquentiel, et le tableau
[page:.values values] array contient les valeurs modifiées correspondantes de la propriété animée.
</p>
<p>
Une simple valeur, appartenant à un certain point temporel, ne peut pas simplement être un nombre, mais (par
exemple) un vecteur (si c'est une position qui est animée) ou un quaternion (si c'est une rotation qui est animée). Pour
cette raison, le tableau de valeurs (qui est également un tableau à une dimension) peut être de trois ou quatre fois la taille du
tableau de durées.
</p>
<p>
Il existe plusieurs sous-classes de `KeyframeTrack` correspondant aux différents
types possibles de valeurs animées, héritant de la plupart des propriétés et méthodes:
</p>
<ul>
<li>[page:BooleanKeyframeTrack]</li>
<li>[page:ColorKeyframeTrack]</li>
<li>[page:NumberKeyframeTrack]</li>
<li>[page:QuaternionKeyframeTrack]</li>
<li>[page:StringKeyframeTrack]</li>
<li>[page:VectorKeyframeTrack]</li>
</ul>
<p>
Quelques exemples qui montrent comment créer manuellement un [page:AnimationClip AnimationClips] avec différentes sortes
de KeyframeTracks peuvent être trouvés dans le fichier [link:https://threejs.org/examples/jsm/animation/AnimationClipCreator.js AnimationClipCreator].
</p>
<p>
Étant donné que les valeurs explicites ne sont spécifiées que pour les points temporels discrets stocké dans le tableau de durées,
toutes les valeurs du milieu doivent être interpolées.
</p>
<p>
Le nom du track est important pour la connexion de ce track avec une propriété spécifique du
node animé (fait par [page:PropertyBinding]).
</p>
<h2>Constructeur</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values], [param:Constant interpolation] )</h3>
<p>
[page:String name] - l'identifiant du `KeyframeTrack`.<br />
[page:Array times] - un tableau des durées des keyframes, convertis en interne en un
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
[page:Array values] - un tableau avec les valeurs concernant le tableau de durées, convertis en interne en un
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
[page:Constant interpolation] - le type d'interpolation à utiliser. Voir
[page:Animation Animation Constants] pour les valeurs possibles. La valeur par défaut est [page:Animation InterpolateLinear].
</p>
<h2>Propriétés</h2>
<h3>[property:String name]</h3>
<p>
Le nom du track peut faire référence à des morph targets ou à des [page:SkinnedMesh bones] ou possiblement d'autres valeurs de l'objet animé. Voir
[page:PropertyBinding.parseTrackName] pour les types de strings qui peuvent être assemblés:
</p>
<p>
Le nom peut spécifier le noeud en utilisant son nom ou son uuid (bien qu'il doive être dans le
sous-arbre du noeud du graphe de scène passé dans le mixer). Ou, si le nom du track commence par un point,
le track s'applique au noeud racine qui a été passé en paramètre du mixer.
</p>
<p>
Généralement après le noeud une propriété est spécifiée directement. Mais vous pouvez également spécifier une
sous-propriété, comme .rotation[x], si vous voulez seulement contrôler X composants de la rotation
via une float track.
</p>
<p>
Vous pouvez également spécifier des bones ou des multimatériaux en utilisant un nom d'objet, par exemple:
.bones[R_hand].scale; le canal rouge de la couleur diffuse du quatrième matériau dans un
tableau de matériaux - comme autre exemple - peut être accédé avec .materials[3].diffuse[r].
</p>
<p>
PropertyBinding résoudra également les noms de morph target, par exemple: .morphTargetInfluences[run].
</p>
<p>
Note: Le nom de track ne doit pas nécessairement être unique. Plusieurs tracks peuvent gérer la même
propriété. Le résultat doit être basé sur un mélange pondéré entre les mutiples tracks selon
le poids de leurs actions respectives.
</p>
<h3>[property:Float32Array times]</h3>
<p>
Un [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
convertis depuis le tableau de durées qui est passé en paramètre au constructeur.
</p>
<h3>[property:Float32Array values]</h3>
<p>
Un [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
convertis depuis le tableau de valeurs qui est passé en paramètre au constructeur.
</p>
<h3>[property:Constant DefaultInterpolation]</h3>
<p>
Le type d'interpolation par défaut: [page:Animation InterpolateLinear].
</p>
<h3>[property:Constant TimeBufferType ]</h3>
<p>
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
le type de buffer utilisé en interne pour les durées.
</p>
<h3>[property:Constant ValueBufferType ]</h3>
<p>
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
le type de buffer utilisé en interne pour les valeurs.
</p>
<h2>Méthodes</h2>
<h3>[method:KeyframeTrack clone]()</h3>
<p>
Renvoie une copie de ce track.
</p>
<h3>[method:Interpolant createInterpolant]()</h3>
<p>
Crée un [page:LinearInterpolant LinearInterpolant], un [page:CubicInterpolant CubicInterpolant]
ou un [page:DiscreteInterpolant DiscreteInterpolant], selon la valeur du paramètre d'interpolation
passé au constructeur.
</p>
<h3>[method:Interpolant getInterpolation]()</h3>
<p>
Renvoie le type d'interpolation.
</p>
<h3>[method:Number getValueSize]()</h3>
<p>
Retourne la taille de chaque valeur (qui est la taille du tableau de [page:.values valeurs] divisé
par la longueur du tableau [page:.times times]).
</p>
<h3>[method:DiscreteInterpolant InterpolantFactoryMethodDiscrete]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
<p>
Crée un nouveau [page:DiscreteInterpolant DiscreteInterpolant] depuis le
[page:KeyframeTrack.times times] et [page:KeyframeTrack.times values]. Un Float32Array peut être
passé en paramètre, il recevra les résultats. Autrement, un nouveau tableau avec la taille appropriée sera
créé automatiquement.
</p>
<h3>[method:LinearInterpolant InterpolantFactoryMethodLinear]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
<p>
Crée un nouveau [page:LinearInterpolant LinearInterpolant] depuis le
[page:KeyframeTrack.times times] et [page:KeyframeTrack.times values]. Un Float32Array peut être
passé en paramètre, il recevra les résultats. Autrement, un nouveau tableau avec la taille appropriée sera
créé automatiquement.
</p>
<h3>[method:CubicInterpolant InterpolantFactoryMethodSmooth]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
<p>
Crée un nouveau [page:CubicInterpolant CubicInterpolant] depuis le
[page:KeyframeTrack.times times] et [page:KeyframeTrack.times values]. Un Float32Array peut être
passé en paramètre, il recevra les résultats. Autrement, un nouveau tableau avec la taille appropriée sera
créé automatiquement.
</p>
<h3>[method:this optimize]()</h3>
<p>
Retire les clés séquentielles équivalentse, qui sont communes dans les séquences de morph target.
</p>
<h3>[method:this scale]()</h3>
<p>
Met à l'échelle chaque vecteur grâce à un facteur.<br /><br />
Note: C'est utile, par exemple, pour convertir à un certain taux de frames par secondes (comme
réalisé en interne par
[page:AnimationClip.CreateFromMorphTargetSequence animationClip.CreateFromMorphTargetSequence]).
</p>
<h3>[method:this setInterpolation]( [param:Constant interpolationType] )</h3>
<p>
Renseigne le type d'interpolation. Voir [page:Animation Animation Constants] pour les choix.
</p>
<h3>[method:this shift]( [param:Number timeOffsetInSeconds] )</h3>
<p>
Déplace tous les keyframes avant ou après dans le temps.
</p>
<h3>[method:this trim]( [param:Number startTimeInSeconds], [param:Number endTimeInSeconds] )</h3>
<p>
Retire les keyframes avant `startTime` et après `endTime`,
sans changer de valeurs entre [`startTime`, `endTime`].
</p>
<h3>[method:Boolean validate]()</h3>
<p>
Performe une validation minimale de chaque track du clip. Renvoie true si toutes les tracks sont valides.
</p>
<p>
Cette méthode envoie des erreurs à la console, si un track est vide, si la [page:.valueSize value taille] n'est pas valide, si un élémént
dans le tableau [page:.times times] ou [page:.values values] n'est pas un nombre valide ou si les éléménts du tableau `times` sont désorganisés.
</p>
<h2>Méthodes Statiques</h2>
<h3>[method:JSON toJSON]( [param:KeyframeTrack track] )</h3>
<p>
Convertis le track en JSON.
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>