湖南做网站 n磐石网络焦作网络推广哪家好

什么是组件内转场

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

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

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

先看怎么用再分析API

图片消失组件转场案例

@Entry
@Component
//组件内转场,实现图片的出现与消失转场效果
struct TransitionEffectTest1 {// 我们利用条件渲染语句来实现组件的出现与消失@State isImageVisible:boolean = true@State buttonText:string = '展示'build() {Column(){Button(this.buttonText).onClick(()=>{this.isImageVisible = !this.isImageVisiblethis.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效果。其他组件不会触发。

---