# share-element
基础库 2.16.0 开始支持,低版本需做兼容处理。
微信 Windows 版:支持
微信 Mac 版:支持
微信 鸿蒙 OS 版:支持
渲染框架支持情况:Skyline (使用最新 Nightly 工具调试)、WebView
# 功能描述
共享元素。
共享元素是一种动画形式,类似于 flutter Hero动画,表现为元素像是在页面间穿越一样。该组件需与 page-container 组件结合使用。
使用时需在当前页放置 share-element 组件,同时在 page-container 容器中放置对应的 share-element 组件,对应关系通过属性值 key 映射。当设置 page-container 显示时,transform 属性为 true 的共享元素会产生动画。当前页面容器退出时,会产生返回动画。
- 使用
worklet函数需要开启开发者工具 "将 JS 编译成 ES5" 或 "编译 worklet 函数" 选项。
# 通用属性
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | |
|---|---|---|---|---|---|---|
| key | string | 是 | 映射标记,页面内唯一 | 2.29.2 | ||
| transform | boolean | false | 否 | 是否进行动画 | 2.16.0 | |
| duration | number | 300 | 否 | 动画时长,单位毫秒 | 2.16.0 | |
| easing-function | string | ease-out | 否 | css缓动函数 | 2.16.0 |
# Skyline 特有属性
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | |||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| transition-on-gesture | boolean | false | 否 | 手势返回时是否进行动画 | 2.29.2 | |||||||||||||||||||||||
| shuttle-on-push | string | to | 否 | 指定 push 阶段的飞跃物 | 2.30.2 | |||||||||||||||||||||||
| ||||||||||||||||||||||||||||
| shuttle-on-pop | string | to | 否 | 指定 pop 阶段的飞跃物 | 2.30.2 | |||||||||||||||||||||||
| worklet:onframe | callback | 否 | 动画帧回调 | 2.30.2 | ||||||||||||||||||||||||
| rect-tween-type | string | materialRectArc | 否 | 动画插值曲线 | 2.30.2 | |||||||||||||||||||||||
| ||||||||||||||||||||||||||||