HarmonyOS APP开发：共享元素转场与元素联动

核心要点

• 共享元素转场（Shared Element Transition）实现页面间元素的连续过渡，创造无缝的视觉体验
• 通过geometryTransition和sharedTransition配置共享元素，支持位置、大小、圆角等属性的平滑过渡
• 元素联动机制允许多个共享元素协调动画，形成层次分明的转场效果
• 正确配置元素ID和过渡属性是确保转场流畅的关键

一、背景与动机

1.1 共享元素转场的价值

在传统页面转场中，整个页面作为一个整体进行动画，页面内的元素往往突然出现或消失。共享元素转场打破了这种限制，让特定元素在页面间"穿越"，保持视觉连续性。

共享元素转场的典型场景：

• 列表到详情：列表项的图片、标题平滑过渡到详情页的对应元素
• 卡片展开：卡片内容无缝展开为全屏页面
• 图片预览：缩略图平滑放大为全屏预览
• 用户头像：小头像过渡到大头像，保持视觉一致性

1.2 共享元素转场原理

共享元素转场的核心是"元素映射"——在不同页面中标记相同的元素，系统自动计算位置和大小差异，生成平滑的过渡动画：

graph LR
    subgraph 页面A
        A1[共享元素<br/>位置A + 大小A]
    end
    
    subgraph 转场过程
        T1[计算差异]
        T2[生成动画]
        T3[执行过渡]
    end
    
    subgraph 页面B
        B1[共享元素<br/>位置B + 大小B]
    end
    
    A1 --> T1
    T1 --> T2
    T2 --> T3
    T3 --> B1
    
    classDef pageStyle fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
    classDef transStyle fill:#FFF8E1,stroke:#FFA000,stroke-width:2px
    
    class A1,B1 pageStyle
    class T1,T2,T3 transStyle

1.3 HarmonyOS共享元素API

HarmonyOS提供两套共享元素转场API：

二、核心原理

2.1 几何变换转场（GeometryTransition）

geometryTransition是最基础的共享元素转场API，通过几何属性（位置、大小）的插值实现平滑过渡：

// geometryTransition配置参数
interface GeometryTransitionOptions {
  // 共享元素唯一标识
  id: string;
  // 是否延迟执行（等待目标元素就绪）
  delay?: boolean;
  // 转场期间是否执行
  during?: (transitionProxy: GeometryTransitionProxy) => void;
}

几何属性包含：

• 位置（Position）：x、y坐标的平滑过渡
• 大小（Size）：width、height的平滑缩放
• 圆角（BorderRadius）：圆角半径的连续变化
• 变换（Transform）：旋转、缩放等矩阵变换

2.2 共享转场（SharedTransition）

sharedTransition提供更完整的页面级共享元素转场能力：

sequenceDiagram
    participant PageA
    participant Transition
    participant PageB
    
    PageA->>Transition: 注册共享元素A
    PageA->>Transition: 触发页面跳转
    Transition->>PageB: 加载目标页面
    PageB->>Transition: 注册共享元素B
    Transition->>Transition: 匹配共享元素ID
    Transition->>Transition: 计算过渡参数
    Transition->>PageA: 执行exit动画
    Transition->>PageB: 执行enter动画
    Transition->>Transition: 完成转场
    
    classDef primary fill:#4A90E2,stroke:#2E5C8A,stroke-width:2px,color:#fff
    classDef secondary fill:#7B68EE,stroke:#5A4FCF,stroke-width:2px,color:#fff
    
    class PageA,PageB primary
    class Transition secondary

2.3 元素联动机制

当页面中存在多个共享元素时，需要协调它们的动画时序，形成层次分明的视觉效果：

联动原则：

1. 主元素优先：最重要的元素（如主图）最先开始动画
2. 次要元素跟随：次要元素延迟启动，形成错落效果
3. 背景元素最后：背景色、装饰元素最后过渡

三、代码实战

3.1 基础共享元素转场

实现最简单的共享元素转场——图片从列表项过渡到详情页：

// ListPage.ets - 列表页
import { Router } from '@ohos.router';

interface Article {
  id: string;
  title: string;
  imageUrl: string;
}

@Entry
@Component
struct ListPage {
  @State articles: Article[] = [
    { id: '1', title: 'HarmonyOS开发指南', imageUrl: 'https://example.com/img1.jpg' },
    { id: '2', title: 'ArkUI组件详解', imageUrl: 'https://example.com/img2.jpg' },
    { id: '3', title: '状态管理实践', imageUrl: 'https://example.com/img3.jpg' }
  ];

  build() {
    Column() {
      Text('文章列表')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50, bottom: 20 })

      List({ space: 15 }) {
        ForEach(this.articles, (article: Article) => {
          ListItem() {
            Row() {
              // 共享元素：图片
              Image(article.imageUrl)
                .width(100)
                .height(80)
                .borderRadius(8)
                .objectFit(ImageFit.Cover)
                // 配置共享元素ID
                .geometryTransition({ id: `article-image-${article.id}` })

              Column() {
                Text(article.title)
                  .fontSize(16)
                  .fontWeight(FontWeight.Medium)

                Text('点击查看详情')
                  .fontSize(12)
                  .fontColor('#999999')
                  .margin({ top: 8 })
              }
              .layoutWeight(1)
              .margin({ left: 15 })
              .alignItems(HorizontalAlign.Start)
            }
            .width('90%')
            .height(100)
            .backgroundColor('#FFFFFF')
            .borderRadius(12)
            .padding(10)
            .shadow({ radius: 5, color: '#1A000000', offsetX: 0, offsetY: 2 })
            .onClick(() => {
              Router.pushUrl({
                url: 'pages/DetailPage',
                params: { articleId: article.id, article: article }
              });
            })
          }
        }, (article: Article) => article.id)
      }
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}

// DetailPage.ets - 详情页
import { Router } from '@ohos.router';

interface Article {
  id: string;
  title: string;
  imageUrl: string;
  content?: string;
}

@Entry
@Component
struct DetailPage {
  @State article: Article | null = null;

  aboutToAppear() {
    const params = Router.getParams() as Record<string, Object>;
    this.article = params?.article as Article;
  }

  build() {
    Column() {
      // 共享元素：大图
      Image(this.article?.imageUrl ?? '')
        .width('100%')
        .height(300)
        .objectFit(ImageFit.Cover)
        // 使用相同的共享元素ID
        .geometryTransition({ id: `article-image-${this.article?.id}` })

      Column() {
        Text(this.article?.title ?? '')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 20 })

        Text('这是文章的详细内容，展示了共享元素转场的平滑过渡效果。从列表页的缩略图到详情页的大图，实现了无缝的视觉体验。')
          .fontSize(14)
          .fontColor('#666666')
          .margin({ top: 15 })
          .lineHeight(22)
      }
      .width('90%')
      .alignItems(HorizontalAlign.Start)
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}

3.2 多元素共享转场

实现多个元素的协调转场，包括图片、标题、标签等：

// MultiSharedPage.ets
import { Router } from '@ohos.router';

interface Product {
  id: string;
  name: string;
  price: number;
  imageUrl: string;
  tags: string[];
}

@Entry
@Component
struct MultiSharedPage {
  @State products: Product[] = [
    { id: 'p1', name: '智能手表', price: 299, imageUrl: 'https://example.com/watch.jpg', tags: ['智能', '运动'] },
    { id: 'p2', name: '无线耳机', price: 199, imageUrl: 'https://example.com/earphone.jpg', tags: ['音乐', '便携'] }
  ];

  build() {
    Column() {
      Text('商品展示')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50, bottom: 20 })

      Grid() {
        ForEach(this.products, (product: Product) => {
          GridItem() {
            Column() {
              // 共享元素1：商品图片
              Image(product.imageUrl)
                .width('100%')
                .height(150)
                .borderRadius({ topLeft: 12, topRight: 12 })
                .objectFit(ImageFit.Cover)
                .geometryTransition({ id: `product-img-${product.id}` })

              Column() {
                // 共享元素2：商品名称
                Text(product.name)
                  .fontSize(16)
                  .fontWeight(FontWeight.Medium)
                  .geometryTransition({ id: `product-name-${product.id}` })

                // 共享元素3：价格
                Text(`¥${product.price}`)
                  .fontSize(18)
                  .fontColor('#FF5722')
                  .fontWeight(FontWeight.Bold)
                  .margin({ top: 5 })
                  .geometryTransition({ id: `product-price-${product.id}` })

                // 标签
                Row() {
                  ForEach(product.tags, (tag: string) => {
                    Text(tag)
                      .fontSize(12)
                      .fontColor('#4A90E2')
                      .backgroundColor('#E3F2FD')
                      .borderRadius(4)
                      .padding({ left: 8, right: 8, top: 2, bottom: 2 })
                      .margin({ right: 5 })
                  })
                }
                .margin({ top: 8 })
              }
              .padding(10)
              .alignItems(HorizontalAlign.Start)
            }
            .backgroundColor('#FFFFFF')
            .borderRadius(12)
            .shadow({ radius: 8, color: '#1A000000', offsetX: 0, offsetY: 3 })
            .onClick(() => {
              Router.pushUrl({
                url: 'pages/ProductDetailPage',
                params: { product: product }
              });
            })
          }
          .width('45%')
        }, (product: Product) => product.id)
      }
      .columnsTemplate('1fr 1fr')
      .columnsGap(15)
      .rowsGap(15)
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F8F9FA')
  }
}

// ProductDetailPage.ets
import { Router } from '@ohos.router';

@Entry
@Component
struct ProductDetailPage {
  @State product: Product | null = null;

  aboutToAppear() {
    const params = Router.getParams() as Record<string, Object>;
    this.product = params?.product as Product;
  }

  build() {
    Column() {
      // 共享元素：大图
      Image(this.product?.imageUrl ?? '')
        .width('100%')
        .height(350)
        .objectFit(ImageFit.Cover)
        .geometryTransition({ id: `product-img-${this.product?.id}` })

      Column() {
        // 共享元素：名称
        Text(this.product?.name ?? '')
          .fontSize(28)
          .fontWeight(FontWeight.Bold)
          .geometryTransition({ id: `product-name-${this.product?.id}` })

        // 共享元素：价格
        Text(`¥${this.product?.price ?? 0}`)
          .fontSize(32)
          .fontColor('#FF5722')
          .fontWeight(FontWeight.Bold)
          .margin({ top: 10 })
          .geometryTransition({ id: `product-price-${this.product?.id}` })

        // 标签
        Row() {
          ForEach(this.product?.tags ?? [], (tag: string) => {
            Text(tag)
              .fontSize(14)
              .fontColor('#4A90E2')
              .backgroundColor('#E3F2FD')
              .borderRadius(6)
              .padding({ left: 12, right: 12, top: 4, bottom: 4 })
              .margin({ right: 8 })
          })
        }
        .margin({ top: 15 })

        // 购买按钮
        Button('立即购买')
          .width('100%')
          .height(50)
          .backgroundColor('#FF5722')
          .fontColor('#FFFFFF')
          .fontSize(18)
          .borderRadius(25)
          .margin({ top: 30 })
      }
      .width('90%')
      .alignItems(HorizontalAlign.Start)
      .padding({ top: 20 })
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}

3.3 使用SharedTransition配置转场

使用sharedTransition API实现更精细的转场控制：

// SharedTransitionDemo.ets
import { Router } from '@ohos.router';

@Entry
@Component
struct SharedTransitionDemo {
  @State itemList: string[] = ['Item A', 'Item B', 'Item C'];

  // 配置页面转场
  pageTransition() {
    // 入场转场
    PageTransitionEnter({ duration: 400, curve: Curve.FastOutSlowIn })
      .opacity(0.8, 1)
      .slide(SlideEffect.Right);

    // 出场转场
    PageTransitionExit({ duration: 400, curve: Curve.FastOutSlowIn })
      .opacity(1, 0.8)
      .slide(SlideEffect.Left);
  }

  build() {
    Column() {
      Text('SharedTransition演示')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50, bottom: 30 })

      List({ space: 20 }) {
        ForEach(this.itemList, (item: string, index: number) => {
          ListItem() {
            Row() {
              // 共享元素图标
              Column() {
                Text(item.charAt(0))
                  .fontSize(24)
                  .fontColor('#FFFFFF')
              }
              .width(60)
              .height(60)
              .borderRadius(30)
              .backgroundColor('#4A90E2')
              .justifyContent(FlexAlign.Center)
              // 配置共享转场
              .sharedTransition(`item-icon-${index}`, {
                duration: 400,
                curve: Curve.FastOutSlowIn,
                delay: index * 50  // 错开动画时间
              })

              Text(item)
                .fontSize(18)
                .fontWeight(FontWeight.Medium)
                .margin({ left: 20 })
                // 文本也参与共享转场
                .sharedTransition(`item-text-${index}`, {
                  duration: 400,
                  curve: Curve.FastOutSlowIn,
                  delay: index * 50 + 100
                })
            }
            .width('85%')
            .height(80)
            .backgroundColor('#FFFFFF')
            .borderRadius(12)
            .padding({ left: 15, right: 15 })
            .shadow({ radius: 6, color: '#1A000000', offsetX: 0, offsetY: 3 })
            .onClick(() => {
              Router.pushUrl({
                url: 'pages/ItemDetailPage',
                params: { item: item, index: index }
              });
            })
          }
        }, (item: string) => item)
      }
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F0F0F0')
  }
}

3.4 圆角和边框的平滑过渡

实现圆角从有到无的平滑过渡，常用于卡片展开场景：

// BorderRadiusTransition.ets
import { Router } from '@ohos.router';

@Entry
@Component
struct BorderRadiusTransition {
  @State cards: Array<{ id: string, title: string, color: string }> = [
    { id: 'c1', title: '设计规范', color: '#4A90E2' },
    { id: 'c2', title: '开发指南', color: '#7B68EE' },
    { id: 'c3', title: '最佳实践', color: '#50C878' }
  ];

  build() {
    Column() {
      Text('卡片展开转场')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50, bottom: 25 })

      Column({ space: 20 }) {
        ForEach(this.cards, (card: { id: string, title: string, color: string }) => {
          Column() {
            Row() {
              Column() {
                Text(card.title)
                  .fontSize(18)
                  .fontColor('#FFFFFF')
                  .fontWeight(FontWeight.Medium)
              }
              .width(60)
              .height(60)
              .borderRadius(30)
              .backgroundColor(card.color)
              .justifyContent(FlexAlign.Center)
              // 共享元素：圆角从30到0的过渡
              .geometryTransition({ id: `card-icon-${card.id}` })

              Text(card.title)
                .fontSize(16)
                .margin({ left: 15 })
                .geometryTransition({ id: `card-title-${card.id}` })
            }
            .width('100%')
            .padding(15)
          }
          .width('90%')
          .height(90)
          .backgroundColor('#FFFFFF')
          .borderRadius(16)
          .shadow({ radius: 8, color: '#1A000000', offsetX: 0, offsetY: 4 })
          .onClick(() => {
            Router.pushUrl({
              url: 'pages/CardDetailPage',
              params: { card: card }
            });
          })
        }, (card: { id: string }) => card.id)
      }
      .width('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
    .justifyContent(FlexAlign.Start)
  }
}

3.5 复杂场景：Hero动画

实现类似Material Design的Hero动画，支持复杂的元素变换：

// HeroTransitionPage.ets
import { Router } from '@ohos.router';

interface HeroItem {
  id: string;
  title: string;
  subtitle: string;
  imageUrl: string;
  backgroundColor: string;
}

@Entry
@Component
struct HeroTransitionPage {
  @State heroItems: HeroItem[] = [
    {
      id: 'hero1',
      title: '探索世界',
      subtitle: '发现未知的精彩',
      imageUrl: 'https://example.com/explore.jpg',
      backgroundColor: '#1E88E5'
    },
    {
      id: 'hero2',
      title: '创意设计',
      subtitle: '释放无限想象',
      imageUrl: 'https://example.com/design.jpg',
      backgroundColor: '#7B1FA2'
    }
  ];

  build() {
    Column() {
      Text('Hero动画演示')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50, bottom: 20 })

      Column({ space: 25 }) {
        ForEach(this.heroItems, (item: HeroItem) => {
          Column() {
            // Hero图片区域
            Stack() {
              Image(item.imageUrl)
                .width('100%')
                .height(180)
                .objectFit(ImageFit.Cover)
                .borderRadius({ topLeft: 16, topRight: 16 })
                // Hero共享元素
                .geometryTransition({ id: `hero-img-${item.id}` })

              // 渐变遮罩
              Column()
                .width('100%')
                .height(60)
                .linearGradient({
                  angle: 180,
                  colors: [['#00000000', 0], ['#66000000', 1]]
                })
                .position({ x: 0, y: 120 })
            }
            .width('100%')
            .height(180)

            // 文字区域
            Column() {
              Text(item.title)
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
                .geometryTransition({ id: `hero-title-${item.id}` })

              Text(item.subtitle)
                .fontSize(14)
                .fontColor('#666666')
                .margin({ top: 5 })
                .geometryTransition({ id: `hero-subtitle-${item.id}` })
            }
            .width('100%')
            .padding(15)
            .alignItems(HorizontalAlign.Start)
            .backgroundColor('#FFFFFF')
            .borderRadius({ bottomLeft: 16, bottomRight: 16 })
          }
          .width('90%')
          .borderRadius(16)
          .shadow({ radius: 12, color: '#1A000000', offsetX: 0, offsetY: 6 })
          .onClick(() => {
            Router.pushUrl({
              url: 'pages/HeroDetailPage',
              params: { item: item }
            });
          })
        }, (item: HeroItem) => item.id)
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F8F9FA')
  }
}

四、踩坑与注意事项

4.1 共享元素ID配置问题

问题：共享元素ID不匹配导致转场失效

// ❌ 错误：ID不一致
// 列表页
Image(url).geometryTransition({ id: 'image-1' })

// 详情页
Image(url).geometryTransition({ id: 'image-2' })  // ID不同，无法匹配

// ✅ 正确：使用动态ID确保一致
// 列表页
Image(url).geometryTransition({ id: `image-${item.id}` })

// 详情页
Image(url).geometryTransition({ id: `image-${this.item.id}` })

4.2 共享元素尺寸问题

问题：共享元素尺寸差异过大导致动画异常

// 解决方案：使用中间尺寸过渡
.geometryTransition({
  id: 'shared-image',
  // 配置过渡期间的行为
  during: (proxy: GeometryTransitionProxy) => {
    // 可以在此自定义过渡效果
    proxy.setOpacity(0.9);
  }
})

4.3 性能优化

// 对于复杂场景，优化共享元素数量
// ✅ 只对关键元素使用共享转场
Column() {
  Image(url)
    .geometryTransition({ id: 'main-image' })  // 主图共享
  
  Text(title)
    // 标题不共享，使用普通淡入
    .transition(TransitionEffect.OPACITY.animation({ duration: 300 }))
}

4.4 最佳实践清单

五、总结

共享元素转场是提升应用视觉品质的高级技术。通过本文的学习，我们掌握了：

1. 基础概念：理解共享元素转场的原理和价值
2. geometryTransition应用：掌握单一元素的几何变换转场
3. sharedTransition配置：学会多元素协调转场的实现
4. 复杂场景处理：掌握Hero动画、圆角过渡等高级技巧
5. 问题排查：了解常见问题和解决方案

共享元素转场能够创造令人印象深刻的视觉体验，但需要谨慎使用，避免过度设计。在实际项目中，应根据场景选择合适的转场效果，平衡视觉冲击力和性能开销。