ArkTS-共享元素转场动画

本文介绍了在Ohos应用开发中如何使用共享元素转场动画来连接具有相同元素的页面,区分了Exchange和Static两种类型的动画效果,并提供了代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

共享元素转场动画

在不同页面间,有使用相同的元素(例如同一幅图)的场景,可以使用共享元素转场动画衔接。为了突出不同页面间相同元素的关联性,可为它们添加共享元素转场动画。如果相同元素在不同页面间的大小有明显差异,即可达到放大缩小视图的效果。

当路由进行切换时,可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。

根据sharedTransitionOptions中的type参数,共享元素转场分为Exchange类型的共享元素转场和Static类型的共享元素转场

Exchange类型的共享元素转场

  • 交换型的共享元素转场,需要两个页面中,存在通过sharedTransition函数配置为相同id的组件,它们称为共享元素。
  • 这种类型的共享元素转场适用于两个页面间相同元素的衔接,会从起始页共享元素的位置、大小过渡到目标页的共享元素的位置、大小。如果不指定type,默认为Exchange类型的共享元素转场,这也是最常见的共享元素转场的方式。
  • 使用Exchange类型的共享元素转场时,共享元素转场的动画参数由目标页options中的动画参数决定。

Static类型的共享元素转场

  • 静态型的共享元素转场通常用于页面跳转时,标题逐渐出现或隐藏的场景,只需要在一个页面中有Static的共享元素,不能在两个页面中出现相同id的Static类型的共享元素。
  • 在跳转到该页面(即目标页)时,配置Static类型sharedTransition的组件做透明度从0到该组件设定的透明度的动画,位置保持不变。在该页面(即起始页)消失时,做透明度逐渐变为0的动画,位置保持不变。
  • 共享元素转场的动画参数由该组件sharedTransition属性中的动画参数决定。

示例

  • 文字配置Static类型的共享元素转场
  • 图片配置Exchange类型的共享元素转场,共享元素id为"sharedImage"

SharedTransition1

import router from '@ohos.router'

@Entry
@Component
struct SharedTransition1 {
  @State message: string = 'Hello World'

  build() {
    Column() {
      Image($r('app.media.icon'))
        .width(50)
        .height(50)
        .opacity(.3)
        .borderRadius(50)
    }
    .width('100%')
    .height('100%')
    .padding(30)
    .alignItems(HorizontalAlign.Start)
    .sharedTransition('sharedImage', {
      duration: 1000,
      curve: Curve.Linear
    })
    .onClick(() => {
      router.pushUrl({
        url: "pages/SharedTransition2"
      })
    })
  }
}

SharedTransition2

@Entry
@Component
struct SharedTransition2 {
  @State message: string = 'Hello World'

  build() {

    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .sharedTransition('text', {
          duration: 500,
          curve: Curve.Linear,
          type: SharedTransitionEffectType.Static
        })
      Image($r('app.media.icon'))
        .width(150)
        .height(150)
        .opacity(1)
        .borderRadius(75)
        .sharedTransition('sharedImage', {
          duration: 500,
          curve: Curve.Linear
        })
    }
    .width('100%')
    .height('100%')
  }
}
<think>好的,我现在要解决用户关于ArkTS编程中类型检查规则'arkts-no-any-unknown'和'arkts-no-props-by-index'的问题。首先,我需要理解这两个规则的具体内容和它们在开发中的意义。根据用户提供的引用资料,特别是引用[2],ArkTS强调代码的一致性和类型安全,这可能与这两个规则有关。 首先看'arkts-no-any-unknown'。在TypeScript中,any和unknown是顶级类型,但使用any会绕过类型检查,而unknown需要类型断言或收窄。ArkTS可能出于严格类型检查的需要,禁止使用这些类型,以确保变量具有明确的类型,减少运行时错误。比如,用户可能试图用any来绕过类型错误,但ArkTS不允许,这样能提高代码质量。解决方法应该是推荐使用具体的类型声明,避免any和unknown,或者使用类型守卫处理unknown的情况。 然后是'arkts-no-props-by-index'。这个规则可能指的是不允许通过索引访问对象的属性,比如obj['prop']的形式。在TypeScript中,这样的访问方式可能绕过类型检查,导致潜在的错误。ArkTS可能要求使用点符号obj.prop来确保属性存在且类型正确。解决方法可能是建议用户显式定义接口,明确属性,或者使用类型断言确保安全访问。 接下来,我需要验证这些理解是否正确。查看引用[2]中提到ArkTS分离业务逻辑和表示层,减少脚本使用,这可能意味着更严格的静态类型检查。因此,禁止any/unknown和索引访问属性符合这一设计目标。例如,使用any会导致类型不明确,而索引访问可能引入动态类型的问题,这两者都会影响代码的可维护性和安全性。 然后,生成相关问题。用户可能想了解如何替代any和unknown,如何处理动态属性访问,或者这些规则带来的好处。例如,如何在没有any的情况下处理第三方库的类型,或者如何定义接口来避免索引访问。 最后,确保回答结构清晰,分点解释每个规则,给出示例和解决方法,并引用提供的资料。同时,检查是否符合格式要求,如行内数学公式是否正确,独立公式是否用$$,以及正确的中文回答。</think>### ArkTS类型检查规则解析与解决方法 #### 一、arkts-no-any-unknown规则 **定义与目的** 该规则禁止使用`any`和`unknown`类型,要求变量/参数必须显式声明具体类型。其核心目标是增强代码类型安全
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值