当前位置: 首页>>代码示例>>TypeScript>>正文


TypeScript popcorn.mix函数代码示例

本文整理汇总了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;
        }
      };
    }
开发者ID:Popmotion,项目名称:popmotion,代码行数:101,代码来源:index.ts

示例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));
};
开发者ID:Popmotion,项目名称:popmotion,代码行数:4,代码来源:transformers.ts

示例3:

 update: ([va, vb]: [number, number]) => {
   observer.update(mix(va, vb, balance));
 }
开发者ID:Popmotion,项目名称:popmotion,代码行数:3,代码来源:crossfade.ts

示例4: mix

 (v: number) => mix(from, to, v)
开发者ID:Popmotion,项目名称:popmotion,代码行数:1,代码来源:scrubber.ts


注:本文中的@popmotion/popcorn.mix函数示例由纯净天空整理自Github/MSDocs等开源代码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。