基于ArkTS的應(yīng)用入場(chǎng)動(dòng)畫(huà)
相信讀者對(duì)應(yīng)用入場(chǎng)動(dòng)畫(huà)并不陌生。當(dāng)用戶打開(kāi)某個(gè)應(yīng)用時(shí)，應(yīng)用得到響應(yīng)，與此同時(shí)其在屏幕中所渲染的第一個(gè)畫(huà)面通常是它的入場(chǎng)動(dòng)畫(huà)。當(dāng)然，應(yīng)用響應(yīng)后所拋出的不一定是動(dòng)畫(huà)，它也可以是一個(gè)靜態(tài)的頁(yè)面，不過(guò)不論是動(dòng)畫(huà)還是靜態(tài)頁(yè)面，它們所起到的功能是相同的——在后臺(tái)完成應(yīng)用中的重要模塊的初始化，貼出開(kāi)發(fā)團(tuán)隊(duì)的slogen，亦或展示一些甲方的產(chǎn)品推廣廣告。
本期筆者將以一個(gè)輕量Demo的開(kāi)發(fā)流程為例，與筆者共同探索如何利于ArkTS生產(chǎn)應(yīng)用的入場(chǎng)動(dòng)畫(huà)。
創(chuàng)建工程
添加新頁(yè)面
接著，在工程文件目錄中打開(kāi)目錄：Demo/entry/src/resources/base/profile/main_pages，添加Second頁(yè)面的路徑信息。注意，字符串'pages/Index’后面的逗號(hào)不能漏寫(xiě)。
編寫(xiě)新頁(yè)面的UI
@Entry
@Component
struct Index {
@State message: string = '主頁(yè)面'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(40)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
.backgroundColor('#F1F1F1')
}
}事實(shí)上，這段代碼來(lái)自于Index.ets, 我們只不過(guò)是將Index.ets的代碼拷貝至Second.ets中后，修改了變量message的初值，并更換了頁(yè)面的背景色。由于Second.ets所管理的頁(yè)面在此次的開(kāi)發(fā)案例中不是主角，所以我們簡(jiǎn)單設(shè)計(jì)一下它的UI就足夠了。
Second.ets的最終預(yù)覽效果如下：
編寫(xiě)入場(chǎng)頁(yè)面的UI
加入圖片資源
Before coding，我們需要添加一份圖片資源到工程的指定目錄內(nèi)。
在工程文件目錄中打開(kāi)目錄：Demo/entry/src/main/resources/rawfile, 添加一張任意的圖片(可以在IDE中將待添加的圖片資源直接粘貼至rawfile目錄下，也可以在文件資源管理器中通過(guò)文件路徑打開(kāi)rawfile目錄并添加圖片資源)，將其命名為logo1。當(dāng)然，圖片的格式?jīng)]有要求，只要在之后的步驟中能被正確引用即可。
添加組件
在編輯器中打開(kāi)Index.ets（此頁(yè)面將作為入場(chǎng)頁(yè)面）, 刪除Column組件內(nèi)關(guān)于Text組件的代碼塊，增添一個(gè)新的Image件和一個(gè)新的Text組件，并填充它們的UI屬性，相關(guān)代碼如下。其中，新增的Image組件所引用的圖片資源是上一個(gè)步驟中所添加的logo1.jpg。
@Entry
@Component
struct First {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
//刪除頁(yè)面初始化時(shí)默認(rèn)帶有的Text組件, 增加一個(gè)新的image件和一個(gè)新的Text組件
Image($rawfile('logo1.jpg'))
.height(120)
.width(120)
Text('Brunhild')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.margin({
top:7
})
}
.width('100%')
}
.height('100%')
}
}預(yù)覽器效果如下：
至此，我們已完成對(duì)Index.ets的頁(yè)面UI繪制。接下來(lái)，我們需要為這兩個(gè)新添的組件設(shè)置與屬性動(dòng)畫(huà)有關(guān)的屬性。屬性動(dòng)畫(huà)（animation）是ArkUI提供的最基礎(chǔ)和常用的動(dòng)畫(huà)功能之一，它的功能邏輯是，當(dāng)組件的布局屬性(譬如位置，大小，背景顏色)發(fā)生變化時(shí)，組件會(huì)按照已設(shè)置好的動(dòng)畫(huà)參數(shù)，從原有的布局狀態(tài)過(guò)渡到變化后的布局狀態(tài)，而這個(gè)過(guò)渡的擬連續(xù)過(guò)程便是用戶所見(jiàn)到的動(dòng)畫(huà)。在這個(gè)基礎(chǔ)上，我們可以制作一個(gè)簡(jiǎn)單的應(yīng)用入場(chǎng)動(dòng)畫(huà)效果。
添加關(guān)鍵屬性
所涉及的兩個(gè)重要屬性分別是translate屬性和animation屬性。
事實(shí)上，系統(tǒng)為每個(gè)被渲染的組件都設(shè)置屬于它的相對(duì)坐標(biāo)系。這個(gè)坐標(biāo)系是一個(gè)平面直角坐標(biāo)系，并且，相對(duì)于屏幕，X坐標(biāo)軸正方向水平向右，Y坐標(biāo)軸正方向豎直向下。當(dāng)一個(gè)組件的translate屬性被設(shè)置時(shí)，它的實(shí)際位置會(huì)跟著translate屬性而偏移。比如，一個(gè)原本位于屏幕中央的組件，更改其translate屬性為{x:100,y:0}后，其位置會(huì)相對(duì)屏幕中央往右平移100px。
animation屬性的可供設(shè)置的參數(shù)如下所示，每個(gè)參數(shù)都會(huì)在不同維度影響動(dòng)畫(huà)的最終效果
/**
* Animation duration, in ms.
* @since 7
*/
/**
* Animation duration, in ms.
* @form
* @since 9
*/
duration?: number;
/**
* Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower
* animation playback. The value 0 means that there is no animation.
* @since 7
*/
tempo?: number;
/**
* Animation curve.
* @type { string | Curve}
* @since 7
*/
/**
* Animation curve.
* @type { string | Curve | ICurve}
* @form
* @since 9
*/
curve?: Curve | string | ICurve;
/**
* Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
* @since 7
*/
delay?: number;
/**
* Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
* @since 7
*/
iterations?: number;
/**
* Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
* @since 7
*/
/**
* Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
* @form
* @since 9
*/
playMode?: PlayMode;
/**
* Callback invoked when the animation playback is complete.
* @since 7
*/
/**
* Callback invoked when the animation playback is complete.
* @form
* @since 9
*/
onFinish?: () => void;接下來(lái)，我們?yōu)榻M件添加關(guān)鍵屬性。
首先，定義變量 translateY_Logo，同時(shí)設(shè)置Image組件的translate屬性和animation屬性。
@Entry
@Component
struct First {
......
@State translateY_Logo:number = -200 //定義一個(gè)用@state修飾的number型變量translateY_Logo
build() {
Row() {
Column() {
//刪除頁(yè)面初始化時(shí)默認(rèn)帶有的Text組件, 增加一個(gè)新的image件和一個(gè)新的Text組件
Image($rawfile('logo1.jpg'))
.height(120)
.width(120)
//添加關(guān)鍵屬性
.translate({
y:this.translateY_Logo
})
.animation({
//播放時(shí)長(zhǎng)（ms）
duration:2000,
//播放速度
tempo:1,
//播放曲線，所選擇的是‘快出慢入’
curve:Curve.FastOutSlowIn,
//延遲（ms）
delay:500,
//循環(huán)次數(shù)（-1為無(wú)限循環(huán)）
iterations:1,
//播放模式
playMode:PlayMode.Normal
})
......
}
.width('100%')
}
.height('100%')
}
}接著，定義變量 translateY_Title，同時(shí)設(shè)置Text組件的translate屬性和animation屬性。
@Entry
@Component
struct First {
......
@State translateY_Title:number = 200 //定義一個(gè)用@state修飾的number型變量translateY_Title
build() {
Row() {
Column() {
//刪除頁(yè)面初始化時(shí)默認(rèn)帶有的Text組件, 增加一個(gè)新的image件和一個(gè)新的Text組件
......
Text('Brunhild')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.margin({
top:7
})
//添加關(guān)鍵屬性
.translate({
y:this.translateY_Title
})
.animation({
delay:500,
duration:2000,
curve:Curve.FastOutSlowIn,
tempo:1,
})
}
.width('100%')
}
.height('100%')
}
}頁(yè)面起始狀態(tài)的效果如下，可以看到，設(shè)置translate屬性后，Image組件往Y軸負(fù)方向偏移，Text組件則往Y軸正方向偏移。
最后，我們?yōu)門(mén)ext組件添加onAppear回調(diào)。onAppear可以被理解為一個(gè)事件監(jiān)聽(tīng)器，當(dāng)一個(gè)綁定了onAppear的組件裝載于顯示器時(shí)，onAppear回調(diào)將被觸發(fā)，執(zhí)行onAppear（）中所傳入的操作語(yǔ)句。換句話說(shuō)，Text組件在添加onAppear屬性后，當(dāng)此Text組件出現(xiàn)時(shí)(筆者也不清楚這個(gè)出現(xiàn)是如何定義的)，onAppear立即觸發(fā)，執(zhí)行已寫(xiě)入的函數(shù)參數(shù)（即λ表達(dá)式中的內(nèi)容）。
在如下代碼中，筆者為T(mén)ext組件增加了onAppear回調(diào)，導(dǎo)入了router模塊，并寫(xiě)入了相關(guān)操作語(yǔ)句：首先，改變Image組件和Text組件的translate屬性，激活屬性動(dòng)畫(huà)；之后，設(shè)置定時(shí)器（每4秒執(zhí)行一次），使得系統(tǒng)在屬性動(dòng)畫(huà)結(jié)束后執(zhí)行頁(yè)面跳轉(zhuǎn)(跳轉(zhuǎn)至Second頁(yè)面)；最后，銷(xiāo)毀先前設(shè)置的定時(shí)器。
import router from '@ohos.router'; //導(dǎo)入router模塊
@Entry
@Component
struct First {
......
@State translateY_Title:number = 200 //定義一個(gè)用@state修飾的number型變量translateY_Title
build() {
Row() {
Column() {
//刪除頁(yè)面初始化時(shí)默認(rèn)帶有的Text組件, 增加一個(gè)新的image件和一個(gè)新的Text組件
......
Text('Brunhild')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.margin({
top:7
})
//添加關(guān)鍵屬性
.translate({
y:this.translateY_Title
})
.animation({
delay:500,
duration:2000,
curve:Curve.FastOutSlowIn,
tempo:1,
})
//增加onAppear回調(diào)
.onAppear(()=>{
//改變屬性參數(shù)
this.translateY_Logo = 0
this.translateY_Title = 0
//設(shè)置定時(shí)器
let id = setInterval(()=>{
//打印日志
console.info('router to Second')
//頁(yè)面跳轉(zhuǎn)
router.pushUrl({
url:'pages/Second'
})
//定時(shí)器執(zhí)行之后立即銷(xiāo)毀
clearInterval(id)
},4000,[])
})
}
.width('100%')
}
.height('100%')
}
}至此，一個(gè)關(guān)于入場(chǎng)動(dòng)畫(huà)的Demo便完成了。
預(yù)覽效果如下：
