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.
260 lines
10 KiB
260 lines
10 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="it">
|
||
|
|
<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 è una sequenza temporizzata di [link:https://en.wikipedia.org/wiki/Key_frame keyframe],
|
||
|
|
composti da una lista di tempi e valori correlati, utilizzati per animare una proprietà specifica di un oggetto.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Per una paronamica dei diversi elementi del sistema di animazione di three.js consultare l'articolo
|
||
|
|
"Sistema di animazione" nella sezione "Prossimi Passi" del manuale.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
A differenza della gerarchia di animazione del [link:https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3 modello JSON],
|
||
|
|
`KeyframeTrack` non memorizza i suoi singoli keyframe come oggetti in un array "keys" (che contiene i tempi
|
||
|
|
e i valori di ciascun frame in un unico posto).
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Invece ci sono sempre due array in un `KeyframeTrack`: l'array [page:.times times]
|
||
|
|
memorizza i valori temporali per tutti i keyframe di questa traccia in ordine sequenziale e l'array
|
||
|
|
[page:.values values] contiene i corrispondenti valori di modifica della proprietà animata.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Un singolo valore, appartenente ad un determinato momento, non può essere solo un semplice numero, ma
|
||
|
|
(per esempio) un vettore (se una posizione è animata) o un quaternione (se una rotazione è animata).
|
||
|
|
Per questo motivo l'array values (che è anche un array flat) potrebbe essere tre o quattro volte
|
||
|
|
più lungo dell'array times.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
In corrispondenza dei diversi tipi possibili di valori animati esistono diverse sottoclassi di `KeyframeTrack`,
|
||
|
|
che ereditano la maggior parte delle proprietà e dei metodi:
|
||
|
|
</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>
|
||
|
|
Alcuni esempi di come creare manualmente [page:AnimationClip AnimationClip] con diversi tipi di
|
||
|
|
KeyframeTrack possono essere trovati nel file [link:https://threejs.org/examples/jsm/animation/AnimationClipCreator.js AnimationClipCreator].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Poiché i valori espliciti sono solo specifici per i punti temporali discreti memorizzati nell'array times
|
||
|
|
tutti i valori itermedi devono essere interpolati.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Il nome della track è importante per il collegamento di questa track con una proprietà specifica
|
||
|
|
del nodo animato (creato da [page:PropertyBinding]).
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Costruttore</h2>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[name]( [param:String name], [param:Array times], [param:Array values], [param:Constant interpolation] )</h3>
|
||
|
|
<p>
|
||
|
|
[page:String name] - l'identificativo per `KeyframeTrack`.<br />
|
||
|
|
[page:Array times] - un array di times di keyframe, convertito internamente a
|
||
|
|
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
|
||
|
|
[page:Array values] - un array con i valori relativi all'array times, convertito internamente a
|
||
|
|
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
|
||
|
|
[page:Constant interpolation] - il tipo di interpolazione da usare. Vedi
|
||
|
|
[page:Animation Animation Constants] per i possibili valori. L'impostazione predefinita è [page:Animation InterpolateLinear].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Proprietà</h2>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:String name]</h3>
|
||
|
|
<p>
|
||
|
|
Il nome della track può riferirsi a morph targets o [page:SkinnedMesh bones] o possibilmente ad altri valori all'interno dell'oggetto animato.
|
||
|
|
Vedi [page:PropertyBinding.parseTrackName] per le forme di stringhe che possono essere parsate per il property
|
||
|
|
binding:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Il nome può specificare il nodo utilizzando il suo nome o il suo uuid (anche se deve trovarsi
|
||
|
|
nel sottoalbero del nodo del grafo della scena passato al mixer). Oppure, se il nome della track inizia con un punto,
|
||
|
|
la track si applica al nodo root che è stato passato nel mixer.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Solitamente dopo il nodo una proprietà viene specificata direttamente. Ma si può anche specificare
|
||
|
|
una sottoproprietà, come .rotation[x], se si vuole guidare il componente X della rotazione tramite
|
||
|
|
una traccia float.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Si possono anche specificare ossa (bones) o multimateriali usando il nome di un oggetto, per esempio:
|
||
|
|
.bones[R_hand].scale; il canale rosso del colore diffuso del quarto materiale in un array di materiali
|
||
|
|
- come ulteriore esempio - è accessibile con .materials[3].diffuse[r].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Il PropertyBinding risolverà anche i nomi dei morph target, per esempio: .morphTargetInfluences[run].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Nota: Il nome della traccia non deve essere per forza univoco. Più tracce possono guidare la stessa proprietà.
|
||
|
|
Il risultato deve essere basato su una miscela ponderata tra le tracce multiple in base ai pesi delle rispettive
|
||
|
|
azioni.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Float32Array times]</h3>
|
||
|
|
<p>
|
||
|
|
Un [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
|
||
|
|
convertito dall'array times passato nel costruttore.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Float32Array values]</h3>
|
||
|
|
<p>
|
||
|
|
Un [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
|
||
|
|
convertito dall'array values passato nel costruttore.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Constant DefaultInterpolation]</h3>
|
||
|
|
<p>
|
||
|
|
Il tipo predefinito di interpolazione: [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],
|
||
|
|
il tipo di buffer internamente utilizzato per i tempi.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Constant ValueBufferType ]</h3>
|
||
|
|
<p>
|
||
|
|
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
|
||
|
|
il tipo di buffer internamente utilizzato per i valori.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Metodi</h2>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[method:KeyframeTrack clone]()</h3>
|
||
|
|
<p>
|
||
|
|
Restituisce una copia di questa traccia.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:Interpolant createInterpolant]()</h3>
|
||
|
|
<p>
|
||
|
|
Crea una [page:LinearInterpolant LinearInterpolant], [page:CubicInterpolant CubicInterpolant]
|
||
|
|
o [page:DiscreteInterpolant DiscreteInterpolant], a seconda del valore del parametro di interpolazione
|
||
|
|
passato nel costruttore.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:Interpolant getInterpolation]()</h3>
|
||
|
|
<p>
|
||
|
|
Restituisce il tipo di interpolazione.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:Number getValueSize]()</h3>
|
||
|
|
<p>
|
||
|
|
Restituisce la dimensione di ongi value (ovvero la lunghezza dell'array [page:.values values] diviso
|
||
|
|
la lunghezza dell'array [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>
|
||
|
|
Crea un nuovo [page:DiscreteInterpolant DiscreteInterpolant] dai [page:KeyframeTrack.times tempi] e
|
||
|
|
dai [page:KeyframeTrack.times valori]. È possibile passare un Float32Array che riceverà i risultati.
|
||
|
|
Altrimenti, verrà creato automaticamente un nuovo array di dimensioni appropriate.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:LinearInterpolant InterpolantFactoryMethodLinear]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
|
||
|
|
<p>
|
||
|
|
Crea un nuovo [page:LinearInterpolant LinearInterpolant] dai [page:KeyframeTrack.times tempi] e
|
||
|
|
dai [page:KeyframeTrack.times valori].È possibile passare un Float32Array che riceverà i risultati.
|
||
|
|
Altrimenti, verrà creato automaticamente un nuovo array di dimensioni appropriate.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:CubicInterpolant InterpolantFactoryMethodSmooth]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
|
||
|
|
<p>
|
||
|
|
Crea un nuovo [page:CubicInterpolant CubicInterpolant] dai [page:KeyframeTrack.times tempi] e
|
||
|
|
dai [page:KeyframeTrack.times valori].È possibile passare un Float32Array che riceverà i risultati.
|
||
|
|
Altrimenti, verrà creato automaticamente un nuovo array di dimensioni appropriate.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:this optimize]()</h3>
|
||
|
|
<p>
|
||
|
|
Rimuove le chiavi sequenziali equivalenti, che sono comuni nelle sequenze morph target.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:this scale]()</h3>
|
||
|
|
<p>
|
||
|
|
Scala tutti i tempi del keyframe di un fattore.<br /><br />
|
||
|
|
|
||
|
|
Nota: Questo metodo è utile, per esempio, per le conversioni ad un determinato rate di frame per secondo (come
|
||
|
|
avviene internamente da
|
||
|
|
[page:AnimationClip.CreateFromMorphTargetSequence animationClip.CreateFromMorphTargetSequence]).
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:this setInterpolation]( [param:Constant interpolationType] )</h3>
|
||
|
|
<p>
|
||
|
|
Imposta il tipo di interpolazione. Vedi [page:Animation Animation Constants] per le opzioni.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:this shift]( [param:Number timeOffsetInSeconds] )</h3>
|
||
|
|
<p>
|
||
|
|
Sposta tutti i keyframe avanti o indietro nel tempo.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[method:this trim]( [param:Number startTimeInSeconds], [param:Number endTimeInSeconds] )</h3>
|
||
|
|
<p>
|
||
|
|
Rimuove tutti i keyframe prima di `startTime` e dopo `endTime`,
|
||
|
|
senza modificare alcun valore nell'intervallo [`startTime`, `endTime`].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:Boolean validate]()</h3>
|
||
|
|
<p>
|
||
|
|
Esegue una convalida minima delle tracce. Restituisce true se è valido.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Questo metodo registra gli errori nella console, se una traccia è vuota, se la dimensione del valore non è valida,
|
||
|
|
se un elemento nell'array [page:.times times] o nell'array [page:.values values] non è un numero valido o se
|
||
|
|
gli elementi nell'array times non sono ordinati.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Metodi statici</h2>
|
||
|
|
|
||
|
|
<h3>[method:JSON toJSON]( [param:KeyframeTrack track] )</h3>
|
||
|
|
<p>
|
||
|
|
Converte la traccia in JSON.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Source</h2>
|
||
|
|
|
||
|
|
|
||
|
|
<p>
|
||
|
|
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
|
||
|
|
</p>
|
||
|
|
</body>
|
||
|
|
</html>
|