容器组件 转场百变
微信团队约 3 分钟以往我们介绍过通过自定义路由、共享元素等能力实现优雅的 卡片转场效果。同时随着交互设计的更多元化，我们发现扩展、缩放等流畅转场效果不仅应用在卡片元素，也能够应用在更多元素，例如 banner 图、侧边小组件等等。那么面对多个组件能力结合，开发者应该如何操作呢？
现在 Skyline 渲染引擎 全新推出 open-container 组件，支持开发者开箱即用地实现多个 UI 元素灵活过渡，提供更流畅自然的转换效果，也更好地满足多种场景下的交互需求。
结合 open-container 组件，开发者能够轻松实现容器变换，让一个 UI 元素在动画中变换大小、形状、位置等，变成另一个 UI 元素，让用户体验到更流畅的交互过程，应用场景更丰富。例如上述示例：
① banner 扩展过渡：非常适合 banner 图详情页设计，避免以往左右切换的流程割裂
② 卡片扩展过渡：面对列表内容多的情况，用户每次点击都进行左右切换，会增加用户体验不满。使用卡片扩展更有连贯性，适用于评论区、播客等场景设计
③ 缩放过渡：常用功能的打开关闭缩放操作更丝滑，同时让用户留意到固定入口，例如电商的购物车、社区的发帖、客服等功能都完美适用
对比以往编写大量代码的开发过程，直接应用 open-container 组件优势明显。
开箱即用：调用 1 个组件即可自动为原页面的子节点和目标页面提供平滑的过渡效果，无需编写复杂代码
高度定制：支持自定义配置过渡效果的各个参数，如初始和打开状态下的背景色、过渡动画时长等，满足更多元的设计需求
那么开发者应该如何引入组件呢？以卡片扩展过渡为例，按照以下 2 个方法即可快速上手：
在 wxml 文件中，创建 open-container 组件并设置自定义属性；然后在 open-container 组件内部放置名为 "card" 的自定义组件，用于展示内容；当用户点击这个组件时，将触发 goDetail 函数
在 js 文件中，定义 goDetail 函数，让它使用 wx.navigateTo 进行页面跳转
👉 点击查看代码
<!-- page.html --><open-containerclosed-elevation="{{closedElevation}}"closed-border-radius="{{closedBorderRadius}}"open-elevation="{{openElevation}}"open-border-radius="{{openBorderRadius}}"transition-type="{{type}}"transition-duration="{{duration}}"bind:tap="goDetail"><card/></open-container>// page.jsPage({goDetail() {wx.navigateTo({url: 'nextPageUrl'})}})
值得注意的是，open-container 组件支持自动降级。应用 open-container 组件后，基础库 3.4.0 及以上的版本能实现目标效果；基础库 3.4.0 以下版本显示默认的左右切换模式，无需开发者手动兼容。
通过 open-container 组件，开发者能够高效、简单地实现更多元的转场过渡效果，提升用户体验，助力小程序业务发展。
Skyline 渲染引擎致力于为各位开发者提供更高效的开发流程，满足更多元的交互需求。现已推出 全新交互动画体系，如有更多动画交互需求，欢迎在下方评论区分享，我们将优先开发并上线！
最后欢迎各位开发者订阅 Skyline 小程序渲染引擎合集，更多更新动态、实践干货一触即达！