HarmonyOS 鸿蒙Next 组件内转场transition动画转出时，设置父组件宽度，希望只在父组件内，不要超出父组件

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 组件内转场transition动画转出时，设置父组件宽度，希望只在父组件内，不要超出父组件

Culomn(){
if(!this.visAnimateIcon){
Image(this.icon)
.width(22)
.height(22)
.margin({
bottom: 2
})
.transition(this.isEntryAnimation()
? TransitionEffect.asymmetric(
TransitionEffect.IDENTITY,
TransitionEffect.translate({ x: -20, y: 0 }).animation({ duration: 400 }).combine(TransitionEffect.OPACITY.animation({ duration: 400 })))
: null )
.onComplete((msg)=>{
if(msg?.loadingStatus == 0 && this.isEntryAnimation() ){
setTimeout(()=>{
this.visAnimateIcon = true
},2000)
}
})
.draggable(false)
} else {
Image(this.caricon)
.width(40)
.height(22)
.margin({
bottom: 2
})
.transition(this.isEntryAnimation()? TransitionEffect.SLIDE
.combine(TransitionEffect.translate({ x: 50, y: 0 }).animation({ duration: 500 })) : null)
}
}
Text(this.title)
.fontFamily(‘PingFang SC’)
.fontSize(11)
.fontWeight(FontWeight.Normal)
.textAlign(TextAlign.Center)
.fontColor(this.titleColor)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.width(50)<button id="copyCode" style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; width: 62px; right: 7px; font-size: 14px; display: none;">复制</button>

希望图片在移动过程中，超出父组件的部分，被覆盖掉，需要怎么做

Harmonyos Next教程
2 回复

给父组件加个 .clip(true)可以实现，可参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping-V5

Column() {
      Column() {
        if(!this.visAnimateIcon){
          Image($r('app.media.app_icon'))
            .width(22)
            .height(22)
            .margin({
              bottom: 2
            })
            .transition(true
              ? TransitionEffect.asymmetric(
              TransitionEffect.IDENTITY,
              TransitionEffect.translate({ x: -20, y: 0 }).animation({ duration: 400 }).combine(TransitionEffect.OPACITY.animation({ duration: 400 })))
              : null )
            .onComplete((msg)=>{
              if(msg?.loadingStatus == 0 ){
                setTimeout(()=>{
                  this.visAnimateIcon = true
                },2000)
              }
            })
            .draggable(false)
        } else {
          Image($r('app.media.background'))
            .width(40)
            .height(22)
            .margin({
              bottom: 2
            })
            .transition(true? TransitionEffect.SLIDE
              .combine(TransitionEffect.translate({ x: 50, y: 0 }).animation({ duration: 500 })) : null)
        }
      }
      Text('tttttttttttttttttttt')
        .fontFamily('PingFang SC')
        .fontSize(11)
        .fontWeight(FontWeight.Normal)
        .textAlign(TextAlign.Center)
        .fontColor(Color.Green)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .width(50)
    .border({ width: 2 })
    .clip(true) // 对该组件的子组件进行裁剪、遮罩处理<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

在HarmonyOS鸿蒙系统中，针对Next组件内转场动画转出时设置父组件宽度的问题，可以通过以下方式确保动画效果不超出父组件边界：

  1. 限制动画范围：在设置transition动画时，使用setBounds方法明确指定动画的作用范围。确保动画的起始和结束位置都在父组件的边界内。

  2. 父组件约束：检查父组件的布局约束条件，确保其父容器的宽度设置合理，并且设置了正确的clipBounds属性（如果支持），以防止子组件动画超出父组件范围。

  3. 动画监听与调整：通过动画监听器（如AnimatorListener）监控动画进度，并在动画执行过程中动态调整子组件的位置或大小，确保其始终保持在父组件内部。

  4. 使用相对布局：如果可能，使用相对布局（如RelativeLayout）来定义子组件的位置，这样可以通过相对位置来确保动画不会超出父组件边界。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。这样，你可以获得更专业的技术支持和解决方案。

回到顶部