Skip to main content

TweenTransformPath

Tween subclass for path-based animation along waypoints.

TypeNameInterface Description
Variablesdelays: number[]

Function: The array of delays for each path segment in the animation. Only available when fixedDuration=false. The array may be shorter than the number of path segments or even empty; segments beyond the array length fall back to the global tweenAnimationDelay. Values are in seconds (≥ 0 recommended).

Variablesdurations: number[]

Function: The array of durations for each path segment in the animation. Only available when fixedDuration=false. The array may be shorter than the number of path segments or even empty; segments beyond the array length fall back to the global tweenAnimationDuration. Values are in seconds (≥ 0 recommended).

VariablesfixedDuration: boolean

Function: When true, all path segments share the same duration (tweenAnimationDuration) and delay (tweenAnimationDelay). When false, per-segment durations[] and delays[] arrays are used instead.

Variablesorientation: TweenOrientation

Function: Orientation mode applied during Position animation. Fixed: the object keeps its current rotation throughout the path. Path: the object continuously faces the movement direction. Has no effect on Rotation or Scale animations.

VariablespathType: TweenPathType

Function: Path interpolation mode between waypoints. Curve: smooth Catmull-Rom spline passing through all waypoints. Straight: linear interpolation, producing straight line segments between consecutive waypoints.

VariablespointsPathNumber: number[]

Function: Waypoints for 2D Rotation path animation (used when the target object has a ScreenTransform with targetType=Rotation). Requires ≥ 2 values. The path is closed: the last value automatically loops back to the first.

VariablespointsPathVector2: Vector2f[]

Function: Waypoints for 2D Position or Scale path animation (used when the target object has a ScreenTransform). Requires ≥ 2 points. The path is closed: the last point automatically loops back to the first.

VariablespointsPathVector3: Vector3f[]

Function: Waypoints for 3D path animation (used when the target object has a 3D Transform). Requires ≥ 2 points. The path is closed: the last point automatically loops back to the first.

VariablestargetType: TweenTargetType

Functionsconstructor()

Functionspause(): void

Function: Pauses all active segment tweens and sets the internal paused state.

Functionsresume(): void

Function: Resumes all currently paused segment tweens and clears the internal paused state.

Functionsstart(): void

Function: Start tween animation from initial state. If the animation is currently paused, tweens are started and then immediately re-paused.

Functionsstop(): void

Function: Stop the tween animation and keep the current state.

Examples

constructor()

let obj = new APJS.TweenTransformPath();

Use Case

Scale bounce animation on tap — object pops up to 1.5x then settles back using Tween component with PingPongOnce

@component()
export class TweenScaleBounce extends APJS.BasicScriptComponent {
private tween!: APJS.Tween;
private touchCallback!: (event: APJS.IEvent) => void;

onStart(): void {
this.tween = this.getSceneObject().getComponent("Tween") as APJS.Tween;

this.touchCallback = (event: APJS.IEvent) => {
const touch = event.args[0] as APJS.TouchData;
if (touch.phase === APJS.TouchPhase.Began) {
this.playBounce();
}
};
APJS.EventManager.getGlobalEmitter().on(APJS.EventType.Touch, this.touchCallback, this);
}

private playBounce(): void {
if (!this.tween) return;
// Default tweenType is TransformPath — use TweenTransformPath API
const anim = this.tween.tweenAnimation as APJS.TweenTransformPath;
anim.targetType = APJS.TweenTargetType.Scale;
anim.pointsPathVector3 = [
new APJS.Vector3f(1, 1, 1),
new APJS.Vector3f(1.5, 1.5, 1.5),
];
anim.durations = [0.4];
anim.fixedDuration = true;
anim.pathType = APJS.TweenPathType.Straight;
anim.easingFunction = APJS.TweenEasingFunction.Back;
anim.easingType = APJS.TweenEasingType.Out;
anim.playMode = APJS.TweenPlayMode.PingPongOnce;
anim.start();
}

onDestroy(): void {
APJS.EventManager.getGlobalEmitter().off(APJS.EventType.Touch, this.touchCallback, this);
}
}
Copyright © 2026 TikTok. All rights reserved.
About TikTokHelp CenterCareersContactLegalTerms of ServicePrivacy PolicyCookies