123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262 |
- <!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>
|