组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。布局类改变宽高的动画，内容都是直接到终点状态，例如文字、Canvas的内容、linearGradient等，如果要内容跟随宽高变化，可以使用renderFit属性配置。
函数
animationStart(AnimateParam)
public func animationStart(animation: AnimateParam): This
设置动画效果。
| 参数名 | 参数类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| animation | AnimateParam | 是 | - | 动画效果相关参数。 |
animationEnd()
public func animationEnd(): This
设置动画结束。
说明
animationStart 需要和 animationEnd 配合使用。animationStart作为组件的第一个属性被调用，animationEnd作为最后一个属性被调用。
示例代码
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
let animateOpt1 = AnimateParam(
duration: 1200,
curve: Curve.EaseOut,
delay: 500,
iterations: 3,
playMode: PlayMode.Normal,
onFinish: {
=> AppLog.info("onfinish")
},
expectedFrameRateRange: ExpectedFrameRateRange(
min: 20,
max: 120,
expected: 90
)
)
let animateOpt2 = AnimateParam(
duration: 1200,
curve: Curve.Friction,
delay: 500,
iterations: -1, // 设置-1表示动画无限循环
playMode: PlayMode.Alternate,
onFinish: {
=> AppLog.info("onfinish")
},
expectedFrameRateRange: ExpectedFrameRateRange(
min: 20,
max: 120,
expected: 90
)
)
@Entry
@Component
class MyView {
@State var widthSize: Length = 250.vp
@State var heightSize: Length = 100.vp
@State var rotateAngle: Float32 = 0.0
@State var flag: Bool = true
func build() {
Column() {
Button("change size").animationStart(animateOpt1).
onClick{ =>
if (this.flag) {
this.widthSize = 150.vp
this.heightSize = 60.vp
} else {
this.widthSize = 250.vp
this.heightSize = 100.vp
}
this.flag = !this.flag
}.margin(30)
.animationEnd()
.width(this.widthSize)
.height(this.heightSize)
Button('change rotate angle').animationStart(animateOpt2)
.onClick { =>
this.rotateAngle = 90.0
}.margin(50)
.rotate(this.rotateAngle)
.animationEnd()
}.width(100.percent).
margin(top: 20)
}
}
[图片上传失败...(image-2800a8-1735046459874)]
如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！
技术交流群可加wx“LB-9191” 备注cangjie
