Component Transition
Configure the component transition animations for when a component is inserted or deleted. This feature takes effect only when animateTo is used. The animation duration, curve, and delay are the same as those configured in animateTo.
NOTE
The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Attributes
| Name | Type | Default Value | Description |
|---|---|---|---|
| transition | Object | - | All parameters are optional. For details, see transition. |
- transition
| Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
| type | TransitionType | TransitionType.All | No | Transition type, which includes component addition and deletion by default. NOTE If type is not specified, insertion and deletion use the same transition type. |
| opacity | number | 1 | No | Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion. |
| translate | { x? : number, y? : number, z? : number } |
- | No | Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion. -x: distance to translate along the x-axis. -y: distance to translate along the y-axis. -z: distance to translate along the z-axis. |
| scale | { x? : number, y? : number, z? : number, centerX? : number, centerY? : number } |
- | No | Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion. - x: scale factor along the x-axis. - y: scale factor along the y-axis. - z: scale factor along the z-axis. - centerX and centerY: x coordinate and y coordinate of the scale center, respectively. - If the center point is 0, it indicates the upper left corner of the component. |
| rotate | { x?: number, y?: number, z?: number, angle?: Angle, centerX?: Length, centerY?: Length } |
- | No | Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion. - x: rotation vector along the x-axis. - y: rotation vector along the y-axis. - z: rotation vector along the z-axis. - centerX and centerY: x coordinate and y coordinate of the rotation center, respectively. - If the center point is (0, 0), it indicates the upper left corner of the component. |
Example
The following example shows how to use a button to control the appearance and disappearance of another button, and how to configure the required transition animations.
// xxx.ets
@Entry
@Component
struct TransitionExample {
@State btn1: boolean = false
@State show: string = "show"
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) {
Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50})
.onClick(() => {
animateTo({ duration: 1000 }, () => {
this.btn1 = !this.btn1
if(this.btn1){
this.show = "hide"
}else{
this.show = "show"
}
})
})
if (this.btn1) {
// The insertion and deletion have different transition effects.
Button() {
Image($r('app.media.bg1')).width("80%").height(300)
}.transition({ type: TransitionType.Insert, scale : {x:0,y:1.0} })
.transition({ type: TransitionType.Delete, scale: { x: 1.0, y: 0.0 } })
}
}.height(400).width("100%").padding({top:100})
}
}
