組件內(nèi)轉(zhuǎn)場動畫

2024-02-07 12:42 更新

組件的插入、刪除過程即為組件本身的轉(zhuǎn)場過程,組件的插入、刪除動畫稱為組件內(nèi)轉(zhuǎn)場動畫。通過組件內(nèi)轉(zhuǎn)場動畫,可定義組件出現(xiàn)、消失的效果。

組件內(nèi)轉(zhuǎn)場動畫的接口為:

  1. transition(value: TransitionOptions)

transition函數(shù)的入?yún)榻M件內(nèi)轉(zhuǎn)場的效果,可以定義平移、透明度、旋轉(zhuǎn)、縮放這幾種轉(zhuǎn)場樣式的單個或者組合的轉(zhuǎn)場效果,必須和animateTo一起使用才能產(chǎn)生組件轉(zhuǎn)場效果。

transition常見用法

type用于指定當前的transition動效生效在組件的變化場景,類型為TransitionType

  • 組件的插入、刪除使用同一個動畫效果
    1. Button()
    2. .transition({ type: TransitionType.All, scale: { x: 0, y: 0 } })

    當type屬性為TransitionType.All時,表示指定轉(zhuǎn)場動效生效在組件的所有變化(插入和刪除)場景。此時,刪除動畫和插入動畫是相反的過程,刪除動畫是插入動畫的逆播。例如,以上代碼定義了一個Button控件。在插入時,組件從scale的x、y均為0的狀態(tài),變化到scale的x、y均為1(即完整顯示)的默認狀態(tài),以逐漸放大的方式出現(xiàn)。在刪除時,組件從scale的x、y均為1的默認狀態(tài),變化到指定的scale的x、y均為0的狀態(tài),逐漸縮小至尺寸為0。

  • 組件的插入、刪除使用不同的動畫效果
    1. Button()
    2. .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 }, opacity: 0 })
    3. .transition({ type: TransitionType.Delete, rotate: { x: 0, y: 0, z: 1, angle: 360 } })

    當組件的插入和刪除需要實現(xiàn)不同的轉(zhuǎn)場動畫效果時,可以調(diào)用兩次transition函數(shù),分別設置type屬性為TransitionType.Insert和TransitionType.Delete。例如,以上代碼定義了一個Button控件。在插入時,組件從相對于組件正常布局位置x方向平移200vp、y方向平移-200vp的位置、透明度為0的初始狀態(tài),變化到x、y方向平移量為0、透明度為1的默認狀態(tài),插入動畫為平移動畫和透明度動畫的組合。在刪除時,組件從旋轉(zhuǎn)角為0的默認狀態(tài),變化到繞z軸旋轉(zhuǎn)360度的終止狀態(tài),即繞z軸旋轉(zhuǎn)一周。

  • 只定義組件的插入或刪除其中一種動畫效果。
    1. Button()
    2. .transition({ type: TransitionType.Delete, translate: { x: 200, y: -200 } })

    當只需要組件的插入或刪除的轉(zhuǎn)場動畫效果時,僅需設置type屬性為TransitionType.Insert或TransitionType.Delete的transition效果。例如,以上代碼定義了一個Button控件。刪除時,組件從正常位置、沒有平移的默認狀態(tài),變化到從相對于正常布局位置x方向平移200vp、y方向平移-200vp的位置的狀態(tài)。插入該組件并不會產(chǎn)生該組件的轉(zhuǎn)場動畫。

if/else產(chǎn)生組件內(nèi)轉(zhuǎn)場動畫

if/else語句可以控制組件的插入和刪除。如下代碼即可通過Button的點擊事件,控制if的條件是否滿足,來控制if下的Image組件是否顯示。

  1. @Entry
  2. @Component
  3. struct IfElseTransition {
  4. @State flag: boolean = true;
  5. @State show: string = 'show';
  6. build() {
  7. Column() {
  8. Button(this.show).width(80).height(30).margin(30)
  9. .onClick(() => {
  10. if (this.flag) {
  11. this.show = 'hide';
  12. } else {
  13. this.show = 'show';
  14. }
  15. // 點擊Button控制Image的顯示和消失
  16. this.flag = !this.flag;
  17. })
  18. if (this.flag) {
  19. Image($r('app.media.mountain')).width(200).height(200)
  20. }
  21. }.height('100%').width('100%')
  22. }
  23. }

以上代碼沒有配置任何動畫。接下來,我們將給以上代碼加入組件內(nèi)轉(zhuǎn)場的效果。首先Image組件是由if控制的組件,需要給其加上transition的參數(shù),以指定組件內(nèi)轉(zhuǎn)場的具體效果。例如,可以如以下代碼,給其插入時加上平移效果,刪除時加上縮放和透明度效果。

  1. if (this.flag) {
  2. Image($r('app.media.mountain')).width(200).height(200)
  3. .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 } })
  4. .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })
  5. }

以上代碼雖然指定了動畫的樣式,但是未指定動畫參數(shù),尚不知道需要用多長時間、怎樣的曲線完成該動畫。transition必須配合animateTo一起使用,并在animateTo的閉包中,控制組件的插入、刪除。對于以上示例代碼,即為在animateTo閉包中改變flag的值,該部分代碼如下所示。指定動畫時長為1000ms,曲線使用animateTo函數(shù)默認的曲線,改變flag的值。則由flag變化所引起的一切變化,都會按照該動畫參數(shù),產(chǎn)生動畫。在這里,flag會影響Image的出現(xiàn)和消失。

  1. animateTo({ duration: 1000 }, () => {
  2. this.flag = !this.flag;
  3. })

經(jīng)過以上過程,當animateTo和transition一起使用時,即產(chǎn)生了組件內(nèi)轉(zhuǎn)場動畫。完整示例代碼如下:

  1. @Entry
  2. @Component
  3. struct IfElseTransition {
  4. @State flag: boolean = true;
  5. @State show: string = 'show';
  6. build() {
  7. Column() {
  8. Button(this.show).width(80).height(30).margin(30)
  9. .onClick(() => {
  10. if (this.flag) {
  11. this.show = 'hide';
  12. } else {
  13. this.show = 'show';
  14. }
  15. animateTo({ duration: 1000 }, () => {
  16. // 動畫閉包內(nèi)控制Image組件的出現(xiàn)和消失
  17. this.flag = !this.flag;
  18. })
  19. })
  20. if (this.flag) {
  21. // Image的出現(xiàn)和消失配置為不同的過渡效果
  22. Image($r('app.media.mountain')).width(200).height(200)
  23. .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 } })
  24. .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })
  25. }
  26. }.height('100%').width('100%')
  27. }
  28. }

說明

當配置transition的效果為translate或scale時,本身位置疊加上平移或放大倍數(shù)后,動畫過程中有可能超過父組件的范圍。如果超出父組件的范圍時,希望子組件完整的顯示,那么可以設置父組件的clip屬性為false,使父組件不對子組件產(chǎn)生裁剪。如果超出父組件的范圍時,希望超出的子組件部分不顯示,那么可以設置父組件的clip屬性為true,裁剪掉子組件超出的部分。

ForEach產(chǎn)生組件內(nèi)轉(zhuǎn)場動畫

和if/else類似,F(xiàn)orEach可以通過控制數(shù)組中的元素個數(shù),來控制組件的插入和刪除。通過ForEach來產(chǎn)生組件內(nèi)轉(zhuǎn)場動畫,仍然需要兩個條件:

  • ForEach里的組件配置了transition效果。
  • 在animateTo的閉包中控制組件的插入或刪除,即控制數(shù)組的元素添加和刪除。

以下代碼是使用ForEach產(chǎn)生組件內(nèi)轉(zhuǎn)場動畫的一個示例。

  1. @Entry
  2. @Component
  3. struct ForEachTransition {
  4. @State numbers: string[] = ["1", "2", "3", "4", "5"]
  5. startNumber: number = 6;
  6. build() {
  7. Column({ space: 10 }) {
  8. Column() {
  9. ForEach(this.numbers, (item) => {
  10. // ForEach下的直接組件需配置transition效果
  11. Text(item)
  12. .width(240)
  13. .height(60)
  14. .fontSize(18)
  15. .borderWidth(1)
  16. .backgroundColor(Color.Orange)
  17. .textAlign(TextAlign.Center)
  18. .transition({ type: TransitionType.All, translate: { x: 200 }, scale: { x: 0, y: 0 } })
  19. }, item => item)
  20. }
  21. .margin(10)
  22. .justifyContent(FlexAlign.Start)
  23. .alignItems(HorizontalAlign.Center)
  24. .width("90%")
  25. .height("70%")
  26. Button('向頭部添加元素')
  27. .fontSize(16)
  28. .width(160)
  29. .onClick(() => {
  30. animateTo({ duration: 1000 }, () => {
  31. // 往數(shù)組頭部插入一個元素,導致ForEach在頭部增加對應的組件
  32. this.numbers.unshift(this.startNumber.toString());
  33. this.startNumber++;
  34. })
  35. })
  36. Button('向尾部添加元素')
  37. .width(160)
  38. .fontSize(16)
  39. .onClick(() => {
  40. animateTo({ duration: 1000 }, () => {
  41. // 往數(shù)組尾部插入一個元素,導致ForEach在尾部增加對應的組件
  42. this.numbers.push(this.startNumber.toString());
  43. this.startNumber++;
  44. })
  45. })
  46. Button('刪除頭部元素')
  47. .width(160)
  48. .fontSize(16)
  49. .onClick(() => {
  50. animateTo({ duration: 1000 }, () => {
  51. // 刪除數(shù)組的頭部元素,導致ForEach刪除頭部的組件
  52. this.numbers.shift();
  53. })
  54. })
  55. Button('刪除尾部元素')
  56. .width(160)
  57. .fontSize(16)
  58. .onClick(() => {
  59. animateTo({ duration: 1000 }, () => {
  60. // 刪除數(shù)組的尾部元素,導致ForEach刪除尾部的組件
  61. this.numbers.pop();
  62. })
  63. })
  64. }
  65. .width('100%')
  66. .height('100%')
  67. }
  68. }

效果如下圖:

由于Column布局方式設為了FlexAlign.Start,即豎直方向從頭部開始布局。所以往數(shù)組末尾添加元素時,并不會對數(shù)組中現(xiàn)存元素對應的組件位置造成影響,只會觸發(fā)新增組件的插入動畫。而往數(shù)組頭部添加元素時,原來數(shù)組中的所有元素的下標都增加了,雖然不會觸發(fā)其添加或者刪除,但是會影響到對應組件的位置。所以除新增的組件會做transition動畫以外,之前存在于ForEach中組件也會做位置動畫。

說明

if/else、ForEach為語法節(jié)點,配置組件內(nèi)轉(zhuǎn)場效果的組件應直接作為語法節(jié)點的孩子。由語法節(jié)點的增刪引起的組件增刪,只能觸發(fā)其直接孩子組件的組件內(nèi)轉(zhuǎn)場動畫,開發(fā)者不應期望其對更深層次的組件產(chǎn)生組件轉(zhuǎn)場動畫。

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號