本文整理匯總了TypeScript中@popmotion/popcorn.mix函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript mix函數的具體用法？TypeScript mix怎麽用？TypeScript mix使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了mix函數的4個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: scrubber
//.........這裏部分代碼省略.........
} = props;
let playhead = scrubber({ from, to, ease }).start(update);
let currentProgress = 0;
let process: Process;
let isActive = false;
const reverseTween = () => {
if (elapsed > duration) {
const remainder = elapsed - duration;
elapsed = elapsed - remainder * 2;
} else if (elapsed < 0) {
const remainder = -1 * elapsed;
elapsed = elapsed + remainder * 2;
}
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 = duration - elapsed;
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 = () => {
currentProgress = clampProgress(progress(0, duration, elapsed));
playhead.seek(currentProgress);
};
const startTimer = () => {
isActive = true;
process = sync.update(({ delta }) => {
// TODO Maybe try something different to eat the variations in framerate
elapsed += delta * playDirection;
updateTween();
if (isTweenComplete() && complete) {
cancelSync.update(process);
sync.update(complete, false, true);
}
}, true);
};
const stopTimer = () => {
isActive = false;
if (process) cancelSync.update(process);
};
startTimer();
return {
isActive: () => isActive,
getElapsed: () => clamp(0, duration, elapsed),
getProgress: () => currentProgress,
stop() {
stopTimer();
},
pause() {
stopTimer();
return this;
},
resume() {
if (!isActive) startTimer();
return this;
},
seek(newProgress: number) {
elapsed = mix(0, duration, newProgress);
sync.update(updateTween, false, true);
return this;
},
reverse() {
reverseTween();
return this;
}
};
}示例2: progress
export const steps = (st: number, min = 0, max = 1) => (v: number) => {
const current = progress(min, max, v);
return mix(min, max, stepProgress(st, current));
};示例3:
update: ([va, vb]: [number, number]) => {
observer.update(mix(va, vb, balance));
}