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 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
关键帧轨道(KeyframeTrack)是关键帧([link:https://en.wikipedia.org/wiki/Key_frame keyframes])的定时序列,
它由时间和相关值的列表组成, 用来让一个对象的某个特定属性动起来。
</p>
<p>
在使用手册的“下一步”章节中,“动画系统”一文对three.js动画系统中的不同元素作出了概述
</p>
<p>
和[link:https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3 JSON model format]的动画层级相反,
关键帧轨道(KeyframeTrack)不会将单帧作为对象存储在“key”数组(一个存有每一帧的时间和值的地方)中。
</p>
<p>
关键帧轨道(KeyframeTrack)中总是存在两个数组:[page:.times times]数组按顺序存储该轨道的所有关键帧的时间值,而[page:.values values]数组包含动画属性的相应更改值。
</p>
<p>
值数组中的每一个成员,属于某一特定时间点,不仅可以是一个简单的数字,还可以是(比如)一个向量(如果是位置动画)或者是一个四元数(如果是旋转动画)。
因此,值数组(也是一个平面阵列)的长度可能是时间数组的三四倍。
</p>
<p>
与不同类型的动画值对应,存在若干关键帧轨道(KeyframeTrack)的子类,继承了它大多数属性和方法:
</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>
可以在[link:https://threejs.org/examples/js/animation/AnimationClipCreator.js AnimationClipCreator]文件中找到用不同类型的关键帧轨道创建动画剪辑([page:AnimationClip AnimationClips])的示例。
</p>
<p>
由于显式值仅针对存储在时间数组中的离散时间点指定,因此必须在两个时间点之间进行插值
</p>
<p>
轨道的名称对于这个轨道与动画节点的特定属性的连接(由[page:PropertyBinding]完成)很重要。
</p>
<h2>构造器</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values], [param:Constant interpolation] )</h3>
<p>
[page:String name] - 关键帧轨道(KeyframeTrack)的标识符.<br />
[page:Array times] - 关键帧的时间数组, 被内部转化为
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
[page:Array values] - 与时间数组中的时间点相关的值组成的数组, 被内部转化为
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
[page:Constant interpolation] - 使用的插值类型。 参见
[page:Animation Animation Constants] for possible values. Default is [page:Animation InterpolateLinear].
</p>
<h2>属性</h2>
<h3>[property:String name]</h3>
<p>
轨道的名称可以指动画对象中的变形目标([page:Geometry.morphTargets morph targets])、骨骼([page:SkinnedMesh bones])或可能的其他值
查看[page:PropertyBinding.parseTrackName]可获知哪些形式的字符串可以解析出绑定的属性:
</p>
<p>
可以使用节点名称或uuid(尽管它需要位于传递到混合器的场景图节点的子树中)引用到某节点。或者, 如果轨道名称的首字符是点,
该轨道会应用到传入到混合器的根节点上。
</p>
<p>
通常,在该节点之后会直接指定一个属性。 但是也可以再指定一个子属性, 例如 如果只是想通过浮动轨道使X组件旋转,可使用 .rotation[x]。
</p>
<p>
还可以使用对象名称来指定骨骼或多材质,例如:.bones[R_hand].scale;再比如,材料数组中的第四个材料的漫反射颜色的红通道可以通过 .materials[3].diffuse[r]访问到。
</p>
<p>
属性绑定也会解析变形目标名称, 例如: .morphTargetInfluences[run]
</p>
<p>
说明: 轨道名称不一定得唯一。 多个轨道可驱动统一属性, 此时结果应该基于多个轨道之间根据其各自动作的权重的加权混合。
</p>
<h3>[property:Float32Array times]</h3>
<p>
一个[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array]类型的值,由传入构造器中时间数组参数转化而来。
</p>
<h3>[property:Float32Array values]</h3>
<p>
一个[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array]类型的值,
由传入构造器中值数组参数转化而来
</p>
<h3>[property:Constant DefaultInterpolation]</h3>
<p>
默认的参数插值类型: [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],
内部用于时间数组的缓冲区的类型
</p>
<h3>[property:Constant ValueBufferType ]</h3>
<p>
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
内部用于值数组的缓冲区的类型
</p>
<h2>方法</h2>
<h3>[method:KeyframeTrack clone]()</h3>
<p></p>
<h3>[method:null createInterpolant]()</h3>
<p>
根据传入构造器中的插值类型参数,创建线性插值([page:LinearInterpolant LinearInterpolant]),立方插值([page:CubicInterpolant CubicInterpolant])或离散插值
([page:DiscreteInterpolant DiscreteInterpolant])
</p>
<h3>[method:null getInterpolation]()</h3>
<p>
返回插值类型
</p>
<h3>[method:Number getValueSize]()</h3>
<p>
返回每个值的大小(即[page:.values values]数组的长度除以[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>
根据时间([page:KeyframeTrack.times times])和值([page:KeyframeTrack.times values])创建一个新的离散插值([page:DiscreteInterpolant DiscreteInterpolant])。
可传入一个Float32Array类型的变量来接收结果, 否则会自动创建一个长度适宜的新数组。
</p>
<h3>[method:null InterpolantFactoryMethodLinear]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
<p>
根据时间([page:KeyframeTrack.times times])和值([page:KeyframeTrack.times values])创建一个新的线性插值([page:LinearInterpolant LinearInterpolant])。
可传入一个Float32Array类型的变量来接收结果, 否则会自动创建一个长度适宜的新数组。
</p>
<h3>[method:null InterpolantFactoryMethodSmooth]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
<p>
根据时间([page:KeyframeTrack.times times])和值([page:KeyframeTrack.times values])创建一个新的立方插值([page:CubicInterpolant CubicInterpolant])。
可传入一个Float32Array类型的变量来接收结果, 否则会自动创建一个长度适宜的新数组。
</p>
<h3>[method:this optimize]()</h3>
<p>
删除等效的顺序键,这些键在变形目标序列中很常见。
</p>
<h3>[method:this scale]()</h3>
<p>
缩放所有关键帧的时间。<br /><br />
说明: 这个方法很有用,例如, 可用于转化为某一特定帧率(正如[page:AnimationClip.CreateFromMorphTargetSequence animationClip.CreateFromMorphTargetSequence]内部所做的一样)。
</p>
<h3>[method:this setInterpolation]( [param:Constant interpolationType] )</h3>
<p>
设置插值类型。 参阅[page:Animation Animation Constants]以供选择。
</p>
<h3>[method:this shift]( [param:Number timeOffsetInSeconds] )</h3>
<p>
及时删除之前或之后的所有关键帧。
</p>
<h3>[method:this trim]( [param:Number startTimeInSeconds], [param:Number endTimeInSeconds] )</h3>
<p>
删除开始时间(startTime)之前以及结束时间(endTime)之后的关键帧,不改变[*startTime*, *endTime*]范围内的任何值。
</p>
<h3>[method:Boolean validate]()</h3>
<p>
在轨道上执行最小验证,有效则返回true
</p>
<p>
如果出现以下情况,该方法会在控制台输出错误日志: 轨道为空; [page:.valueSize value size]值不可靠;
[page:.times times]数组或[page:.values values]数组中的元素不是数字;*times*数组中的元素乱序。
</p>
<h2>静态方法</h2>
<h3>[method:KeyframeTrack parse]( [param:JSON json] )</h3>
<p>
解析JSON对象并返回一个正确类型的新关键帧轨道。
</p>
<h3>[method:JSON toJSON]( [param:KeyframeTrack track] )</h3>
<p>
将该轨道转化为JSON
</p>
<h2>源码</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
|