# 自定义路由

// 注册 builder 函数
wx.router.addRouteBuilder("Cupertino", CupertinoRouteBuilder)

// 实现 builder 函数
const CupertinoRouteBuilder = ({
    primaryAnimation,
    secondaryAnimation, 
    primaryAnimationStatus,
    secondaryAnimationStatus, 
    userGestureInProgress
}) => {
    // 实现 worklet 动画函数 handlePrimaryAnimation 、 handleSecondaryAnimation
    const { windowWidth } = wx.getWindowInfo();
    const handlePrimaryAnimation = () => {
        "worklet";
        // primaryAnimation 是 builder 函数的入参
        const translateX = windowWidth * (1 - primaryAnimation.value)
        return {
        transform: `translateX(${translateX}px)`
        }
    }
    const handleSecondaryAnimation = ...
    return {
        handlePrimaryAnimation,
        handleSecondaryAnimation,
        opaque: true, 
        transitionDuration: 300, 
        reverseTransitionDuration: 300, 
        barrierColor: "", 
        barrierDismissible: false, 
        barrierLabel: "", 
        canTransitionTo: true, 
        canTransitionFrom: true, 
    }
}

  /*
   * CurveAnimation 利用 derivedValue 机制
   * 封装了进入和退出时的动画曲线
   */
  function CurveAnimation ({ animation, animationStatus, curve, reverseCurve }) {
    const { derived } = wx.worklet;
    return derived(() => {
      'worklet';
      const useForwardCurve = !reverseCurve || animationStatus.value !== AnimationStatus.reverse;
      const activeCurve = useForwardCurve ? curve : reverseCurve;
      const t = animation.value;
      if (!activeCurve) return t;
      if (t === 0 || t === 1) return t;
      return activeCurve(t);
    });
  }

  /**
   * worklet 支持了常见的动画缓动函数
   * 示例使用 bezier 三次贝塞尔曲线
   */
  const Curves = {};
  if (wx.worklet) {
    const { Easing } = wx.worklet;
    Object.assign(Curves, {
      fastLinearToSlowEaseIn: Easing.cubicBezier(0.18, 1.0, 0.04, 1.0),
      linearToEaseOut: Easing.cubicBezier(0.35, 0.91, 0.33, 0.97),
      easeInToLinear: Easing.cubicBezier(0.67, 0.03, 0.65, 0.09),
      fastOutSlowIn: Easing.cubicBezier(0.4, 0.0, 0.2, 1.0),
    });
  }

  const { windowWidth } = wx.getWindowInfo();
  const _curvePrimaryAnimation = CurveAnimation({
    animation: primaryAnimation, // builder 函数入参
    animationStatus: primaryAnimationStatus, // builder 函数入参
    curve: Curves.linearToEaseOut,
    reverseCurve: Curves.easeInToLinear,
  });


  /**
   * primaryAnimation 控制页面进入和退出动画
   * 1. 页面进入时采用 curve 曲线生成的值
   * 2. 页面退出时采用 reverseCurve 生成的值
   */
  const handlePrimaryAnimation = () => {
    "worklet";
    let t = primaryAnimation.value;
    if (!userGestureInProgress.value) {
      t = _curvePrimaryAnimation.value;
    }

    const translateX = windowWidth * (1 - t)
    return {
      transform: `translateX(${translateX}px)`
    };
  };

// 低版本基础库会降级到多 webview 下的路由动画
wx.navigateTo({
  url: 'pageB',
  routeType: 'Cupertino',
})

/**
 * 1. customRouteContext 中包含当前页面定义路由 builder 时的全部变量
 * 2. 可以从中获取 primaryAnimation，对其进行修改，进而驱动页面动画
 * 3. 手势返回时由开发者控制 primaryAnimation 的更新
 * 4. 接口调用页面进入和退出时，由 skyline 引擎控制 primaryAnimation 的更新
 */
Page({
  handleDragStart() {
    "worklet";
    const { startUserGesture } = this.customRouteContext;
    // 触摸开始时需要调用 startUserGesture
    // 更新 userGestureInProgress 的值
    // ⚠️⚠️ 
    startUserGesture();
  },

  handleDragUpdate(delta) {
    "worklet";
    const { primaryAnimation } = this.customRouteContext;
    const newVal = primaryAnimation.value - delta;
    // 跟随手指拖动页面效果
    primaryAnimation.value = clamp(newVal, 0.0, 1.0);
  },

  handleDragEnd(velocity) {
    "worklet";
    const { primaryAnimation, stopUserGesture, didPop } =
      this.customRouteContext;

    // 页面滑动超过一半或者手指离开时的释放速度大于指定值时
    // 判定最终要退出页面，继续滑动页面到右侧边缘
    // 否则判定取消此时退出，页面返回到左侧边缘
    let animateForward = false;
    if (Math.abs(velocity) >= _kMinFlingVelocity) {
      animateForward = velocity <= 0;
    } else {
      animateForward = primaryAnimation.value > 0.5;
    }
    const t = primaryAnimation.value;
    const animationCurve = Curves.fastLinearToSlowEaseIn;
    if (animateForward) {
      const droppedPageForwardAnimationTime = Math.min(
        Math.floor(lerp(_kMaxDroppedSwipePageForwardAnimationTime, 0, t)),
        _kMaxPageBackAnimationTime
      );

      // primaryAnimation.vaue = 1 表示未退出页面
      primaryAnimation.value = timing(
        1.0,
        {
          duration: droppedPageForwardAnimationTime,
          easing: animationCurve,
        },
        () => {
          // 最终均需调用 stopUserGesture
          // ⚠️⚠️ 
          stopUserGesture();
        }
      );
    } else {
      const droppedPageBackAnimationTime = Math.floor(
        lerp(0, _kMaxDroppedSwipePageForwardAnimationTime, t)
      );
      // primaryAnimation.vaue = 0 表示退出页面
      primaryAnimation.value = timing(
        0.0,
        {
          duration: droppedPageBackAnimationTime,
          easing: animationCurve,
        },
        () => {
          // 退出页面时需调用 didPop
          // ⚠️⚠️
          didPop();

          // 最终均需调用 stopUserGesture
          // ⚠️⚠️
          stopUserGesture();
        }
      );
    }
  },

  handleHorizontalDrag(gestureEvent) {
    "worklet";
    if (gestureEvent.state === GestureState.BEGIN) {
      this.handleDragStart();
    } else if (gestureEvent.state === GestureState.ACTIVE) {
      const delta = gestureEvent.deltaX / windowWidth;
      this.handleDragUpdate(delta);
    } else if (gestureEvent.state === GestureState.END) {
      const velocity = gestureEvent.velocityX / windowWidth;
      this.handleDragEnd(velocity);
    } else if (gestureEvent.state === GestureState.CANCELLED) {
      this.handleDragEnd(0.0);
    }
  }
})

这个包装到代码片段或者github直接供开发者使用