本文原创发布在华为开发者社区，更多鸿蒙场景化示例请见华为开发者联盟官网“行业实践与常见问题”专题页。

介绍

本示例基于平移动画（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 }))

2. 非对称过渡动画（asymmetric）实现右进左出效果。

    Image($r('app.media.background'))
        .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.END),
        TransitionEffect.move(TransitionEdge.END))
        .animation({ duration: 500 }))