本文整理匯總了TypeScript中framesync.onFrameUpdate函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript onFrameUpdate函數的具體用法？TypeScript onFrameUpdate怎麽用？TypeScript onFrameUpdate使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了onFrameUpdate函數的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1:
complete: () => {
if (!hasCompleted) {
hasCompleted = true;
numCompletedActions++;
if (numCompletedActions === numActions) onFrameUpdate(complete);
}
},示例2: onFrame
tweenTimer = onFrame().start(() => {
elapsed += timeSinceLastFrame() * playDirection;
updateTween();
if (isTweenComplete() && complete) {
tweenTimer.stop();
onFrameUpdate(complete, true);
}
});示例3: action
const multitouch = ({ preventDefault = true, scale = 1.0, rotate = 0.0 }: PointerProps = {}): Action => action(({ update }) => {
const output = {
touches: points,
scale,
rotate
};
let initialDistance = 0.0;
let initialRotation = 0.0;
const isGesture = points.length > 1;
if (isGesture) {
const [ firstTouch, secondTouch ] = points;
initialDistance = distance(firstTouch, secondTouch);
initialRotation = angle(firstTouch, secondTouch);
}
const updatePoint = () => {
if (isGesture) {
const [ firstTouch, secondTouch ] = points;
const newDistance = distance(firstTouch, secondTouch);
const newRotation = angle(firstTouch, secondTouch);
output.scale = scale * (newDistance / initialDistance);
output.rotate = rotate + (newRotation - initialRotation);
}
update(output);
};
const onMove = (e: TouchEvent) => {
if (preventDefault || e.touches.length > 1) e.preventDefault();
onFrameUpdate(updatePoint);
};
const updateOnMove = listen(document, 'touchmove', { passive: !preventDefault })
.start(onMove);
if (isTouchDevice) onFrameUpdate(updatePoint);
return {
stop: () => {
cancelOnFrameUpdate(updatePoint);
updateOnMove.stop();
}
};
});示例4: action
const frame = (): Action => action(({ update }) => {
let isActive = true;
const startTime = currentTime();
const nextFrame = () => {
if (!isActive) return;
update(Math.max(currentFrameTime() - startTime, 0));
onFrameUpdate(nextFrame);
};
onFrameUpdate(nextFrame);
return {
stop: () => isActive = false
};
});示例5: action
const mouse = ({ preventDefault = true }: PointerProps = {}): Action => action(({ update }) => {
const updatePoint = () => update(point);
const onMove = (e: MouseEvent) => {
if (preventDefault) e.preventDefault();
onFrameUpdate(updatePoint);
};
const updateOnMove = listen(document, 'mousemove').start(onMove);
if (isMouseDevice) onFrameUpdate(updatePoint);
return {
stop: () => {
cancelOnFrameUpdate(updatePoint);
updateOnMove.stop();
}
};
});示例6: action
const tween = (props: TweenProps = {}): Action => action(({ update, complete }: IObserver): TweenInterface => {
const {
duration = 300,
ease = easeOut,
flip = 0,
loop = 0,
yoyo = 0
} = props;
let {
from = 0,
to = 1,
elapsed = 0,
playDirection = 1,
flipCount = 0,
yoyoCount = 0,
loopCount = 0
} = props;
let playhead = scrubber({ from, to, ease }).start(update);
let progress = 0;
let tweenTimer: ColdSubscription;
let isActive = false;
const reverseTween = () => playDirection *= -1;
const isTweenComplete = (): boolean => {
const isComplete = (playDirection === 1)
? isActive && elapsed >= duration
: isActive && elapsed <= 0;
if (!isComplete) return false;
if (isComplete && !loop && !flip && !yoyo) return true;
let isStepTaken = false;
if (loop && loopCount < loop) {
elapsed = 0;
loopCount++;
isStepTaken = true;
} else if (flip && flipCount < flip) {
elapsed = duration - elapsed;
[from, to] = [to, from];
playhead = scrubber({ from, to, ease }).start(update);
flipCount++;
isStepTaken = true;
} else if (yoyo && yoyoCount < yoyo) {
reverseTween();
yoyoCount++;
isStepTaken = true;
}
return !isStepTaken;
};
const updateTween = () => {
progress = clampProgress(getProgressFromValue(0, duration, elapsed));
playhead.seek(progress);
};
const startTimer = () => {
isActive = true;
tweenTimer = onFrame().start(() => {
elapsed += timeSinceLastFrame() * playDirection;
updateTween();
if (isTweenComplete() && complete) {
tweenTimer.stop();
onFrameUpdate(complete, true);
}
});
};
const stopTimer = () => {
isActive = false;
if (tweenTimer) tweenTimer.stop();
};
startTimer();
return {
isActive: () => isActive,
getElapsed: () => clamp(0, duration)(elapsed),
getProgress: () => progress,
stop() {
stopTimer();
},
pause() {
stopTimer();
return this;
},
resume() {
startTimer();
return this;
},
seek(newProgress: number) {
elapsed = getValueFromProgress(0, duration, newProgress);
onFrameUpdate(updateTween, true);
return this;
//.........這裏部分代碼省略.........
示例7: setProp
update: (v: any) => {
setProp(output, name, v);
onFrameUpdate(updateOutput, true);
}示例8:
complete: () => {
numCompletedActions++;
if (numCompletedActions === numActions) onFrameUpdate(complete);
},示例9: onFrameUpdate
const onMove = (e: MouseEvent) => {
if (preventDefault) e.preventDefault();
onFrameUpdate(updatePoint);
};示例10: onFrameUpdate
const onMove = (e: TouchEvent) => {
if (preventDefault || e.touches.length > 1) e.preventDefault();
onFrameUpdate(updatePoint);
};