未验证 提交 26995928 编写于 作者: O openharmony_ci 提交者: Gitee

!20695 geometrytransition doc

Merge pull request !20695 from 饭后波波路/master
# 组件内隐式共享元素转场
geometryTransition用于组件内隐式共享元素转场,在视图切换过程中提供丝滑的上下文传承过渡。通用transition机制提供了opacity、scale等转场效果,geometryTransition通过安排绑定的in/out组件(in指新视图、out指旧视图)的frame、position使得原本独立的transition动画在空间位置上发生联系,将视觉焦点由旧视图位置引导到新视图位置。
> **说明:**
>
> 从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 参数描述 |
| ------------------ | -------- | ------------------------------------------------------------ |
| geometryTransition | string | geometryTransition id,用于设置绑定关系,id置""清除绑定关系避免参与共享行为,id可更换重新建立绑定关系。同一个id只能有两个组件绑定且是in/out不同类型角色,不能多个组件绑定同一个id。 |
**说明:**
当使用geometryTransition必须配合animateTo使用才有动画效果,动效时长、曲线跟随animateTo中的配置,不支持.animation。
## 示例
```ts
// xxx.ets
@Entry
@Component
struct Index {
@State isShow: boolean = false
build() {
Stack({ alignContent: Alignment.Center }) {
if (this.isShow) {
Image($r('app.media.pic'))
.autoResize(false)
.clip(true)
.width(300).height(400).offset({y: 100})
.geometryTransition("picture")
.transition(TransitionEffect.OPACITY)
} else {
// geometryTransition此处绑定的是容器,那么容器内的子组件需设为相对布局跟随父容器变化,
// 套多层容器为了说明相对布局约束传递
Column() {
Column() {
Image($r('app.media.icon'))
.width('100%').height('100%')
}.width('100%').height('100%')
}
.width(80).height(80)
// geometryTransition会同步圆角,但仅限于geometryTransition绑定处,此处绑定的是容器
// 则对容器本身有圆角同步而不会操作容器内部子组件的borderRadius
.borderRadius(20).clip(true)
.geometryTransition("picture")
// transition保证组件离场不被立即析构,可设置其他转场效果
.transition(TransitionEffect.OPACITY)
}
}
.onClick(() => {
animateTo({ duration: 1000 }, () => {
this.isShow = !this.isShow
})
})
}
}
```
![geometrytransition](figures/geometrytransition.gif)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册