智慧型屏和智慧型穿戴開發 元件方法

2021-10-11 01:51:52 字數 2704 閱讀 3937

harmonyos應用開發文件更新修改說明:元件方法補充示例**和示例效果圖,方便開發者掌握元件方法的使用方式

當元件通過id屬性標識後,可以使用該id獲取元件物件並呼叫相關元件方法。

名稱引數

必填預設值

描述focus

object

格式為:

否元件請求或者取消焦點。focus為true時,表示請求焦點,focus為false時,表示取消焦點,該方法引數可預設,預設時預設請求焦點。

說明

支援focusable屬性的元件支援該方法。

rotation

object

格式為:

否元件請求或者取消旋轉錶冠焦點。focus設定為true時,表示請求錶冠事件焦點,focus設定為false時,表示取消錶冠事件焦點,該方法引數可預設,預設時預設請求旋轉錶冠焦點。

說明

僅有元件picker-view、list、slider、swiper支援該方法。

animate是-

在元件上建立和執行動畫的快捷方式。輸入動畫所需的keyframes和options,返回animation物件例項。

支援focusable屬性的元件均支援focus方法。

this.$element('id').focus();

僅有元件picker-view、list、slider、swiper支援rotation方法。

this.$element('id').rotation();

通過animate(keyframes, options)方法獲得animation物件。該物件支援動畫屬性,動畫方法和動畫事件。重複多次呼叫animate方法時,採用replace策略,最後一次呼叫時傳入的引數生效

表2transform

引數型別說明

translate/translatex/translatey

| 平移元素。

示例:translate: "250" x軸平移250px

translate: "100px 80%" x軸平移100px,y軸平移80%元件高度

translatex: "-200px" x軸平移-200px

translatey: "50%" y軸平移50%元件高度

scale/scalex/scaley

number

按比例放大或縮小元素。

示例:scale: "0.5" x軸和y軸縮小到原來的0.5倍

scale: "1.5 1.2" x軸放大1.5倍,y軸放大1.2倍

scalex: "2.0" x軸放大至原來的2倍

scaley: "0" y軸長度縮小至0

rotate/rotatex/rotatey

| 指定元素將被旋轉的角度。

示例:rotate: "180deg" 繞z軸旋轉180度

rotatex: "3.14rad" 繞x軸旋轉3.14弧度

rotatey: "-100" 繞y軸旋轉-100度

表3easing有效值說明

值描述linear

動畫線性變化。

ease-in

動畫速度先慢後快,cubic-bezier(0.42, 0.0, 1.0, 1.0)。

ease-out

動畫速度先快後慢,cubic-bezier(0.0, 0.0, 0.58, 1.0)。

ease-in-out

動畫先加速後減速,cubic-bezier(0.42, 0.0, 0.58, 1.0)。

friction

阻尼曲線,cubic-bezier(0.2, 0.0, 0.2, 1.0)。

extreme-deceleration

急緩曲線,cubic-bezier(0.0, 0.0, 0.0, 1.0)。

sharp

銳利曲線,cubic-bezier(0.33, 0.0, 0.67, 1.0)。

rhythm

節奏曲線,cubic-bezier(0.7, 0.0, 0.2, 1.0)。

smooth

平滑曲線,cubic-bezier(0.4, 0.0, 0.4, 1.0)。

cubic-bezier(x1, y1, x2, y2)

在三次貝塞爾函式中定義動畫變化過程,入參的x和y值必須處於0-1之間。

steps(number, step-position)

step曲線。

number必須設定,支援的型別為int。

step-position引數可選,支援設定start或end,預設值為end。

starttime

number

animation物件支援的方法:

方法引數

說明play

-finish

-元件完成動畫。

pause

-元件暫停動畫。

cancel

-元件取消動畫。

reverse

-元件倒播動畫。

animation物件支援的事件:

事件說明

cancel

動畫被強制取消。

finish

智慧型屏和電視的區別,智慧型屏值得買嗎?

這幾年突然冒出來乙個詞,叫做智慧型屏,像華為海信等一眾電視生產商都有做這款產品,程式設計客棧今天我就簡單地介紹一下,智慧型屏和普通電視以及智慧型電視有什麼不同,最後推薦一下目前智慧型屏電視哪個品牌好?智慧型屏和普通電視有什麼區別 我們最早看電視用的都是有線電視,電視機主要就是作為乙個顯示器的作用,通...

react中智慧型元件和木偶元件

智慧型元件和木偶元件,又叫做 smart and dumb components 當我在寫react應用的時候我發現一種老有用而且簡單的寫法了。要是你寫了一段時間react的話。我估摸著你也應該發現了這種寫法了。這篇文章 下次我就翻譯這片文章 就說的很好,但是捏,我還想多差兩句嘴 你要是把你的元件分...

榮耀智慧型屏x1和榮耀智慧型屏pro的區別 哪個好

榮耀智慧型屏x1系列整體設計採用至簡風格,流行的三向全面設計,屏佔比達94 邊框為塑料材質,底座為金屬材質。螢幕下方為榮耀logo,下面是6mic陣列的遠場語音拾音模組。背面採用大面積塑料,擁有豐富的紋理設計,並且融入了榮耀logo。榮耀智慧型屏x1更多使用感受和評價 需要注意的是,榮耀智慧型屏x1...