为什么程序员之间差距那么大？-杭州网站建设为你呈现

// 新页面：页面 B 半屏打开const handlePrimaryAnimation = () => {  'worklet'  // primaryAnimation 为 builder 函数的参数，表示当前页面从 0 - 1 展示动画的进度  // primaryAnimation 为 sharedValue 类型，当 primaryAnimation 变化时，这个函数就会被执行  let t = primaryAnimation.value
  // 非手势触发时，可以通过动画曲线 easeInToLinear 来改变动画的进度值  // worklet 支持了常见的动画缓动函数，开发者可以根据业务需求实现需要的页面切换动画效果  if (!userGestureInProgress.value) {  t = wx.worklet.Easing.bezier(0.35, 0.91, 0.33, 0.97).factory()(t)  }    const top = 0.12 // 半屏页面距离顶部的距离比例  const selfHeight = (1 - top) * screenHeight // 半屏页面高度  const marginTop = top * screenHeight // 半屏页面距离顶部的距离  const translateY = selfHeight * (1 - t) // 页面动画过程中的纵向偏移值
  // 返回 AnimatedStyle，改变页面展示  return {    marginTop: `${marginTop}px`,    borderRadius: '10px',    height: `${selfHeight}px`,    transform: `translateY(${translateY}px)`,  }}
// 旧页面：页面 A 页面下沉const handleSecondaryAnimation = () => {  'worklet'  // secondaryAnimation 为 builder 函数的参数，表示下一个页面推入时，当前页面从 1 - 0 隐藏动画的进度  // secondaryAnimation 为 sharedValue 类型，当 secondaryAnimation 变化时，这个函数就会被执行  let t = secondaryAnimation.value
  // 非手势触发时，可以通过动画曲线 fastOutSlowIn 来改变动画的进度值  if (!userGestureInProgress.value) {  t = wx.worklet.Easing.bezier(0.4, 0.0, 0.2, 1.0).factory()(t)  }
  const top = 0.1 // 页面距离顶部的距离比例  const scaleRatio = 0.08 // 缩放比例  const translateY = screenHeight * (top - 0.5 * scaleRatio) * t // 页面动画过程中的纵向偏移值  const scale = 1 - scaleRatio * t // 缩放过程中的比例  const radius = 12 * t // 页面圆角
  // 返回 AnimatedStyle，改变页面展示  return {    borderRadius: `${radius}px`,    transform: `translateY(${translateY}px) scale(${scale})`,  }}

// 注册 builder 函数wx.router.addRouteBuilder("HalfScreenDialog", HalfScreenDialogRouteBuilder)wx.router.addRouteBuilder("ScaleTransition", ScaleTransitionRouteBuilder)
// 实现页面 B 的 builder 函数：页面打开时半屏打开const HalfScreenDialogRouteBuilder = ({    primaryAnimation}) => {    return {        handlePrimaryAnimation // 页面 B 打开时的动画，上文中实现的 handlePrimaryAnimation 函数    }}
// 实现页面 A 的 builder 函数：下一个页面打开时，当前页面下沉const ScaleTransitionRouteBuilder = ({  primaryAnimation,  secondaryAnimation}) => {    return {    handlePrimaryAnimation, // 页面 A 打开时的动画        handleSecondaryAnimation // 页面 B 隐藏时的动画，上文中实现的 handleSecondaryAnimation 函数    }}
// home.js// 首页打开页面 A，wx.navigateTo({  url: 'pageA',  routeType: 'ScaleTransition',})
// page.js// 页面 A 打开页面 Bwx.navigateTo({  url: 'pageB',  routeType: 'HalfScreenDialog',})

// .wxml"handleHorizontalDrag">  <view class="gesture-back-area">view><horizontal-drag-gesture-handler/>
// .js// 根据手势状态改变页面展示状态// this.customRouteContext 中包含当前页面定义路由 builder 时的全部变量handleHorizontalDrag(gestureEvent) {  "worklet";  if (gestureEvent.state === GestureState.BEGIN) {  // 触摸开始    const { startUserGesture } = this.customRouteContext;  startUserGesture();  } else if (gestureEvent.state === GestureState.ACTIVE) {  // 触摸中，实现跟随手指拖动页面效果    const delta = gestureEvent.deltaX / windowWidth;  const { primaryAnimation } = this.customRouteContext;    const newVal = primaryAnimation.value - delta;    primaryAnimation.value = clamp(newVal, 0.0, 1.0);  } else if (gestureEvent.state === GestureState.END) {  // 触摸结束  const { stopUserGesture, didPop } = this.customRouteContext;  ...  didPop(); // 退出页面调用  stopUserGesture(); // 结束必须调用  } else if (gestureEvent.state === GestureState.CANCELLED) {    // 触摸取消  }}