組件的某些通用屬性變化時(shí)，可以通過(guò)屬性動(dòng)畫(huà)實(shí)現(xiàn)漸變過(guò)渡效果，提升用戶(hù)體驗(yàn)。支持的屬性包括width、height、backgroundColor、opacity、scale、rotate、translate等。布局類(lèi)改變寬高的動(dòng)畫(huà)，內(nèi)容都是直接到終點(diǎn)狀態(tài)，例如文字、Canvas的內(nèi)容、linearGradient等，如果要內(nèi)容跟隨寬高變化，可以使用renderFit屬性配置。
函數(shù)
animationStart(AnimateParam)
public func animationStart(animation: AnimateParam): This
設(shè)置動(dòng)畫(huà)效果。
| 參數(shù)名 | 參數(shù)類(lèi)型 | 必填 | 默認(rèn)值 | 描述 |
|---|---|---|---|---|
| animation | AnimateParam | 是 | - | 動(dòng)畫(huà)效果相關(guān)參數(shù)。 |
animationEnd()
public func animationEnd(): This
設(shè)置動(dòng)畫(huà)結(jié)束。
說(shuō)明
animationStart 需要和 animationEnd 配合使用。animationStart作為組件的第一個(gè)屬性被調(diào)用，animationEnd作為最后一個(gè)屬性被調(diào)用。
示例代碼
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, // 設(shè)置-1表示動(dòng)畫(huà)無(wú)限循環(huán)
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)]
如對(duì)您有幫助，幫忙點(diǎn)個(gè)“在看 、關(guān)注” 讓更多的人受益~！
技術(shù)交流群可加wx“LB-9191” 備注cangjie
