LerpComponent()

LerpComponent插值计算组件

new LerpComponent()
thing/src/components/LerpComponent.js, line 222

提供物体插值计算的功能组件
用于执行平滑的变换操作的物体插值计算功能组件。

Extends

Members

active :boolean
thing/src/components/BaseComponent.js, line 415

激活或停用组件。
Overrides:

app :THING.App
thing/src/components/BaseComponent.js, line 444

获取应用程序。
Overrides:

object :THING.BaseObject
thing/src/components/BaseComponent.js, line 435

获取对象。
Overrides:

onActiveChange :OnActiveChangeComponentCallback
thing/src/components/BaseComponent.js, line 250

活动状态改变时的回调函数。
Overrides:

onAfterAdd :OnAfterAddComponentCallback
thing/src/components/BaseComponent.js, line 314

添加之后。
Overrides:

onAfterAddChild :OnAddChildComponentCallback
thing/src/components/BaseComponent.js, line 282

添加子对象之后的回调函数。
Overrides:

onAfterRemove :OnAfterRemoveComponentCallback
thing/src/components/BaseComponent.js, line 330

移除之后。
Overrides:

onAfterRemoveChild :OnRemoveChildComponentCallback
thing/src/components/BaseComponent.js, line 298

移除子对象之后的回调函数。
Overrides:

onBeforeAdd :OnBeforeAddComponentCallback
thing/src/components/BaseComponent.js, line 306

添加之前。
Overrides:

onBeforeAddChild :OnAddChildComponentCallback
thing/src/components/BaseComponent.js, line 274

添加子对象之前的回调函数。
Overrides:

onBeforeRemove :OnBeforeRemoveComponentCallback
thing/src/components/BaseComponent.js, line 322

移除之前。
Overrides:

onBeforeRemoveChild :OnRemoveChildComponentCallback
thing/src/components/BaseComponent.js, line 290

移除子对象之前的回调函数。
Overrides:

onCopy :OnCopyComponentCallback
thing/src/components/BaseComponent.js, line 266

复制时的回调函数。
Overrides:

onExport :OnExportComponentCallback
thing/src/components/BaseComponent.js, line 346

导出数据时。
Overrides:

onImport :OnImportComponentCallback
thing/src/components/BaseComponent.js, line 338

导入数据时。
Overrides:

onInit :OnInitComponentCallback
thing/src/components/BaseComponent.js, line 186

初始化时的回调函数。
Overrides:

onLoadResource :OnLoadResourceComponentCallback
thing/src/components/BaseComponent.js, line 194

加载资源时的回调函数。
Overrides:

onParentChange :OnParentChangeComponentCallback
thing/src/components/BaseComponent.js, line 226

改变父对象时的回调函数。
Overrides:

onRefresh :OnRefreshComponentCallback
thing/src/components/BaseComponent.js, line 242

刷新时的回调函数。
Overrides:

onResize :OnResizeComponentCallback
thing/src/components/BaseComponent.js, line 234

调整大小时的回调函数。
Overrides:

onUnloadResource :OnUnloadResourceComponentCallback
thing/src/components/BaseComponent.js, line 202

卸载资源时的回调函数。
Overrides:

onUpdate :OnUpdateComponentCallback
thing/src/components/BaseComponent.js, line 210

更新时的回调函数。
Overrides:

onVisibleChange :OnVisibleChangeComponentCallback
thing/src/components/BaseComponent.js, line 258

可见性改变时的回调函数。
Overrides:

Methods

fadeIn(param, trigger)
thing/src/components/LerpComponent.js, line 1446

将对象淡入到完全不透明。
Parameters:
Name Type Description
param LerpArgs 淡入动作的参数。
trigger function 在淡入完成时调用的触发函数。
Example
let lerp = box.lerp;
lerp.fadeIn({
  from: {
    style: {
      opacity: 0
    }
  }

fadeInAsync(param) → {Promise}
thing/src/components/LerpComponent.js, line 1524

异步将对象淡入。
Parameters:
Name Type Description
param LerpArgs 淡入动作的参数。
Returns:
Promise - 一个在淡入完成时解析的承诺。
Example
let lerp = box.lerp;
lerp.fadeInAsync({
  from: {
    style: {
      opacity: 0
    }

fadeOut(param, trigger)
thing/src/components/LerpComponent.js, line 1485

将对象淡出到完全透明。
Parameters:
Name Type Description
param LerpArgs 淡出动作的参数。
trigger function 在淡出完成时调用的触发函数。
Example
let lerp = box.lerp;
lerp.fadeOut({
  from: {
    style: {
      opacity: 1
    }

fadeOutAsync(param) → {Promise}
thing/src/components/LerpComponent.js, line 1543

异步将对象淡出。
Parameters:
Name Type Description
param LerpArgs 淡出动作的参数。
Returns:
Promise - 一个在淡出完成时解析的承诺。
Example
let lerp = box.lerp;
lerp.fadeOutAsync({
  from: {
    style: {
      opacity: 1
    }

movePath(value, param, trigger) → {void}
thing/src/components/LerpComponent.js, line 1075

将物体沿指定路径移动
Parameters:
Name Type Description
value Array | object 目标路径坐标数组或包含移动参数的对象
param object 移动参数配置对象
Properties
Name Type Description
path Array.<Array.<number>> 移动路径坐标数组
time number 移动时间(毫秒)
spaceType THING.SpaceType 坐标空间类型
orientToPath boolean 是否朝向移动方向
orientToPathDegree number 朝向偏移角度，在朝向路径方向的基础上偏移的角度，正值为顺时针，负值为逆时针
times number 循环次数
loopType THING.LoopType 循环类型
onUpdate function 更新回调函数
onComplete function 完成回调函数
trigger function 触发器函数
Returns:
void
Example
// 基础用法 - 直接传入路径数组
object.lerp.movePath([
  [0, 0, 0],
  [10, 10, 0],
  [10, 10, 10],
]);

// 使用参数对象方式
object.lerp.movePath({
  path: [                              // 移动路径
    [0, 0, 0],
    [10, 10, 0],
    [10, 10, 10],
  ],
  time: 2000,               							// 移动时间(毫秒)
  spaceType: THING.SpaceType.World,    	// 坐标空间类型
  orientToPath: true,       							// 是否朝向移动方向
  orientToPathDegree: 45,                 // 朝向偏移角度
  times: 4,                             	// 循环次数
  loopType: THING.LoopType.PingPong,    	// 循环类型
  onUpdate: (ev) => {      							// 更新回调
    console.log(ev.from, ev.to, ev.fromIndex, ev.toIndex, ev.direction);
    console.log('Progress:', ev.progress);
  },
  onComplete: () => {      							// 完成回调
    console.log('Movement completed');
  }
});

moveTo(value, param, trigger) → {void}
thing/src/components/LerpComponent.js, line 917

将物体移动到指定位置
Parameters:
Name Type Description
value Array | object 目标位置坐标数组[x,y,z]或包含移动参数的对象
param object 移动参数配置对象
Properties
Name Type Description
to Array.<number> 目标位置
target Array.<number> 目标位置，与 to 参数作用相同
time number 移动时间(毫秒)
spaceType THING.SpaceType 坐标空间类型
orientToPath boolean 是否朝向移动方向
orientToPathDegree number 朝向偏移角度，在朝向路径方向的基础上偏移的角度，正值为顺时针，负值为逆时针
times number 循环次数
loopType THING.LoopType 循环类型
onUpdate function 更新回调函数
onComplete function 完成回调函数
trigger function 触发器函数
Returns:
void
Example
// 基础用法 - 移动到世界坐标系中的位置
object.lerp.moveTo([10, 0, 10]);

// 使用参数对象方式
object.lerp.moveTo({
  to: [10, 0, 10],           						// 目标位置
  time: 2000,               							// 移动时间(毫秒)
  spaceType: THING.SpaceType.World,    	// 坐标空间类型
  orientToPath: true,       							// 是否朝向移动方向
  orientToPathDegree: 45,                 // 朝向偏移角度
  times: 4,                             	// 循环次数
  loopType: THING.LoopType.PingPong,    	// 循环类型
  onUpdate: (ev) => {      							// 更新回调
    console.log(ev.from, ev.to, ev.direction);
    console.log('Progress:', ev.progress);
  },
  onComplete: () => {      							// 完成回调
    console.log('Movement completed');
  }
});

onAdd(object)
thing/src/components/BaseComponent.js, line 367

当添加组件时。
Parameters:
Name Type Description
object THING.BaseObject 对象。
Overrides:

onRemove()
thing/src/components/BaseComponent.js, line 389

当移除组件时。
Overrides:

pause(name)
thing/src/components/LerpComponent.js, line 578

暂停插值
Parameters:
Name Type Description
name string 插值的名称,
Example
let lerp = box.lerp;
lerp.pause('move');

pauseAll()
thing/src/components/LerpComponent.js, line 547

暂停全部插值
Example
let lerp = box.lerp;
lerp.pauseAll();

pauseFading()
thing/src/components/LerpComponent.js, line 1417

暂停淡入淡出动作。
Example
let lerp = box.lerp;
lerp.pauseFading();

resume(name)
thing/src/components/LerpComponent.js, line 604

恢复插值
Parameters:
Name Type Description
name string 插值的名称,
Example
let lerp = box.lerp;
lerp.resume('move');

resumeAll()
thing/src/components/LerpComponent.js, line 562

恢复全部插值
Example
let lerp = box.lerp;
lerp.resumeAll();

resumeFading()
thing/src/components/LerpComponent.js, line 1428

恢复淡入淡出动作。
Example
let lerp = box.lerp;
lerp.resumeFading();

rotateTo(value, param, trigger) → {void}
thing/src/components/LerpComponent.js, line 1335

将物体旋转到指定角度
Parameters:
Name Type Description
value Array | object 目标旋转值。可以是：- 欧拉角数组[x,y,z]表示旋转角度- 四元数数组[x,y,z,w]表示旋转- 包含旋转参数的对象
param object 旋转参数配置对象
Properties
Name Type Description
to Array.<number> 目标旋转值，可以是欧拉角[x,y,z]或四元数[x,y,z,w]
time number 旋转时间(毫秒)
spaceType THING.SpaceType 坐标空间类型，默认为 Local
times number 循环次数
loopType THING.LoopType 循环类型
onUpdate function 更新回调函数
onComplete function 完成回调函数
trigger function 触发器函数
Returns:
void
Example
// 基础用法 - 使用欧拉角旋转(x,y,z)
object.lerp.rotateTo([90, 0, 0]); // 绕x轴旋转90度

// 使用四元数旋转(x,y,z,w)
object.lerp.rotateTo([0, 0, 0, 1]);

// 使用参数对象方式 - 欧拉角
object.lerp.rotateTo({
  to: [90, 0, 0],           						// 目标旋转角度
  time: 2000,               					// 旋转时间(毫秒)
  spaceType: THING.SpaceType.World,    // 坐标空间类型
  times: 4,                             // 循环次数
  loopType: THING.LoopType.PingPong,   // 循环类型
  onUpdate: (ev) => {      						// 更新回调
    console.log(ev.from, ev.to, ev.direction);
    console.log('Progress:', ev.progress);
  },
  onComplete: () => {      						// 完成回调
    console.log('Rotation completed');
  }
});

// 在世界坐标系中旋转
object.lerp.rotateTo({
  to: [90, 0, 0],
  time: 2000,
  spaceType: THING.SpaceType.World
});

// 在本地坐标系中旋转(默认)
object.lerp.rotateTo({
  to: [90, 0, 0],
  time: 2000,
  spaceType: THING.SpaceType.Local
});

// 相对于当前旋转进行旋转
object.lerp.rotateTo({
  to: [90, 0, 0],
  time: 2000,
  spaceType: THING.SpaceType.Self
});

scaleTo(value, param, trigger) → {void}
thing/src/components/LerpComponent.js, line 1222

将物体缩放到指定大小
Parameters:
Name Type Description
value Array | object 目标缩放值数组[x,y,z]或包含缩放参数的对象
param object 缩放参数配置对象
Properties
Name Type Description
to Array.<number> 目标缩放值
time number 缩放时间(毫秒)
spaceType THING.SpaceType 坐标空间类型，默认为 World
times number 循环次数
loopType THING.LoopType 循环类型
onUpdate function 更新回调函数
onComplete function 完成回调函数
trigger function 触发器函数
Returns:
void
Example
// 基础用法 - 直接传入缩放值数组
object.lerp.scaleTo([2, 2, 2]);

// 使用参数对象方式
object.lerp.scaleTo({
  to: [2, 2, 2],           						// 目标缩放值
  time: 2000,               					// 缩放时间(毫秒)
  spaceType: THING.SpaceType.World,    // 坐标空间类型
  times: 4,                             // 循环次数
  loopType: THING.LoopType.PingPong,   // 循环类型
  onUpdate: (ev) => {      						// 更新回调
    console.log(ev.from, ev.to, ev.direction);
    console.log('Progress:', ev.progress);
  },
  onComplete: () => {      						// 完成回调
    console.log('Scale completed');
  }
});

// 在本地坐标系中缩放
object.lerp.scaleTo({
  to: [2, 2, 2],
  time: 2000,
  spaceType: THING.SpaceType.Local
});

// 相对于当前缩放值进行缩放
object.lerp.scaleTo({
  to: [2, 2, 2],
  time: 2000,
  spaceType: THING.SpaceType.Self
});

stop(name)
thing/src/components/LerpComponent.js, line 630

停止插值
Parameters:
Name Type Description
name string 插值的名称,
Example
let lerp = box.lerp;
lerp.stop('move');

stopAll()
thing/src/components/LerpComponent.js, line 528

停止全部插值
Example
let lerp = box.lerp;
lerp.stopAll();

stopFading()
thing/src/components/LerpComponent.js, line 1406

停止淡入淡出动作。
Example
let lerp = box.lerp;
lerp.stopFading();

to(param, name, trigger)
thing/src/components/LerpComponent.js, line 666

开始插值
Parameters:
Name Type Description
param LerpArgs 插值参数
name string 插值的名称,停止插值时需要传入该参数
trigger function 触发器函数
Example
box.lerp.to({
  from: {
    position: [0, 0, 0]
  },
  to: {
    position: [10, 10, 10]
  },
  time: 5000,
  loopType: THING.LoopType.PingPong,
  onUpdate: (e) => {
    console.log(e.from, e.to, e.direction);
  }
})