HarmonyOS--组件转场动画

ArkUI在HarmonyOS中提供了组件转场动画功能，用于在页面间切换或容器内组件插入/删除时提供流畅且有吸引力的过渡效果。组件转场动画主要分为以下几种类型：

页面间转场动画 ：

页面之间的转场可以通过设置系统提供的或者自定义的转场动画实现。例如，可以使用内置的淡入淡出、滑动、缩放等效果，也可以编写自定义逻辑来实现更加复杂独特的转场。
共享元素转场动画 ：

共享元素转场是指两个页面之间存在一个或多个相同的组件，在页面切换时这些共享元素能以平滑连续的方式进行动画过渡。开发者通过给相关组件设置sharedTransition属性，并配置相同ID，让系统识别并执行相应的共享转场动画。
组件内转场动画 ：

组件内转场主要用于容器组件（如List、Grid）内部子组件的插入和删除场景，通过为子组件设置transition属性来配置转场参数，当子组件动态地插入到容器或从容器中移除时，会触发相应的过渡动画效果。

例如，使用ArkUI的组件转场动画可能涉及到如下代码片段：

TypeScript 复制代码

// 示例伪代码：页面间转场动画
import { PageTransition } from '@ohos/page-transition';

// 定义页面跳转时的转场动画
const pageTransition = new PageTransition({
  type: 'slide',
  duration: 300,
  direction: 'left',
});

// 跳转至新页面，并应用转场动画
navigator.push({
  uri: 'pages/detail/detail',
  options: {
    transition: pageTransition,
  },
});

// 示例伪代码：共享元素转场动画
@Component
struct MyComponent {
  build() {
    <Image src="..." sharedTransition="imageTransition" id="myImage" />
  }
}

// 在目标页面同样标记共享元素
@Component
struct DetailPage {
  build() {
    <Image src="..." sharedTransition="imageTransition" id="myImage" />
  }
}

// 示例伪代码：组件内转场动画
// 假设在一个列表项插入时的转场效果
@Component
struct ListItem extends Component {
  @Prop({type: String}) id: string;
  
  build() {
    <div transition={`fadeIn ${this.id}`}>
      <!-- 这里的内容会在插入时以淡入效果出现 -->
    </div>
  }
}

转场动画-动画-组件参考（基于ArkTS的声明式开发范式）-ArkTS API参考 | 华为开发者联盟 (huawei.com)