HarmonyOS鸿蒙Next实现元素进场和离场动画示例代码

HarmonyOS鸿蒙Next实现元素进场和离场动画示例代码

介绍

本示例基于平移动画（slide）和非对称过渡动画（asymmetric）实现元素进场和离场的动画效果。

实现元素进场和离场动画源码链接

效果预览

图片名称

实现思路

  1. 平移动画（slide）实现左进右出效果。
Image($r('app.media.background'))
    .width(100)
    .height(100)
    .transition(TransitionEffect.SLIDE.animation({ duration: 500 }))// 和TransitionEffect.SLIDE一致
    .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.START),
        TransitionEffect.move(TransitionEdge.END))
        .animation({ duration: 500 }))
  1. 非对称过渡动画（asymmetric）实现右进左出效果。
Image($r('app.media.background'))
    .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.END),
        TransitionEffect.move(TransitionEdge.END))
        .animation({ duration: 500 }))

更多关于HarmonyOS鸿蒙Next实现元素进场和离场动画示例代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中实现元素进场/离场动画，使用ArkUI的动画API：

  1. 进场动画示例：
Button("进场按钮")
  .opacity(0)
  .onAppear(() => {
    animateTo({ duration: 500 }, () => {
      this.opacity = 1
    })
  })
  1. 离场动画示例：
@State isVisible: boolean = true

if (this.isVisible) {
  Button("离场按钮")
    .onClick(() => {
      animateTo({ duration: 500 }, () => {
        this.opacity = 0
      })
      this.isVisible = false
    })
}

关键点：使用animateTo控制动画过程，配合状态变量管理元素显隐。支持平移、旋转、缩放等属性动画。

更多关于HarmonyOS鸿蒙Next实现元素进场和离场动画示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中实现元素进场和离场动画，可以使用TransitionEffect提供的平移动画(SLIDE)和非对称过渡(asymmetric)两种方式。示例代码展示了两种典型场景：

  1. 平移动画实现左进右出效果：

    • 使用TransitionEffect.SLIDE创建默认的平移效果
    • 通过animation方法设置动画持续时间为500ms

  2. 非对称过渡实现右进左出效果：

    • 使用TransitionEffect.asymmetric分别定义进场(END)和离场(START)方向
    • 同样设置500ms的动画持续时间

关键点：

  • TransitionEdge.START/END控制动画方向
  • animation方法配置动画参数
  • 两种方式可以灵活组合使用

这些API可以轻松实现常见的页面过渡效果，开发者可以根据实际需求调整动画方向和时长参数。

回到顶部