本文整理汇总了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));
}