微信小程序Skyline模式自定义路由实现共享元素动画跳跃背景渐变高斯模糊动画效果

截图展示：

自定义路由跳转，可以增加不同的效果。为了达到像手机那样点开app后背景进入高斯模糊状态，就需要对路由做修改。效果如何，可以进入上面的小程序查看

只提供已改好的路由的JS代码，具体如何使用路由，请前往微信开发文档学习

const EasingFn = wx.worklet.Easing.cubicBezier(.64,.45,.86,1.23)
const isRegister = false
const lerp = function (begin, end, t) {
  'worklet'
  return begin + (end - begin) * t
}
//pre的作用是为了不让新页面的底层是透明色
var pre = wx.worklet.shared(0);
export function initRoute() {
    if(!isRegister){
        wx.router.addRouteBuilder('customRoute', ({ primaryAnimation }) => {
            const handlePrimaryAnimation = () => {
              'worklet'
              if(primaryAnimation.value>pre.value){
                //打开新页面
                if(primaryAnimation.value==1){
                  //打开新页面完成
                  pre.value = primaryAnimation.value
                }
              }
              if(primaryAnimation.value<pre.value){
                //退出新页面
                if(primaryAnimation.value==0){
                  //退出新页面完成
                  pre.value = primaryAnimation.value
                }
              }
              return {
                opacity: (pre.value==1&&primaryAnimation.value<pre.value)?lerp(0, 0.5, EasingFn(primaryAnimation.value)):lerp(0, 1, EasingFn(primaryAnimation.value)),
                backdropFilter:(pre.value==1)?'blur('+(lerp(0, 15, EasingFn(primaryAnimation.value)))+'px);':'blur('+(lerp(6, 8, EasingFn(primaryAnimation.value)))+'px);'
              }
            }

            return {
              barrierColor:'#ffffff42',
              opaque: false,
              handlePrimaryAnimation,
              transitionDuration: 480,
              reverseTransitionDuration: 580,
              canTransitionTo: false,
              canTransitionFrom: false,
            }
          })
    }
}