什么是组件内转场

组件内转场指的是组件在触发转场的时机所具备的动画效果。转场的时机指的是，组件元素发生变化的时候，具体为：

• 组件被添加
• 组件被删除
• 组件可见性发生变化-Visibility

这些场景有时候单纯的让其消失，出现，平移有时候视觉效果会比较突兀。我们可以利用组件内转场动效实现平滑的过度。

先看怎么用再分析API

图片消失组件转场案例

@Entry
@Component
//组件内转场,实现图片的出现与消失转场效果
struct TransitionEffectTest1 {
  // 我们利用条件渲染语句来实现组件的出现与消失
  @State isImageVisible:boolean = true
  @State buttonText:string = '展示'
  build() {
    Column(){
      Button(this.buttonText)
        .onClick(()=>{
          this.isImageVisible = !this.isImageVisible
          this.buttonText = this.isImageVisible? '展示' : '消失'
        })

      if (this.isImageVisible) { //此处是条件渲染语句，isImageVisible的值发生变化，组件便可以触发消失和出现
        Image($r('app.media.11073300'))
          .objectFit(ImageFit.ScaleDown)
          .width('100%')
          .margin({top: 50})
          //接下来重点,书写转场时的动效
          // 这个转场配置一写，此组件的出现和消失便具备了转场效果
          // 我们看到转场配置也是要出动画参数的，例如持续500毫秒，缓入缓出的效果。
          // 另外转场也是可以通过combine函数来自由搭配。
          .transition(
            TransitionEffect.OPACITY
              .combine(TransitionEffect.rotate({z: 1, angle: 180}))
              .animation({duration: 500, curve: Curve.Ease})
          )

      }
    }
    .width('100%')
    .height('100%')

  }
}

真机效果展示：

组件转场API

我们从上文中看出，组件转场用到了一个名字叫transition的函数，这个函数是CommonMethod类中声明的一个函数。这个CommonMethod类是UI组件某顶层类， 所以所有的UI组件都可以继承下来，并调用这个方法。所有的组件都具备组件转场能力。

Transition触发时机

触发时机有两个：

• 当组件插入或者删除的时候， 比如条件渲染语句涉及到的条件发生了变化，或者ForEach新增或删除组件，会递归触发所有新插入或者删除组件的transition效果
• 当组件visibility属性，在可见与不可见之间发生改变的时候，只触发该组件的transition效果。其他组件不会触发。

---