媲美原生体验，Skyline 轻松实现！
微信团队约 3 分钟丝滑流畅的小程序交互效果能够提升用户使用满意度，进而提升留存与转化。然而实现这样贴近原生的交互效果并非易事。开发者需要投入大量的时间和经验进行兼容适配，无形中增加了开发难度。
餐饮小程序 NONZERO COFFEE 应用 Skyline 渲染引擎，轻松实现贴近原生的交互效果，让用户体验到更丝滑流畅的点餐过程。一起来看看怎样实现吧！
worklet 动画：元素切换更丝滑
当页面滚动时，我们希望小程序能够根据页面不同的滚动状态或位置，灵活切换某些元素。以往使用 wx:if 进行开发，动画效果显示非常生硬。现在应用 worklet 动画 即可实现流畅效果。
例如当用户上滑超过点单、外卖、商城等主要菜单栏时，主要菜单栏自动吸顶。即使用户到达下方仍能够快速点击主要菜单栏，无需返回到最上方，优化用户使用体验。
👉 点击查看代码
onLoad(options) {// 背景图片的高度和缩放this.bgimgTop = shared(0)this.bgimgSca = shared(1)// 顶部点单栏透明度this.topfunOp = shared(0)},onReady() {// 背景图片动画监听this.applyAnimatedStyle('.bgimg', () => {'worklet'return {top: `${this.bgimgTop.value}px`,transform:`scale(${this.bgimgSca.value},${this.bgimgSca.value})`}})// 顶部点单栏动画监听this.applyAnimatedStyle('.fixtopview', () => {'worklet'return {opacity: `${this.topfunOp.value}`}})},scrolling(e){"worklet"let scrollTop = e.detail.scrollTopif(scrollTop <= 0){//向下滚动this.bgimgTop.value = 0this.bgimgSca.value = 1 + (-scrollTop / 800)this.topfunOp.value = 0}else{//向上滑动this.bgimgTop.value = - scrollTopthis.bgimgSca.value = 1let opTemp = (scrollTop / 200)this.topfunOp.value = opTemp >= 1 ? 1 : opTemp}},
手势系统：元素切换更同步
为了提供更好的交互体验，开发者可以结合 手势系统 精细化地监听 scroll-view 组件，实现手势与元素切换的同步效果。
例如在滑动点餐页面过程中，小程序根据用户手势的上滑位置判定搜索框吸顶、门店信息吸顶等操作，让用户轻轻一拉一滑即可轻松切换不同模块。
👉 点击查看代码
<!-- wxml--><!-- 背景图--><image src="{{pageBg}}" class=" bgimg" ></image><!-- 菜单栏--><view class=" fixtopview ">这里是置顶的点单菜单栏</view><!-- 首先使用scroll-view的worklet:onscrollupdate事件监听页面滚动--><scroll-view worklet:onscrollupdate="scrolling" type="list" scroll-y="{{true}}" show-scrollbar="{{false}}"><view slot="refresher">这里是页面内容和</view></scroll-view>
自定义路由：页面交互更优雅
小程序页面切换通常是左右切换的单一方式，体验流程有明显的阻滞感。现在使用 自定义路由 即可实现页面的多元交互，例如页面下沉、半屏、底部弹起等方式，优雅丝滑地实现页面切换。
例如在用户选择单品时，小程序以半屏形式从底部弹出，页面切换更流畅；完成点单后，用户只需轻轻一拉即可关闭半屏，整个流程更优雅、更贴近原生。
👉 点击查看代码
const ShopSearchRouteBuilder = (customRouteContext) => {console.info('skyline: half page route build')/*** 1. 手势拖动时采用原始值* 2. 页面进入时采用 curve 曲线生成的值* 3. 页面返回时采用 reverseCurve 生成的值*/const handlePrimaryAnimation = () => {'worklet'return {}}return {opaque: false,handlePrimaryAnimation,transitionDuration: 10,reverseTransitionDuration: 10,barrierDismissible:true,canTransitionTo: false,canTransitionFrom: false,}}
NONZERO COFFEE 小程序灵活应用 Skyline 渲染引擎 的各项新能力，实现贴近原生的交互体验，提升用户满意度，促进用户留存与转化。
如有 Skyline 渲染引擎相关问题，可在 Skyline 社区专区 发帖互动，技术专员将为大家解答及进行深度交流。
原创｜武汉杰跃信息技术有限公司负责人 & NONZERO COFFEE 小程序 开发者 胡杰