Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
e2e51cd1
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
提交
e2e51cd1
编写于
7月 11, 2023
作者:
L
luoying_ace_admin
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add docs
Signed-off-by:
N
luoying_ace_admin
<
luoying19@huawei.com
>
上级
9ab8ef44
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
13 addition
and
6 deletion
+13
-6
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+1
-0
zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104386.gif
...ference/arkui-ts/figures/zh-cn_image_0000001174104386.gif
+0
-0
zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-geometrytransition.md
...ce/arkui-ts/ts-transition-animation-geometrytransition.md
+12
-6
未找到文件。
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
浏览文件 @
e2e51cd1
...
...
@@ -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方法
-
弹窗
...
...
zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104386.gif
查看替换文件 @
9ab8ef44
浏览文件 @
e2e51cd1
314.9 KB
|
W:
|
H:
316.8 KB
|
W:
|
H:
2-up
Swipe
Onion skin
zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-geometrytransition.md
浏览文件 @
e2e51cd1
# 组件内隐式共享元素转场
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录