# share-element

基础库 2.16.0 开始支持,低版本需做兼容处理

微信 Windows 版:支持

微信 Mac 版:支持

渲染框架支持情况:Skyline (使用最新 Nighly 工具调试)、WebView

# 功能描述

共享元素。

共享元素是一种动画形式,类似于 flutter Hero动画,表现为元素像是在页面间穿越一样。该组件需与 page-container 组件结合使用。

使用时需在当前页放置 share-element 组件,同时在 page-container 容器中放置对应的 share-element 组件,对应关系通过属性值 key 映射。当设置 page-container 显示时,transform 属性为 true 的共享元素会产生动画。当前页面容器退出时,会产生返回动画。

  1. 使用 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
合法值 说明
from push 阶段采用源页面节点作为飞跃物
to push 阶段采用目标页面节点作为飞跃物
from pop 阶段采用源页面节点作为飞跃物
to pop 阶段采用目标页面节点作为飞跃物
shuttle-on-pop string to 指定 pop 阶段的飞跃物 2.30.2
worklet:onframe callback 动画帧回调 2.30.2
rect-tween-type string materialRectArc 动画插值曲线 2.30.2
合法值 说明
materialRectArc 矩形对角动画
materialRectCenterArc 径向动画
linear
elasticIn
elasticOut
elasticInOut
bounceIn
bounceOut
bounceInOut
cubic-bezier(x1, y1, x2, y2 )

# WebView 示例代码

在开发者工具中预览效果

Skyline 示例代码 <p><a href="https://developers.weixin.qq.com/s/t584gymu7VMM" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer">在开发者工具中预览效果<span></span></a></p>