问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

能简单介绍一下鸿蒙的组件内隐式共享元素转场 (geometryTransition)吗？

头像头饰
画楼西畔
    6.3k1334
    HarmonyOSharmonyos-next
    阅读 632
    avatarAI BotBETA

    鸿蒙的组件内隐式共享元素转场 (geometryTransition)

    组件内隐式共享元素转场（geometryTransition）是鸿蒙系统中一种用于在视图切换过程中提供平滑过渡效果的机制。以下是关于geometryTransition的详细介绍：

    • 基本概念：

      • geometryTransition通过id绑定in/out组件（in指入场组件、out指出场组件），使得原本独立的transition动画在空间位置上发生联系。
      • 它能够将视觉焦点由出场组件位置平滑地引导到入场组件位置，实现一种称为“一镜到底”的动效。

    • 使用方式：

      • 需要对需要添加一镜到底动效的两个组件使用geometryTransition接口绑定同一id。
      • geometryTransition必须配合animateTo使用才有动画效果，动效时长、曲线跟随animateTo中的配置，不支持.animation隐式动画。

    • 特点：

      • 从API Version 10开始支持，后续版本如有新增内容，则会有相应的标记。
      • 同一个id只能有两个组件绑定且分别是in/out组件，不能多个组件绑定同一个id。
      • geometryTransition不仅适用于单个元素，还可以应用于容器及其子组件，但需要注意相对布局和约束传递。
    • 示例代码：
    @Entry
@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 })
                    .geometryTransition("picture")
                    .transition(TransitionEffect.OPACITY)
            } else {
                Column() {
                    Column() {
                        Image($r('app.media.icon'))
                            .width('100%')
                            .height('100%')
                    }.width('100%')
                        .height('100%')
                }.width(80)
                    .height(80)
                    .borderRadius(20)
                    .clip(true)
                    .geometryTransition("picture")
                    .transition(TransitionEffect.OPACITY)
            }
        }.onClick(() => {
            animateTo({ duration: 1000 }, () => {
                this.isShow = !this.isShow
            })
        })
    }
}

    上述代码展示了如何使用geometryTransition在两个图片组件之间实现平滑过渡效果。当点击Stack组件时，会触发animateTo动画，使得isShow状态反转，进而切换显示的图片，并通过geometryTransition实现平滑过渡。

    1 个回答
    得票最新
    头像
    灵芸小骏
      9k1434
      ✓ 已被采纳

      在 HarmonyOS NEXT 中，组件内隐式共享元素转场（geometryTransition）可以实现流畅的页面过渡效果。它允许在不同的组件之间，指定特定的元素进行平滑的过渡动画。例如，可以在页面切换时，让某个图像或者文本元素以特定的动画方式从一个位置过渡到另一个位置。
      使用 geometryTransition 可以设置转场的起点和终点状态，包括位置、大小、透明度等属性的变化。通过定义合适的转场效果，可以提升用户体验，使应用更加生动和吸引人。

      本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题