• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 放大缩小视图
2
3
4在不同页面间，有使用相同的元素（例如同一幅图）的场景，可以使用[共享元素转场](../reference/arkui-ts/ts-transition-animation-shared-elements.md)动画衔接。为了突出不同页面间相同元素的关联性，可为它们添加共享元素转场动画。如果相同元素在不同页面间的大小有明显差异，即可达到放大缩小视图的效果。
5
6
7共享元素转场的接口为：
8
9
10
11```ts
12sharedTransition(id: string, options?: sharedTransitionOptions)
13```
14
15
16其中根据sharedTransitionOptions中的type参数，共享元素转场分为Exchange类型的共享元素转场和Static类型的共享元素转场。
17
18
19## Exchange类型的共享元素转场
20
21交换型的共享元素转场，需要两个页面中，存在通过sharedTransition函数配置为相同id的组件，它们称为共享元素。这种类型的共享元素转场适用于两个页面间相同元素的衔接，会从起始页共享元素的位置、大小过渡到目标页的共享元素的位置、大小。如果不指定type，默认为Exchange类型的共享元素转场，这也是最常见的共享元素转场的方式。使用Exchange类型的共享元素转场时，共享元素转场的动画参数由目标页options中的动画参数决定。
22
23
24## Static类型的共享元素转场
25
26静态型的共享元素转场通常用于页面跳转时，标题逐渐出现或隐藏的场景，只需要在一个页面中有Static的共享元素，不能在两个页面中出现相同id的Static类型的共享元素。在跳转到该页面（即目标页）时，配置Static类型sharedTransition的组件做透明度从0到该组件设定的透明度的动画，位置保持不变。在该页面（即起始页）消失时，做透明度逐渐变为0的动画，位置保持不变。
27
28共享元素转场的动画参数由该组件sharedTransition属性中的动画参数决定。
29
30
31## 场景示例
32
33下面介绍使用共享元素转场进行放大缩小图片的示例。
34
35
36```ts
37// src page
38import router from '@ohos.router';
39
40@Entry
41@Component
42struct SharedTransitionSrc {
43  build() {
44    Column() {
45      // 配置Exchange类型的共享元素转场，共享元素id为"sharedImage1"
46      Image($r('app.media.mountain')).width(50).height(50)
47        .sharedTransition('sharedImage1', { duration: 1000, curve: Curve.Linear })
48        .onClick(() => {
49          // 点击小图时路由跳转至下一页面
50          router.pushUrl({ url: 'pages/myTest/sharedTransitionDst' });
51        })
52    }
53    .padding(10)
54    .width("100%")
55    .alignItems(HorizontalAlign.Start)
56  }
57}
58```
59
60
61
62
63```ts
64// dest page
65import router from '@ohos.router';
66@Entry
67@Component
68struct SharedTransitionDest {
69  build() {
70    Column() {
71      // 配置Static类型的共享元素转场
72      Text("SharedTransition dest page")
73        .fontSize(16)
74        .sharedTransition('text', { duration: 500, curve: Curve.Linear, type: SharedTransitionEffectType.Static })
75        .margin({ top: 10 })
76
77      // 配置Exchange类型的共享元素转场，共享元素id为"sharedImage1"
78      Image($r('app.media.mountain'))
79        .width(150)
80        .height(150)
81        .sharedTransition('sharedImage1', { duration: 500, curve: Curve.Linear })
82        .onClick(() => {
83          // 点击图片时路由返回至上一页面
84          router.back();
85        })
86    }
87    .width("100%")
88    .alignItems(HorizontalAlign.Center)
89  }
90}
91```
92
93
94上述示例中，第一个页面（src page)和第二个页面（dest page）都配置了id为"sharedImage1"的共享元素转场，使两个页面能匹配到这一组共享元素。从第一个页面跳转到第二个页面时，第一个页面为起始页，第二个页面为目标页。配置id为"sharedImage1"的组件按照目标页中500ms的时长进行共享元素转场，达到放大视图的效果，id为"text"的组件按照配置的Static类型sharedTransition参数中的500ms的时长进行共享元素转场，标题逐渐出现。从第二个页面返回到第一个页面时，第二个页面为起始页，第一个页面为目标页。配置id为"sharedImage1"的组件按照目标页中1000ms的时长进行共享元素转场，缩小为原始视图，id为"text"的组件按照配置的Static类型sharedTransition参数中的500ms的时长进行共享元素转场，标题逐渐隐藏。
95
96
97
98![sharedTransition](figures/sharedTransition.gif)
99