小米官宣：2023年上半年出貨量中國第一！
今日早間，小米電視官方微博帶來消息，稱2023年小米電視上半年出貨量達到了中國第一，同時還表示小米電視的巨屏風暴即將開始?！肮家粋€好消息2023年#小米電視上半年出貨量中國
想了解更多關于開源的內容，請訪問：
51CTO 開源基礎軟件社區
https://ost.51cto.com
相信讀者對應用入場動畫并不陌生。當用戶打開某個應用時，應用得到響應，與此同時其在屏幕中所渲染的第一個畫面通常是它的入場動畫。當然，應用響應后所拋出的不一定是動畫，它也可以是一個靜態的頁面，不過不論是動畫還是靜態頁面，它們所起到的功能是相同的——在后臺完成應用中的重要模塊的初始化，貼出開發團隊的slogen，亦或展示一些甲方的產品推廣廣告。
本期筆者將以一個輕量Demo的開發流程為例，與筆者共同探索如何利于ArkTS生產應用的入場動畫。
打開DevEco Studio(開發工具的版本必須支持API9)，創建一個新的project，相關勾選如下：
成功創建工程后，在工程文件目錄中打開目錄：Demo/entry/src/main/ets/pages, 接著右擊page，選擇New>TypeScript ArkTS File, 創建一個新的ArkTS文件，并將其命名為Second
接著，在工程文件目錄中打開目錄：Demo/entry/src/resources/base/profile/main_pages，添加Second頁面的路徑信息。注意，字符串'pages/Index’后面的逗號不能漏寫。
在編輯器中打開新創建的Second.ets，添加如下代碼：
@Entry@Componentstruct Index { @State message: string = '主頁面' build() { Row() { Column() { Text(this.message) .fontSize(40) .fontWeight(FontWeight.Bold) } .width('100%') } .height('100%') .backgroundColor('#F1F1F1') }}事實上，這段代碼來自于Index.ets, 我們只不過是將Index.ets的代碼拷貝至Second.ets中后，修改了變量message的初值，并更換了頁面的背景色。由于Second.ets所管理的頁面在此次的開發案例中不是主角，所以我們簡單設計一下它的UI就足夠了。
Second.ets的最終預覽效果如下：
Before coding，我們需要添加一份圖片資源到工程的指定目錄內。
在工程文件目錄中打開目錄：Demo/entry/src/main/resources/rawfile, 添加一張任意的圖片(可以在IDE中將待添加的圖片資源直接粘貼至rawfile目錄下，也可以在文件資源管理器中通過文件路徑打開rawfile目錄并添加圖片資源)，將其命名為logo1。當然，圖片的格式沒有要求，只要在之后的步驟中能被正確引用即可。
在編輯器中打開Index.ets（此頁面將作為入場頁面）, 刪除Column組件內關于Text組件的代碼塊，增添一個新的Image件和一個新的Text組件，并填充它們的UI屬性，相關代碼如下。其中，新增的Image組件所引用的圖片資源是上一個步驟中所添加的logo1.jpg。
@Entry@Componentstruct First { @State message: string = 'Hello World' build() { Row() { Column() { //刪除頁面初始化時默認帶有的Text組件, 增加一個新的image件和一個新的Text組件 Image($rawfile('logo1.jpg')) .height(120) .width(120) Text('Brunhild') .fontSize(20) .fontWeight(FontWeight.Bold) .margin({ top:7 }) } .width('100%') } .height('100%') }}預覽器效果如下：
至此，我們已完成對Index.ets的頁面UI繪制。接下來，我們需要為這兩個新添的組件設置與屬性動畫有關的屬性。屬性動畫（animation）是ArkUI提供的最基礎和常用的動畫功能之一，它的功能邏輯是，當組件的布局屬性(譬如位置，大小，背景顏色)發生變化時，組件會按照已設置好的動畫參數，從原有的布局狀態過渡到變化后的布局狀態，而這個過渡的擬連續過程便是用戶所見到的動畫。在這個基礎上，我們可以制作一個簡單的應用入場動畫效果。
所涉及的兩個重要屬性分別是translate屬性和animation屬性。
事實上，系統為每個被渲染的組件都設置屬于它的相對坐標系。這個坐標系是一個平面直角坐標系，并且，相對于屏幕，X坐標軸正方向水平向右，Y坐標軸正方向豎直向下。當一個組件的translate屬性被設置時，它的實際位置會跟著translate屬性而偏移。比如，一個原本位于屏幕中央的組件，更改其translate屬性為{x:100,y:0}后，其位置會相對屏幕中央往右平移100px。
animation屬性的可供設置的參數如下所示，每個參數都會在不同維度影響動畫的最終效果。
/** * 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;接下來，我們為組件添加關鍵屬性。
首先，定義變量 translateY_Logo，同時設置Image組件的translate屬性和animation屬性。
@Entry@Componentstruct First { ...... @State translateY_Logo:number = -200 //定義一個用@state修飾的number型變量translateY_Logo build() { Row() { Column() { //刪除頁面初始化時默認帶有的Text組件, 增加一個新的image件和一個新的Text組件 Image($rawfile('logo1.jpg')) .height(120) .width(120) //添加關鍵屬性 .translate({ y:this.translateY_Logo }) .animation({ //播放時長（ms） duration:2000, //播放速度 tempo:1, //播放曲線，所選擇的是‘快出慢入’ curve:Curve.FastOutSlowIn, //延遲（ms） delay:500, //循環次數（-1為無限循環） iterations:1, //播放模式 playMode:PlayMode.Normal }) ...... } .width('100%') } .height('100%') }}接著，定義變量 translateY_Title，同時設置Text組件的translate屬性和animation屬性。
@Entry@Componentstruct First { ...... @State translateY_Title:number = 200 //定義一個用@state修飾的number型變量translateY_Title build() { Row() { Column() { //刪除頁面初始化時默認帶有的Text組件, 增加一個新的image件和一個新的Text組件 ...... Text('Brunhild') .fontSize(20) .fontWeight(FontWeight.Bold) .margin({ top:7 }) //添加關鍵屬性 .translate({ y:this.translateY_Title }) .animation({ delay:500, duration:2000, curve:Curve.FastOutSlowIn, tempo:1, }) } .width('100%') } .height('100%') }}頁面起始狀態的效果如下，可以看到，設置translate屬性后，Image組件往Y軸負方向偏移，Text組件則往Y軸正方向偏移。
最后，我們為Text組件添加onAppear回調。onAppear可以被理解為一個事件監聽器，當一個綁定了onAppear的組件裝載于顯示器時，onAppear回調將被觸發，執行onAppear（）中所傳入的操作語句。換句話說，Text組件在添加onAppear屬性后，當此Text組件出現時(筆者也不清楚這個出現是如何定義的)，onAppear立即觸發，執行已寫入的函數參數（即λ表達式中的內容）。
在如下代碼中，筆者為Text組件增加了onAppear回調，導入了router模塊，并寫入了相關操作語句：首先，改變Image組件和Text組件的translate屬性，激活屬性動畫；之后，設置定時器（每4秒執行一次），使得系統在屬性動畫結束后執行頁面跳轉(跳轉至Second頁面)；最后，銷毀先前設置的定時器。
import router from '@ohos.router'; //導入router模塊@Entry@Componentstruct First { ...... @State translateY_Title:number = 200 //定義一個用@state修飾的number型變量translateY_Title build() { Row() { Column() { //刪除頁面初始化時默認帶有的Text組件, 增加一個新的image件和一個新的Text組件 ...... Text('Brunhild') .fontSize(20) .fontWeight(FontWeight.Bold) .margin({ top:7 }) //添加關鍵屬性 .translate({ y:this.translateY_Title }) .animation({ delay:500, duration:2000, curve:Curve.FastOutSlowIn, tempo:1, }) //增加onAppear回調 .onAppear(()=>{ //改變屬性參數 this.translateY_Logo = 0 this.translateY_Title = 0 //設置定時器 let id = setInterval(()=>{ //打印日志 console.info('router to Second') //頁面跳轉 router.pushUrl({ url:'pages/Second' }) //定時器執行之后立即銷毀 clearInterval(id) },4000,[]) }) } .width('100%') } .height('100%') }}至此，一個關于入場動畫的Demo便完成了。
預覽效果如下：
ArkTS的動畫開發無疑是非常有趣的，如果讀者想開發更加復雜的動畫效果，不妨參考ArkTS的官方API文檔，學習和玩轉更多新奇的用法。
文章相關附件可以點擊下面的原文鏈接前往下載：
https://ost.51cto.com/resource/3050
想了解更多關于開源的內容，請訪問：
51CTO 開源基礎軟件社區
https://ost.51cto.com
本文鏈接：http://www.tebozhan.com/showinfo-26-13676-0.html基于ArkTS的應用入場動畫
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 面試中如何答好：FutureTask
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號