属性动画
属性动画是通过设置组件的animation属性来给组件添加动画，当组件的width、height、Opacity、backgroundColor、scale 、rotate、translate等属性变更时，可以实现渐变过渡效果。
代码示例
@Entry
@Component
struct AnimPage {
@State message: string = 'Hello World'
@State scaleX: number = 1
@State scaleY: number = 1
@State animChange: boolean = false
build() {
Row() {
Column() {
Button("按钮")
.scale({
x: this.scaleX, y: this.scaleY, centerX: '50%', centerY: 0 })
.animation({
duration: 1000, curve: Curve.Ease })
.onClick(() => {
if (this.animChange) {
this.scaleX = 3
this.scaleY = 3
} else {
this.scaleX = 1
this.scaleY = 1
}
this.animChange = !this.animChange
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start)
}
.height('100%')
}
}
显式动画
显式动画是通过全局animateTo函数来修改组件属性，实现属性变化时的渐变过渡效果.
animateTo(value: AnimateParam, event: () => void): void
代码示例
@Entry
@Component
struct AnimPage {
@State message: string = 'Hello World'
@State itemAlign: HorizontalAlign = HorizontalAlign.Start
itemAlignList: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End]
index: number=0
build() {
Row() {
Column() {
Button("按钮")
.onClick(() => {
animateTo({
duration: 1000, curve: Curve.EaseInOut }, () => {
this.itemAlign = this.itemAlignList[(this.index+1)%this.itemAlignList.length]
this.index++
});
})
}
.alignItems(this.itemAlign)
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start)
}
.height('100%')
}
}
组件转场动画
组件的插入、删除过程即为组件本身的转场过程，组件的插入、删除动画称为组件内转场动画。通过组件内转场动画，可定义组件出现、消失的效果。通过组件的transition属性来配置。
参考文档
transition(value: TransitionOptions)
transition函数的入参为组件内转场的效果，可以定义平移、透明度、旋转、缩放这几种转场样式的单个或者组合的转场效果，必须和animateTo一起使用才能产生组件转场效果。
代码示例
@Entry
@Component
struct AnimPage {
@State message: string = 'Hello World'
@State isBegin: boolean = false
build() {
Row() {
Column() {
Button("按钮")
.onClick(() => {
this.animAction()
})
if (this.isBegin) {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.margin({
top: 100 })
.transition({
type: TransitionType.Insert,
opacity: 0,
rotate: {
angle: -360 },
scale: {
x: 0, y: 0 },
})
}
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start)
}
.height('100%')
}
animAction() {
animateTo({
duration: 1000 }, () => {
this.isBegin = true
})
}
}
