原生级卡片转场,小程序轻松实现
发布于 2 年前 作者 lufang 2176 次浏览 来自 分享

在上一篇文章《在小程序中实现原生相册》中,我们学习了自定义路由搭配共享元素实现的原生相册效果,共享元素可以让用户在体验小程序时视觉关联性更强。

除了相册实现之外,常见的卡片转场也非常适合。

⬆️ 演示效果:默认动画 vs 卡片转场动画

👇 下面我们来看看卡片转场中通过 共享元素 + 自定义路由 来实现无痕跳转。

这里的转场稍微有点复杂,涉及到以下 3 个点

  • 旧卡片:图片放大、内容渐隐
  • 新页面:按比例放大、页面渐显
  • 手势搭配

1、旧卡片:图片放大、内容渐隐

在本示例中,列表页采用的是 scroll-view 瀑布流布局的实现。

这里我们的共享元素是卡片,即 grid-view 中的内容 card,卡片包括 图片、内容描述。

默认情况下,共享元素是整个节点进行飞跃的,由于前后页面的图片元素一致但文本内容不一致, 导致在第一帧或者最后一帧会有跳动的效果。

为了让转场动画更加自然,我们需要在飞跃的过程中渐隐旧卡片的内容描述。

在这里,我们需要先用 this.applyAnimatedStyle 来给对应的节点绑定 worklet 驱动动画。

  • .card_wrap 节点:整个卡片按比例放大
  • .card_desc 节点:内容描述渐隐

关于动画执行的时机,我们可以通过配置项修改。

  • immediate:设置是否立即执行驱动动画
  • flush:shareValue 更新时,applyAnimatedStyle 的 updater 函数刷新时机

在本例中,需要保证共享元素的图片与目标页面图片位置重叠,所以 flush 设置 sync 在当前时间片刷新。

绑定完驱动动画之后,我们需要给共享元素绑定帧回调事件,根据当前动画进度改变共享变量的值来驱动共享动画

2、新页面:按比例放大、页面渐显

新页面在路由中的动画,需要在自定义路由中进行配置。关于自定义路由的更多介绍,可参考《小程序页面转场动画》

在路由动画过程中,我们将上一步的共享元素帧回调拿到 begin、end 的值,然后结合动画进度 t 计算得出新页面的位置、缩放比例。

还有根据动画进度,设置页面渐显,与前面的卡片渐隐承接。

3、手势搭配

学习过我们前面的文章的同学都知道,自定义路由经常需要结合页面手势,来实现手势返回,关于手势的基础知识可参考《小程序页面转场动画》

这里我们希望手势缩小整个当前页面,所以这里手势返回时只在当前页面做手势动画即可。

在页面详情页的最外层,嵌套一个手势组件 pan-gesture-handler,当手势拖动时根据手势的位置改变整个页面(通过 #fake-host 控制)的位置和大小来达到拖动的效果。

同样绑定页面驱动动画,通过 applyAnimatedStyle 给 #fake-host 绑定驱动动画,当共享变量 transX、transY 等变化时则自动改变 transform 来驱动 #fake-host 缩小。

接着绑定手势事件,根据手势拖动时拿到位置信息改变共享变量 transX、transY 的值。

最后我们需要设置背景颜色透明,来达到类似把卡片拖回列表的视觉效果,更好的减少页面切换感~

一个自定义路由的页面会有 3 层可以设置到背景色,要做到透明的效果需要将 3 个背景色都设置为透明。更多自定义路由背景色的详情参考官方文档。

想要试试卡片转场的无恒效果~扫描 ⬇️ 下方小程序码即可体验。

如果你也想在小程序中实现卡片转场动画,mark 下这个 源码 直接接到到你的小程序吧~

回到顶部