提交 e2e51cd1 编写于 作者: L luoying_ace_admin

add docs

Signed-off-by: Nluoying_ace_admin <luoying19@huawei.com>
上级 9ab8ef44
......@@ -165,6 +165,7 @@
- [页面间转场](ts-page-transition-animation.md)
- [组件内转场](ts-transition-animation-component.md)
- [共享元素转场](ts-transition-animation-shared-elements.md)
- [组件内隐式共享元素转场](ts-transition-animation-geometrytransition.md)
- [路径动画](ts-motion-path-animation.md)
- 全局UI方法
- 弹窗
......
# 组件内隐式共享元素转场
geometryTransition用于组件内隐式共享元素转场,在视图切换过程中提供丝滑的上下文传承过渡。通用transition机制提供了opacity、scale等转场效果,geometryTransition通过安排绑定的in/out组件(in指新视图、out指旧视图)的frame、position使得原本独立的transition动画在空间位置上发生联系,将视觉焦点由旧视图位置引导到新视图位置。
geometryTransition用于组件内隐式共享元素转场,在组件显示切换过程中提供平滑过渡效果。通用transition机制提供了opacity、scale等转场动效,geometryTransition通过id绑定in/out组件(in指入场组件、out指出场组件),使得组件原本独立的transition动画在空间位置上发生联系,从而将视觉焦点由出场组件位置引导到入场组件位置。
> **说明:**
>
> 从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 参数描述 |
| ------------------ | -------- | ------------------------------------------------------------ |
| geometryTransition | string | geometryTransition id,用于设置绑定关系,id置""清除绑定关系避免参与共享行为,id可更换重新建立绑定关系。同一个id只能有两个组件绑定且是in/out不同类型角色,不能多个组件绑定同一个id。 |
| geometryTransition | string | 设置geometryTransition的id,用于设置绑定关系,id置为空字符串""可清除绑定关系避免参与共享行为,id动态修改可重新建立绑定关系。同一个id只能有两个组件绑定且分别是in/out组件。 |
**说明:**
当使用geometryTransition必须配合animateTo使用才有动画效果,动效时长、曲线跟随animateTo中的配置,不支持.animation
geometryTransition必须配合animateTo使用才有动画效果,动效时长、曲线跟随animateTo中的配置,不支持.animation隐式动画
## 示例
......@@ -23,13 +24,16 @@ geometryTransition用于组件内隐式共享元素转场,在视图切换过
@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})
.width(300)
.height(400)
.offset({ y: 100 })
.geometryTransition("picture")
.transition(TransitionEffect.OPACITY)
} else {
......@@ -41,10 +45,12 @@ struct Index {
.width('100%').height('100%')
}.width('100%').height('100%')
}
.width(80).height(80)
.width(80)
.height(80)
// geometryTransition会同步圆角,但仅限于geometryTransition绑定处,此处绑定的是容器
// 则对容器本身有圆角同步而不会操作容器内部子组件的borderRadius
.borderRadius(20).clip(true)
.borderRadius(20)
.clip(true)
.geometryTransition("picture")
// transition保证组件离场不被立即析构,可设置其他转场效果
.transition(TransitionEffect.OPACITY)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册