model-demo/src/utils/tween.ts

import { Easing, Tween } from "@tweenjs/tween.js";
import { cancelAnimationFrame, requestAnimationFrame } from "@tarojs/runtime";

export interface TweenHandlerOptions<T extends object> {
  /** 当前属性 */
  curProps: T;
  /** 目标属性 */
  targetProps: T;
  /** 动画更新回调 */
  onUpdate?: (e: T) => void;
  /** 动画完成回调 */
  cb?: Function;
  /** 动画时长 默认 1000 ms */
  delay?: number;
  easing?: any;
}

export function tweenHandler<T extends object>(
  options: TweenHandlerOptions<T>
) {
  let animaId: number | NodeJS.Timeout = 0;
  const { curProps, targetProps, onUpdate, cb } = options;

  const tween = new Tween(curProps)
    .to(targetProps, typeof options.delay === "number" ? options.delay : 1000)
    .onUpdate(onUpdate)
    .onComplete(() => {
      cancelAnimationFrame(animaId as number);
      cb && cb();
    })
    .easing(options.easing || Easing.Quintic.Out)
    .start();

  function animate(time?: number) {
    animaId = requestAnimationFrame(animate);
    tween.update(time);
  }

  animate();

  return tween;
}