HarmanyOS-ArkUI-组件转场动画

最新推荐文章于 2025-12-04 15:25:15 发布

原创最新推荐文章于 2025-12-04 15:25:15 发布 · 441 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#数据库

本文介绍了如何在React组件中使用transition属性与AnimateTo配合创建插入和删除时的转场动画，提升用户体验，通过示例展示了如何配置动画效果和状态控制。

组件转场动画

组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。

.transition参数

400

组件转场动画要结合animateTo(显式动画)来使用，可以通过定义boolean类型的变量，在成立时通过animateTo来改变变量变会false，在不成立时使用.transition

代码示例

@State isBegin: boolean = false

if(!this.isBegin){
          //开始按钮
          Button('开始游戏')
            .onClick(()=>{
              animateTo(
                {duration:1000},
                ()=>{
                  this.isBegin=true
                }
              )
            })
        }else{
          //小鱼图片
          Image(this.src)
            .position({x:this.fishX - 20,y:this.fishY - 20})
            .rotate({angle:this.angle,centerX:'50%',centerY:'50%'})
            .width(40)
            .height(40)
          .transition({
            type:TransitionType.Insert,
            opacity:0,
            translate:{x:-300}
          })
        }