顯式動畫

https://gitee.com/openharmony/docs/blob/5654c2b940ab3e2f4f0baf435e630c4ef3536428/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md

@Entry
@Component
structAnimationPage{
//位移屬性
@State_translate:TranslateOptions={
x:0,
y:0,
z:0
}

build(){
Flex({
alignItems:ItemAlign.Center,
justifyContent:FlexAlign.Center,
direction:FlexDirection.Column
}){
Button('執行動畫').margin({bottom:50}).onClick(()=>{
//添加一個簡單顯式動畫
animateTo({
duration:1000,//動畫時長
tempo:0.5,//播放速率
curve:Curve.EaseInOut,//動畫曲線
delay:0,//動畫延遲
iterations:1,//播放次數
playMode:PlayMode.Normal,//動畫模式
},()=>{
//閉包內更改狀態
this._translate={
x:0,
y:100,
z:0
}
})
})

Column(){
Text('Animate.css')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontColor('#351c75')
.translate(this._translate)//位移變換
}
}
.width('100%')
.height('100%')
}
}

如果我們希望向下位移完成后，再向右位移，就需要在第一個動畫完成后再進行第二個動畫，即在第一個動畫的 onFinish 函數中執行第二個動畫。

這樣組合起來可以構成一個更復雜的連續動畫：

//單步動畫執行函數
animationStep(value:AnimateParam,event:()=>void){
return()=>{
returnnewPromise((resolve)=>{
letonFinish=value.onFinish
value.onFinish=()=>{
if(onFinish)onFinish()
resolve(true)
}
animateTo(value,event)
})
}
}

創建 4 步動畫：

aboutToAppear(){
//每步動畫執行時長
lettime=200
this.step1=this.animationStep({
duration:time,//動畫時長
tempo:0.5,//播放速率
curve:Curve.EaseInOut,//動畫曲線
delay:0,//動畫延遲
iterations:1,//播放次數
playMode:PlayMode.Normal,//動畫模式
onFinish:()=>{
//動畫執行完成
console.info('playend')
}
},()=>{
//閉包內更改狀態
this._translate={
x:0,
y:100,
z:0
}
})


this.step2=this.animationStep({
duration:time,//動畫時長
tempo:0.5,//播放速率
curve:Curve.EaseInOut,//動畫曲線
delay:0,//動畫延遲
iterations:1,//播放次數
playMode:PlayMode.Normal,//動畫模式
onFinish:()=>{
//動畫執行完成
console.info('playend')
}
},()=>{
//閉包內更改狀態
this._translate={
x:100,
y:100,
z:0
}
})

this.step3=this.animationStep({
duration:time,//動畫時長
tempo:0.5,//播放速率
curve:Curve.EaseInOut,//動畫曲線
delay:0,//動畫延遲
iterations:1,//播放次數
playMode:PlayMode.Normal,//動畫模式
onFinish:()=>{
//動畫執行完成
console.info('playend')
}
},()=>{
//閉包內更改狀態
this._translate={
x:100,
y:0,
z:0
}
})

this.step4=this.animationStep({
duration:time,//動畫時長
tempo:0.5,//播放速率
curve:Curve.EaseInOut,//動畫曲線
delay:0,//動畫延遲
iterations:1,//播放次數
playMode:PlayMode.Normal,//動畫模式
onFinish:()=>{
//動畫執行完成
console.info('playend')
}
},()=>{
//閉包內更改狀態
this._translate={
x:0,
y:0,
z:0
}
})
}

順序執行 4 步動畫：

Button('執行動畫').margin({bottom:50}).onClick(async()=>{
awaitthis.step1()
awaitthis.step2()
awaitthis.step3()
awaitthis.step4()
})

實現 AnimateCSS 動畫

AnimateCSS：

https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css

https://animate.style/

看下 pulse 動畫樣式代碼：

.animate__pulse{
-webkit-animation-name:pulse;
animation-name:pulse;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
}

@keyframespulse{
from{
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1);
}

50%{
-webkit-transform:scale3d(1.05,1.05,1.05);
transform:scale3d(1.05,1.05,1.05);
}

to{
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1);
}
}

ETS 實現：

@State_scale:ScaleOptions={
x:1,
y:1,
z:1
}

...

Column(){
Text('Animate.css')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontColor('#351c75')
.translate(this._translate)//位移變換
.scale(this._scale)//比例變化
}

• 傳遞一個動畫總時長 time

• 第一步動畫執行段為 0%-50%，所以動畫執行時長為總時長time * 50%

• 第二步動畫執行段為 50%-100%，所以動畫執行時長為總時長time * 50%

asyncpulse(time){
//0%-50%
letstep1=this.animationStep({
duration:time*0.5,//動畫時長
tempo:0.5,//播放速率
curve:Curve.EaseInOut,//動畫曲線
delay:0,//動畫延遲
iterations:1,//播放次數
playMode:PlayMode.Normal,//動畫模式
},()=>{
this._scale={
x:1.05,
y:1.05,
z:1.05
}
})

//50%-100%
letstep2=this.animationStep({
duration:time*0.5,//動畫時長
tempo:0.5,//播放速率
curve:Curve.EaseInOut,//動畫曲線
delay:0,//動畫延遲
iterations:1,//播放次數
playMode:PlayMode.Normal,//動畫模式
},()=>{
this._scale={
x:1,
y:1,
z:1
}
})

awaitstep1()
awaitstep2()
}

執行動畫：

Button('執行PULSE動畫').margin({bottom:50}).onClick(async()=>{
this.pulse(500)
})

審核編輯 ：李倩