🌞Moon Will Know
🪐

为 React 提供组件共享动画

背景

看到微信小程序增加了 Skyline 渲染引擎,可以更好地支持一些路由共享组件动画,这些在原生 App 已经非常成熟度,但我过去没有思考过使用前端来实现,于是我去搜索 React 中的类似实现才发现 motion 中存在 AnimateSharedLayout 动画工具容器,虽然 AnimateSharedLayout 已经被移除,但它的文档页面还是在谷歌中可以搜索到,也帮我敲开了这一扇门。

升级

过去的 motion 需要使用 AnimateSharedLayout 组件对共享元素进行包裹。而现在当motion组件进行销毁和渲染时,会自动进行相同 layoutId 组件之间的过渡效果。

组件共享元素

在类 Tab 组件切换时,常会有标志着激活态的元素的过渡。在此之前需要使用 JS 来计算来实现类似功能,但使用 motion 后只需要在每个 tab 中都添加相同的 layoutId,motion 会帮助我们自动完成过渡。

路由共享元素

由于 motion 现在会自动监听,所以在路由切换的过程中,只要有相同的 layoutId,便会自动进行过渡,因此不需要进行额外的处理。

路由过渡动画

之前在 如何为 React 提供 Animate Group 这篇文章中介绍了 AnimatePresence 容器,会为我们拦截和提供组件卸载动画。
所以使用 AnimatePresence 包裹路由后,在切换路由时也会触发路由的 exit 和 animate 效果。