1 動(dòng)畫概述
在OpenHarmony提供的文檔中，動(dòng)畫主要分為屬性動(dòng)畫及轉(zhuǎn)場(chǎng)動(dòng)畫骏掀。其定義分別為：
通過可動(dòng)畫屬性改變引起UI上產(chǎn)生的連續(xù)視覺效果，即為屬性動(dòng)畫。屬性動(dòng)畫是最基礎(chǔ)易懂的動(dòng)畫驮履，ArkUI提供兩種屬性動(dòng)畫接口animateTo和animation驅(qū)動(dòng)組件屬性按照動(dòng)畫曲線等動(dòng)畫參數(shù)進(jìn)行連續(xù)的變化刃鳄，產(chǎn)生屬性動(dòng)畫谍夭。
轉(zhuǎn)場(chǎng)動(dòng)畫是指對(duì)將要出現(xiàn)或消失的組件做動(dòng)畫，對(duì)始終出現(xiàn)的組件做動(dòng)畫應(yīng)使用屬性動(dòng)畫赂乐。轉(zhuǎn)場(chǎng)動(dòng)畫主要為了讓開發(fā)者從繁重的消失節(jié)點(diǎn)管理中解放出來，如果用屬性動(dòng)畫做組件轉(zhuǎn)場(chǎng)咖气，開發(fā)者需要在動(dòng)畫結(jié)束回調(diào)中刪除組件節(jié)點(diǎn)挨措。同時(shí)，由于動(dòng)畫結(jié)束前已經(jīng)刪除的組件節(jié)點(diǎn)可能會(huì)重新出現(xiàn)崩溪，還需要在結(jié)束回調(diào)中增加對(duì)節(jié)點(diǎn)狀態(tài)的判斷浅役。
可以看出，在涉及組件的出現(xiàn)消失時(shí)如果要添加動(dòng)畫伶唯，則最好使用轉(zhuǎn)場(chǎng)動(dòng)畫觉既，其余的不涉及組件的出現(xiàn)消失的場(chǎng)景均使用屬性動(dòng)畫。本文先對(duì)屬性動(dòng)畫的實(shí)現(xiàn)進(jìn)行講解乳幸。
2 屬性動(dòng)畫的實(shí)現(xiàn)
以Hello World為例瞪讼，實(shí)現(xiàn)點(diǎn)擊單詞位置后，Hello World大小縮小為0.5倍粹断，再次點(diǎn)擊后恢復(fù)符欠。實(shí)現(xiàn)代碼為：
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
@State scaleValue: number = 1.0;
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.scale({ x: this.scaleValue, y: this.scaleValue })
.onClick(() => {
animateTo({
duration: 500,
curve: Curve.Linear
}, () => {
this.scaleValue = this.scaleValue === 1.0 ? 0.5 : 1.0;
})
})
}
.width('100%')
}
.height('100%')
}
}
效果為：
在這筆修改中，先是添加了一個(gè)@State變量scaleValue姿染，@State的作用可以參考文檔：[State作用]
@State裝飾的變量背亥，或稱為狀態(tài)變量秒际，一旦變量擁有了狀態(tài)屬性，就和自定義組件的渲染綁定起來狡汉。當(dāng)狀態(tài)改變時(shí)娄徊，UI會(huì)發(fā)生對(duì)應(yīng)的渲染改變。
在狀態(tài)變量相關(guān)裝飾器中盾戴，@State是最基礎(chǔ)的寄锐，使變量擁有狀態(tài)屬性的裝飾器，它也是大部分狀態(tài)變量的數(shù)據(jù)源尖啡。
<font color="Red">在做屬性動(dòng)畫時(shí)橄仆，由于UI需要每幀都跟隨動(dòng)畫變更，因此需要將對(duì)應(yīng)的屬性綁定一個(gè)@State變量衅斩。本例中是將Hello World的組件的縮放值scale添加了屬性動(dòng)畫盆顾，并將縮放值的大小綁定在scaleValue變量上。</font>
具體代碼中就是第5行和第13行的修改畏梆。
第14行的修改是添加點(diǎn)擊事件回調(diào)您宪，在Hello World文本被點(diǎn)擊時(shí)，會(huì)執(zhí)行這個(gè)回調(diào)函數(shù)奠涌。
onClick回調(diào)中的animateTo即是加動(dòng)畫的接口宪巨，對(duì)scaleValue添加一個(gè)動(dòng)畫，對(duì)應(yīng)的屬性會(huì)跟隨這個(gè)動(dòng)畫值進(jìn)行改變溜畅。
3 animateTo
animateTo的詳細(xì)解析可以參考文檔：[animateTo參考文檔]
除了代碼中設(shè)置的duration動(dòng)畫時(shí)長和curve動(dòng)畫曲線以外捏卓，還可以參考上述文檔添加delay時(shí)延和重復(fù)性動(dòng)畫。
animateTo的第一個(gè)參數(shù)即為動(dòng)畫參數(shù)慈格，包括動(dòng)畫的時(shí)長曲線等參數(shù)怠晴，第二個(gè)參數(shù)為指定顯示動(dòng)效的閉包函數(shù)，在閉包函數(shù)中導(dǎo)致的狀態(tài)變化系統(tǒng)會(huì)自動(dòng)插入過渡動(dòng)畫浴捆。
4 其余的屬性動(dòng)畫
除了示例中的縮放值scale這一屬性外龄寞，還有許多支持動(dòng)畫的屬性，具體可以參考：[通用屬性]目錄下的各屬性值汤功。
例如物邑，下面的代碼添加了組件的縮放、旋轉(zhuǎn)滔金、位移色解、透明度等屬性動(dòng)畫。
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
@State scaleValue: number = 1.0;
@State translateValue: number = 0;
@State rotateAngle: number = 0;
@State alphaValue: number = 1.0;
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.scale({ x: this.scaleValue, y: this.scaleValue })
.translate({ y: this.translateValue })
.rotate({ z: 1, angle: this.rotateAngle })
.opacity(this.alphaValue)
.onClick(() => {
animateTo({
duration: 500,
curve: Curve.Linear
}, () => {
this.scaleValue = this.scaleValue === 1.0 ? 0.5 : 1.0;
this.translateValue = this.translateValue === 0 ? -30 : 0;
this.rotateAngle = this.rotateAngle === 0 ? 90 : 0;
this.alphaValue = this.alphaValue === 1.0 ? 0.5 : 1.0;
})
})
}
.width('100%')
}
.height('100%')
}
}
效果為：
