上一篇官方发布的 Skyline 转场动画轻松实现 文章中，Skyline 的自定义路由预设了一些常见的路由动画效果，降低开发成本。

可惜我的线上小程序「 NONZERO COFFEE 」已经完成了大部分开发任务，再使用预设的路由动画，恐怕又是一番折腾，

但我并不觉得可惜，虽然预设效果方便，但有些效果还是必须自己动手实现，接下来我想介绍一下自定义路由的更花哨的使用，当然，我的使用也只是在官方已经实现的效果与代码上修改的。官方文档链接：Skyline｜原生级卡片转场，小程序轻松实现

在线上小程序中，我想将页面大致分为四种：

1、简单页面 （基本不会与其他页面产生交互的页面）： 自定义路由预设效果都可以随便使用，怎么用怎么好。

2、容器页面（相当于弹窗页面，在webview下可用page-container实现）： 搭配上自定义路由预设效果中的wx://bottom-sheet 半屏弹窗，非常不错。

但是还有两种页面，3、主要页面（用户主要使用的页面）；4、主要转场页面（主要页面的下级或即将跳转的页面如果开发者希望实现）。如果开发者希望实现原生级的卡片转场效果，光用预设效果是不够的，还必须使用到Skyline中的自定义路由、共享元素、worklet多个技术相互配合。

就比如我的小程序中的这个场景（效果可以参考小红书的列表跳转详情），另外，示例gif略有卡顿（主要是我的电脑卡，当然也不排除我的代码还需要优化）

在我之前的文章中也有从列表跳转商品详情页的操作，但是当时并没有使用这么复杂的动画，但是现在还是加上了，因为在实际业务中，点单的类型很多，有堂食点单，外卖点单，还有店铺自建商城点单，如果都是用同一种简单的跳转动画，用户会觉得非常单调。

所以这里将新的业务加上新的转场效果，不至于让用户视觉疲劳，实打实的增加用户的留存率。

这里首先还是推荐大家看原文 ， 官方文档链接：Skyline｜原生级卡片转场，小程序轻松实现 。

只是提一下我遇到的小问题。

1、共享元素动画不生效或者多个item同时飞跃，那么很有可能是 share-element元素的key值没有对应上或者有重复的key

2、生成这种效果是需要原页面（列表页）和新页面（详情页面）都有<share-element/>元素，那么这两个页面的<share-element/>属性设置也非常重要，

原页面的<share-element/>中需要包裹实际的内容元素（图片、内容文字等），并且不需要设置shuttle-on-push,新页面的<share-element/>中则不需要包裹实际的元素，简单放一个<view/>当作占位元素就行。

原页面：

新页面：

3、转场到新页面后，会出现闪动卡顿的情况，可能是共享元素中包裹的图片，在新页面没有，而是加载其他图片，获取发送了网络请求产生了延迟，只要在跳转的时候携带原页面中共享元素的图片url，并在新页面中展示，就基本不会出现卡顿的情况了。

以上都是些小问题，具体的代码实现，还是需要您去参考官方的文章。

最后，这个效果实现起来还是停复杂的，我照着官方代码一个一个字敲，整整敲了一天，中间出现了各种bug，万幸，当效果出现的时候，我觉得一切都是值得的，它确确实实是还原了原生APP的卡片转场效果，这是很振奋人心的事，如果同学们希望开发出媲美APP效果的小程序，skyline框架绝对是最大的利器。