在動(dòng)畫(huà)開(kāi)發(fā)場(chǎng)景中，經(jīng)常用到彈性效果，尤其在拖拽某個(gè)對(duì)象時(shí)經(jīng)常伴隨彈性動(dòng)效。

OpenHarmony 提供了三種彈簧動(dòng)畫(huà)曲線用來(lái)實(shí)現(xiàn)彈性效果，本例將為大家介紹這三種曲線的用法。

最終效果如下：

運(yùn)行環(huán)境

本例基于以下環(huán)境開(kāi)發(fā)，開(kāi)發(fā)者也可以基于其他適配的版本進(jìn)行開(kāi)發(fā)：

IDE：DevEco Studio 3.1 Beta2

SDK：Ohos_sdk_public 3.2.11.9(API Version 9 Release)

實(shí)現(xiàn)思路

本例主要用到以下三種彈簧動(dòng)畫(huà)曲線：

curves.springCurve：通過(guò)設(shè)置彈簧的初始速度、質(zhì)量、剛度和阻尼來(lái)控制彈簧動(dòng)畫(huà)的效果。對(duì)應(yīng)本例中 springCurve 按鈕觸發(fā)的動(dòng)畫(huà)。

curves.springMotion：通過(guò)設(shè)置彈簧震動(dòng)時(shí)間和阻尼來(lái)控制彈簧動(dòng)畫(huà)的效果。對(duì)應(yīng)本例中 springMotion 按鈕觸發(fā)的動(dòng)畫(huà)。

curves.responsiveSpringMotion：構(gòu)造彈性跟手動(dòng)畫(huà)曲線對(duì)象，是springMotion的一種特例，僅默認(rèn)參數(shù)不同，可與 springMotion 混合使用。用來(lái)實(shí)現(xiàn)拖拽動(dòng)畫(huà)。

開(kāi)發(fā)步驟

①搭建 UI 框架

樣例中有兩個(gè)按鈕，一個(gè)圖片。內(nèi)容整體縱向分布，兩個(gè)按鈕橫向分布。縱向布局可以采用 Column 組件，橫向布局可以采用 Row 組件。

代碼如下：

@Entry
@Component
structImageComponent{
build(){
Column(){
Row(){
Button('springCurve')
.margin({right:10})
.fontSize(20)
.backgroundColor('#18183C')
Button('springMotion')
.fontSize(20)
.backgroundColor('#18183C')
}
.margin({top:30})

Image($r("app.media.contact2"))
.width(100)
.height(100)
}.width("100%").height("100%").backgroundColor('#A4AE77')
}
}

...
//定義狀態(tài)變量translateY，用來(lái)控制笑臉圖像的位移
@StatetranslateY:number=0
...
Button('springCurve')
.margin({right:10})
.fontSize(20)
.backgroundColor('#18183C')
//綁定點(diǎn)擊事件
.onClick(()=>{
//在點(diǎn)擊事件中添加顯示動(dòng)畫(huà)
animateTo({
duration:2000,
//設(shè)定curves.springCurve為動(dòng)畫(huà)曲線
curve:curves.springCurve(100,10,80,10)
},
()=>{
//改變translateY的值，使笑臉圖像發(fā)生位移
this.translateY=-20
})
this.translateY=0
})
...
Image($r("app.media.contact2"))
.width(100)
.height(100)
//為笑臉圖像添加位移屬性，以translateY為參數(shù)
.translate({y:this.translateY})
...

③為 springMotion 按鈕添加 curves.springMotion 曲線動(dòng)畫(huà)。

這里通過(guò) position 屬性控制 springMotion 按鈕的移動(dòng)，當(dāng)然開(kāi)發(fā)者也可以繼續(xù)選擇使用 translate 屬性。

...
//定義狀態(tài)變量translateY，用來(lái)控制笑臉圖像的位置變化
@StateimgPos:{
x:number,
y:number
}={x:125,y:400}
...
Button('springMotion')
.fontSize(20)
.backgroundColor('#18183C')
//綁定點(diǎn)擊事件
.onClick(()=>{
//在點(diǎn)擊事件中添加顯示動(dòng)畫(huà)
animateTo({
duration:15,
//設(shè)定curves.springMotion為動(dòng)畫(huà)曲線
curve:curves.springMotion(0.5,0.5),
onFinish:()=>{
animateTo({duration:500,
curve:curves.springMotion(0.5,0.5),},()=>{
//動(dòng)畫(huà)結(jié)束時(shí)笑臉圖像位置還原
this.imgPos={x:125,y:400}
})
}
},()=>{
//改變笑臉圖像位置，y軸位置由400，變?yōu)?50
this.imgPos={x:125,y:150}
})
})
...
Image($r("app.media.contact2"))
.width(100)
.height(100)
.translate({y:this.translateY})
//為笑臉圖像添加位置屬性，以imgPos為參數(shù)
.position(this.imgPos)
...

...
Image($r("app.media.contact2"))
.width(100)
.height(100)
.translate({y:this.translateY})
.position(this.imgPos)
//綁定觸摸事件
.onTouch((event:TouchEvent)=>{
//當(dāng)觸摸放開(kāi)時(shí)，笑臉圖像位置還原
if(event.type==TouchType.Up){
animateTo({
duration:50,
delay:0,
curve:curves.springMotion(),
onFinish:()=>{
}
},()=>{
this.imgPos={x:125,y:400}
})
}else{
//觸摸過(guò)程中觸發(fā)跟手動(dòng)畫(huà)
animateTo({
duration:50,
delay:0,
//設(shè)定跟手動(dòng)畫(huà)曲線
curve:curves.responsiveSpringMotion(),
onFinish:()=>{
}
},()=>{
//根據(jù)觸點(diǎn)位置改變笑臉圖像位置，從而實(shí)現(xiàn)跟手動(dòng)畫(huà)
this.imgPos={
x:event.touches[0].screenX-100/2,
y:event.touches[0].screenY-100/2
}
})
}
})
...

完整代碼

本例完整代碼如下：

importcurvesfrom'@ohos.curves';

@Entry
@Component
structImageComponent{
//定義狀態(tài)變量translateY，用來(lái)控制笑臉圖像的位移
@StatetranslateY:number=0
//定義狀態(tài)變量translateY，用來(lái)控制笑臉圖像的位置變化
@StateimgPos:{
x:number,
y:number
}={x:125,y:400}

build(){
Column(){
Row(){
Button('springCurve')
.margin({right:10})
.fontSize(20)
.backgroundColor('#18183C')
//綁定點(diǎn)擊事件
.onClick(()=>{
//在點(diǎn)擊事件中添加顯示動(dòng)畫(huà)
animateTo({
duration:2000,
//設(shè)定curves.springCurve為動(dòng)畫(huà)曲線
curve:curves.springCurve(100,10,80,10)
},
()=>{
//改變translateY的值，使笑臉圖像發(fā)生位移
this.translateY=-20
})
this.translateY=0
})
Button('springMotion')
.fontSize(20)
.backgroundColor('#18183C')
//綁定點(diǎn)擊事件
.onClick(()=>{
//在點(diǎn)擊事件中添加顯示動(dòng)畫(huà)
animateTo({
duration:15,
//設(shè)定curves.springMotion為動(dòng)畫(huà)曲線
curve:curves.springMotion(0.5,0.5),
onFinish:()=>{
animateTo({duration:500,
curve:curves.springMotion(0.5,0.5),},()=>{
//動(dòng)畫(huà)結(jié)束時(shí)笑臉圖像位置還原
this.imgPos={x:125,y:400}
})
}
},()=>{
//改變笑臉圖像位置，y軸位置由400，變?yōu)?50
this.imgPos={x:125,y:150}
})
})
}
.margin({top:30})

Image($r("app.media.contact2"))
.width(100)
.height(100)
//為笑臉圖像添加位移屬性，以translateY為參數(shù)
.translate({y:this.translateY})
//為笑臉圖像添加位置屬性，以imgPos為參數(shù)
.position(this.imgPos)
//綁定觸摸事件
.onTouch((event:TouchEvent)=>{
//當(dāng)觸摸放開(kāi)時(shí)，笑臉圖像位置還原
if(event.type==TouchType.Up){
animateTo({
duration:50,
delay:0,
curve:curves.springMotion(),
onFinish:()=>{
}
},()=>{
this.imgPos={x:125,y:400}
})
}else{
//觸摸過(guò)程中觸發(fā)跟手動(dòng)畫(huà)，同樣通過(guò)animateTo實(shí)現(xiàn)動(dòng)畫(huà)效果
animateTo({
duration:50,
delay:0,
//設(shè)定跟手動(dòng)畫(huà)曲線
curve:curves.responsiveSpringMotion(),
onFinish:()=>{
}
},()=>{
//根據(jù)觸點(diǎn)位置改變笑臉圖像位置，從而實(shí)現(xiàn)跟手動(dòng)畫(huà)
this.imgPos={
x:event.touches[0].screenX-100/2,
y:event.touches[0].screenY-100/2
}
})
}
})
}.width("100%").height("100%").backgroundColor('#A4AE77')
}
}

審核編輯：劉清