# share-element
基礎(chǔ)庫 2.16.0 開始支持，低版本需做兼容處理。
微信 Windows 版：支持
微信 Mac 版：支持
微信 鴻蒙 OS 版：支持
渲染框架支持情況：Skyline （使用最新 Nightly 工具調(diào)試）、WebView
# 功能描述
共享元素。
共享元素是一種動(dòng)畫形式，類似于 flutter Hero動(dòng)畫，表現(xiàn)為元素像是在頁面間穿越一樣。該組件需與 page-container 組件結(jié)合使用。
使用時(shí)需在當(dāng)前頁放置 share-element 組件，同時(shí)在 page-container 容器中放置對應(yīng)的 share-element 組件，對應(yīng)關(guān)系通過屬性值 key 映射。當(dāng)設(shè)置 page-container 顯示時(shí)，transform 屬性為 true 的共享元素會(huì)產(chǎn)生動(dòng)畫。當(dāng)前頁面容器退出時(shí)，會(huì)產(chǎn)生返回動(dòng)畫。
- 使用
worklet函數(shù)需要開啟開發(fā)者工具 "將 JS 編譯成 ES5" 或 "編譯 worklet 函數(shù)" 選項(xiàng)。
# 通用屬性
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 | |
|---|---|---|---|---|---|---|
| key | string | 是 | 映射標(biāo)記，頁面內(nèi)唯一 | 2.29.2 | ||
| transform | boolean | false | 否 | 是否進(jìn)行動(dòng)畫 | 2.16.0 | |
| duration | number | 300 | 否 | 動(dòng)畫時(shí)長，單位毫秒 | 2.16.0 | |
| easing-function | string | ease-out | 否 | css緩動(dòng)函數(shù) | 2.16.0 |
# Skyline 特有屬性
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 | |||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| transition-on-gesture | boolean | false | 否 | 手勢返回時(shí)是否進(jìn)行動(dòng)畫 | 2.29.2 | |||||||||||||||||||||||
| shuttle-on-push | string | to | 否 | 指定 push 階段的飛躍物 | 2.30.2 | |||||||||||||||||||||||
| ||||||||||||||||||||||||||||
| shuttle-on-pop | string | to | 否 | 指定 pop 階段的飛躍物 | 2.30.2 | |||||||||||||||||||||||
| worklet:onframe | callback | 否 | 動(dòng)畫幀回調(diào) | 2.30.2 | ||||||||||||||||||||||||
| rect-tween-type | string | materialRectArc | 否 | 動(dòng)畫插值曲線 | 2.30.2 | |||||||||||||||||||||||
| ||||||||||||||||||||||||||||