ArkTs转场动画，两个界面之间进行平滑过渡的效果，使用户在切换界面时能够获得更好的视觉体验。

export default class DimensionUtil { 
  /** 
   * 获取屏幕水平适配值。 
   * 
   * @return number 
   */ 
  static adaptDimension(value: number): number { 
    let deviceDisplay: display.Display = display.getDefaultDisplaySync(); 
    ; 
    let widthScale = deviceDisplay.width / 360; 
    let virtualHeight = widthScale * 780; 
    let designDim = Math.sqrt(360 * 360 + 780 * 780); 
    let virtualDim = Math.sqrt(deviceDisplay.width * deviceDisplay.width + virtualHeight * virtualHeight); 
    return virtualDim * value / designDim; // 放缩后长度 
  } 
 
  /** 
   * 获取屏幕水平适配px。 
   * 
   * @return number 
   */ 
  static getPx(value: string): number { 
    return DimensionUtil.adaptDimension(Number(value)); 
  } 
 
  /** 
   * 获得屏幕水平适配VP。 
   * @return number 
   */ 
  static getVp(value: string): number { 
    return px2vp(DimensionUtil.adaptDimension(Number(value))); 
  } 
 
  /** 
   * 获取屏幕水平适配fp。 
   * @return number 
   */ 
  static getFp(value: string): number { 
    return px2fp(DimensionUtil.adaptDimension(Number(value))); 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

import router from '@ohos.router'; 
import DimensionUtil from '../utils/DimensionUtil'; 
import BackContainer from '../view/BackContainer'; 
 
@Entry 
@Component 
struct ShareItem { 
  @Builder 
  PreviewArea() { 
    Column() { 
      Image($r('app.media.bg_transition')) 
        .width("100%") 
        .height(DimensionUtil.getVp("147")) 
        .borderRadius(DimensionUtil.getVp("24")) 
        .margin({ bottom: DimensionUtil.getVp("12") }) 
        .sharedTransition('shareId', { 
          duration: 600, 
          curve: Curve.Smooth, 
          delay: 100 
        }) 
        .onClick(() => { 
          router.pushUrl({ url: 'pages/SharePage' }) 
        }) 
      Text("点击查看共享元素转场动效") 
        .width("100%") 
        .textAlign(TextAlign.Start) 
        .fontSize(DimensionUtil.getFp("20")) 
        .fontWeight(FontWeight.Regular) 
        .fontColor("#182431") 
    } 
    .borderRadius(DimensionUtil.getVp("24")) 
    .height(DimensionUtil.getVp("222")) 
    .backgroundColor(Color.White) 
    .width("100%") 
    .padding({ 
      top: DimensionUtil.getVp("13"), 
      left: DimensionUtil.getVp("12"), 
      right: DimensionUtil.getVp("12"), 
    }) 
  } 
 
  build() { 
    Column() { 
      BackContainer({ header: "共享元素转场" }) 
        .margin({ bottom: DimensionUtil.getVp("13") }) 
      this.PreviewArea() 
    } 
    .width("100%") 
    .height("100%") 
    .backgroundColor("#F1F3F5") 
    .padding({ 
      left: DimensionUtil.getVp("12"), 
      right: DimensionUtil.getVp("12") 
    }) 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

@Entry 
@Component 
struct ComponentTransition { 
  @State isShow: boolean = false; 
  
  build() { 
    Column() { 
      BackContainer({ header: "组件内转场" }) 
       .margin({ bottom: DimensionUtil.getVp("13") }) 
        if (this.isShow) { 
          Image($r('app.media.bg_element')) 
            .TransitionEleStyles() 
            .transition({ 
              type: TransitionType.Insert, 
              scale:  { x: 0.5, y: 0.5 }, 
              opacity: 0 
            }) 
            .transition({ 
              type: TransitionType.Delete, 
              rotate: { x: 0, y: 1, z: 0, angle: 360 }, 
              opacity: 0 
            }) 
        } 
      Image($r('app.media.bg_element')).TransitionEleStyles() 
      Button("组件内转场") 
        .height(DimensionUtil.getVp("40")) 
        .width(DimensionUtil.getVp("120")) 
        .fontColor(Color.White) 
        .backgroundColor("#007DFF") 
        .onClick(() => { 
          animateTo({ duration: 600 }, () => { 
            this.isShow = !this.isShow; 
          }) 
        }) 
    } 
     .padding({ 
       left: DimensionUtil.getVp("20"), 
       right: DimensionUtil.getVp("20") 
     }) 
    .height("100%") 
    .width("100%") 
  } 
} 
  
@Extend(Image) function TransitionEleStyles () { 
  .objectFit(ImageFit.Fill) 
  .borderRadius(DimensionUtil.getVp("20")) 
  .margin({ bottom: DimensionUtil.getVp("20") }) 
  .height(DimensionUtil.getVp("120")) 
  .width("100%") 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.