在動畫開發場景中，經常用到彈性效果，尤其在拖拽某個對象時經常伴隨彈性動效。

OpenHarmony 提供了三種彈簧動畫曲線用來實現彈性效果，本例將為大家介紹這三種曲線的用法。

最終效果如下：

運行環境

本例基于以下環境開發，開發者也可以基于其他適配的版本進行開發：

IDE：DevEco Studio 3.1 Beta2

SDK：Ohos_sdk_public 3.2.11.9(API Version 9 Release)

實現思路

本例主要用到以下三種彈簧動畫曲線：

curves.springCurve：通過設置彈簧的初始速度、質量、剛度和阻尼來控制彈簧動畫的效果。對應本例中 springCurve 按鈕觸發的動畫。

curves.springMotion：通過設置彈簧震動時間和阻尼來控制彈簧動畫的效果。對應本例中 springMotion 按鈕觸發的動畫。

curves.responsiveSpringMotion：構造彈性跟手動畫曲線對象，是springMotion的一種特例，僅默認參數不同，可與 springMotion 混合使用。用來實現拖拽動畫。

開發步驟

①搭建 UI 框架

樣例中有兩個按鈕，一個圖片。內容整體縱向分布，兩個按鈕橫向分布。縱向布局可以采用 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')
}
}

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

③為 springMotion 按鈕添加 curves.springMotion 曲線動畫。

這里通過 position 屬性控制 springMotion 按鈕的移動，當然開發者也可以繼續選擇使用 translate 屬性。

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

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

完整代碼

本例完整代碼如下：

importcurvesfrom'@ohos.curves';

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

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

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

審核編輯：劉清