日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
從微信小程序到鴻蒙JS開發(fā)-CSS3動畫&JS動畫&定時器

想了解更多內(nèi)容，請訪問：

創(chuàng)新互聯(lián)建站為客戶提供專業(yè)的成都網(wǎng)站設(shè)計、網(wǎng)站制作、程序、域名、空間一條龍服務(wù)，提供基于WEB的系統(tǒng)開發(fā). 服務(wù)項目涵蓋了網(wǎng)頁設(shè)計、網(wǎng)站程序開發(fā)、WEB系統(tǒng)開發(fā)、微信二次開發(fā)、成都做手機網(wǎng)站等網(wǎng)站方面業(yè)務(wù)。

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.

在進入APP時，通常都會有一個歡迎界面，用于展示APP的名稱、logo，并預(yù)先加載部分數(shù)據(jù)。既然是歡迎頁面，自然少不了一些動畫元素。簡單運用了CSS3和JS的動畫效果，progress組件以及倒計時擼了一個歡迎頁面。直接上效果：

1、基于CSS3的動畫效果

1.1 給動畫元素設(shè)置animation屬性。

  • animation-name：動畫名
  • animation-duration：動畫持續(xù)時間
  • animation-delay：動畫開始前延遲時間
  • animation-iteration-count：動畫重復(fù)次數(shù)
  • animation-timing-function：動畫執(zhí)行速度
  • animation-fill-mode：動畫模式
 
 
 
 
    
  
  
  
  
    2. 
 
 
 
 

 
 
 
 
    
  
  
  
  
  1. .logo {
    2. 
  
  
  
  
  2.     width: 300px;
    3. 
  
  
  
  
  3.     height: 300px;
    4. 
  
  
  
  
  4.     border-radius: 150px;
    5. 
  
  
  
  
  5.     animation-name: an1;
    6. 
  
  
  
  
  6.     animation-duration: 5s;
    7. 
  
  
  
  
  7.     animation-iteration-count: 1;
    8. 
  
  
  
  
  8.     animation-timing-function: linear;
    9. 
  
  
  
  
  9.     animation-fill-mode: none;
    10. 
  
  
  
  
  10. }
    11.

1.2 用"@keyframes 動畫名"匹配設(shè)置動畫規(guī)則。

 
 
 
 
    
  
  
  
  
  1. @keyframes an1 {
    2. 
  
  
  
  
  2.         from {
    3. 
  
  
  
  
  3.             transform: rotate(180deg);
    4. 
  
  
  
  
  4.             opacity: 0.3;
    5. 
  
  
  
  
  5.         }
    6. 
  
  
  
  
  6.         to {
    7. 
  
  
  
  
  7.             transform: rotate(360deg);
    8. 
  
  
  
  
  8.             opacity: 1.0;
    9. 
  
  
  
  
  9.         }
    10. 
  
  
  
  
  10. }
    11.

除from，to外，還可以使用百分比（如20%{...})方式設(shè)置動畫途中的效果。

以上兩步，就實現(xiàn)了gif圖中HUAWEI的logo旋轉(zhuǎn)和逐漸清晰的動畫效果。

2、基于JS的動畫效果

2.1 動畫元素給定id/ref等可以用于元素匹配的屬性。

 
 
 
 
    
  
  
  
  
    2.

2.2 在onShow()方法中獲取元素實例，并用animate()方法給定動畫規(guī)則和基本屬性。注意這一步在onInit()和onReady()中執(zhí)行是沒有效果的。

animate()接受兩個參數(shù)，第一個為數(shù)組，指定動畫的關(guān)鍵幀效果。第二個為對象，指定動畫的基本屬性。

2.3 調(diào)用play()方法開始動畫執(zhí)行。

 
 
 
 
    
  
  
  
  
  1. onShow() {
    2. 
  
  
  
  
  2.      // 設(shè)置動畫
    3. 
  
  
  
  
  3.      let textImg = this.$element("textImg").animate([
    4. 
  
  
  
  
  4.          {
    5. 
  
  
  
  
  5.              transform: {translateY: '200px'}, opacity: 0.1
    6. 
  
  
  
  
  6.          },
    7. 
  
  
  
  
  7.          {
    8. 
  
  
  
  
  8.              transform: {translateY: '0px'}, opacity: 1
    9. 
  
  
  
  
  9.          }
    10. 
  
  
  
  
  10.      ], {
    11. 
  
  
  
  
  11.          duration: 5000,
    12. 
  
  
  
  
  12.          easing: "linear-out-slow-in",
    13. 
  
  
  
  
  13.          fill: "forwards",
    14. 
  
  
  
  
  14.          iterations: 1
    15. 
  
  
  
  
  15.      });
    16. 
  
  
  
  
  16.      textImg.play();
    17. 
  
  
  
  
  17.      ......
    18. 
  
  
  
  
  18.  }
    19.

這個方法在開發(fā)者文檔中未找到說明，但證實可用，且IDE也是有提示的。

transform其中的key輸入?yún)s是沒有提示了。

這里寫完后會有紅線說缺少屬性，但運行是沒問題的，可以忽略。如果看著難受可以把數(shù)組單獨聲明為一個變量，再作為animate()方法入?yún)ⅰ?/p>

以上三步，就實現(xiàn)了gif圖中"litemall"字樣從下方上移并逐漸清晰的動畫效果。

對比CSS3的動畫技術(shù)，使用JS實現(xiàn)動畫會更有靈活性?？梢栽趏nShow()中定義動畫，在用戶進行一定操作后再執(zhí)行。CSS3的只能在頁面顯示后一定時間執(zhí)行，但可以用百分比的形式定義更豐富的動畫漸變效果。

3、JS定時器

setTimeout()和setInterval()兩個定時函數(shù)在鴻蒙中可以無縫對接使用。

gif圖中的倒計時使用setInterval()實現(xiàn)每1秒倒數(shù)一個數(shù)并改變省略號的個數(shù)，在倒數(shù)到0時清除定時器。為防止僵尸線程影響性能，切記調(diào)用clearTimeout()和clearInterval()清除掉定時器。

倒計時部分，hml視圖層：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.         {{ loading }}
    5. 
  
  
  
  
  5.     
    6.
  •     {{ seconds }}

  • css渲染層：

     
 
 
 
      
  
  
  
  
    1. .loading {
      2. 
  
  
  
  
    2.     width: 100%;
      3. 
  
  
  
  
    3.     height: 150px;
      4. 
  
  
  
  
    4.     display: flex;
      5. 
  
  
  
  
    5.     justify-content: center;
      6. 
  
  
  
  
    6.     align-items: center;
      7. 
  
  
  
  
    7. }
      8. 
  
  
  
  
    8. progress {
      9. 
  
  
  
  
    9.     width: 120px;
      10. 
  
  
  
  
    10.     height: 120px;
      11. 
  
  
  
  
    11. }
      12. 
  
  
  
  
    12. .loading>text {
      13. 
  
  
  
  
    13.     font-size: 40px;
      14. 
  
  
  
  
    14.     color: #666666;
      15. 
  
  
  
  
    15. }
      16. 
  
  
  
  
    16. .count {
      17. 
  
  
  
  
    17.     position: fixed;
      18. 
  
  
  
  
    18.     bottom: 385px;
      19. 
  
  
  
  
    19.     left: 225px;
      20. 
  
  
  
  
    20.     font-size: 60px;
      21. 
  
  
  
  
    21.     color: #666666;
      22. 
  
  
  
  
    22. }
      23.

    js邏輯層：

     
 
 
 
      
  
  
  
  
    1. onShow() {
      2. 
  
  
  
  
    2.   ......
      3. 
  
  
  
  
    3.       // 設(shè)置倒計時
      4. 
  
  
  
  
    4.       let iv = setInterval(() => {
      5. 
  
  
  
  
    5.           let suffix;
      6. 
  
  
  
  
    6.           switch (this.seconds % 3) {
      7. 
  
  
  
  
    7.               case 2:
      8. 
  
  
  
  
    8.               suffix = "...";
      9. 
  
  
  
  
    9.               break;
      10. 
  
  
  
  
    10.               case 1:
      11. 
  
  
  
  
    11.               suffix = "..";
      12. 
  
  
  
  
    12.               break;
      13. 
  
  
  
  
    13.               default:
      14. 
  
  
  
  
    14.               suffix = ".";
      15. 
  
  
  
  
    15.               break;
      16. 
  
  
  
  
    16.           }
      17. 
  
  
  
  
    17.           this.loading = "數(shù)據(jù)加載中" + suffix;
      18. 
  
  
  
  
    18.           this.seconds--;
      19. 
  
  
  
  
    19.           if (this.seconds == 0) {
      20. 
  
  
  
  
    20.               clearInterval(iv);
      21. 
  
  
  
  
    21.           }
      22. 
  
  
  
  
    22.       }, 1000);
      23. 
  
  
  
  
    23.   }
      24.

    頁面會在動畫播放完成后跳轉(zhuǎn)到商城首頁，使用setTimeout()設(shè)置定時跳轉(zhuǎn)即可。這里在播放動畫時預(yù)加載了首頁需要的數(shù)據(jù)，作為頁面參數(shù)跳轉(zhuǎn)，可以加快商城頁的展示速度，提升用戶體驗。

     
 
 
 
      
  
  
  
  
    1. onInit() {
      2. 
  
  
  
  
    2.      // 首頁數(shù)據(jù)預(yù)加載
      3. 
  
  
  
  
    3.      // 獲取廣告圖片
      4. 
  
  
  
  
    4.      fetch.fetch({
      5. 
  
  
  
  
    5.          ......
      6. 
  
  
  
  
    6.      });
      7. 
  
  
  
  
    7.      // 獲取推薦商品
      8. 
  
  
  
  
    8.      fetch.fetch({
      9. 
  
  
  
  
    9.          ......
      10. 
  
  
  
  
    10.      });
      11. 
  
  
  
  
    11.      // 獲取一級分類
      12. 
  
  
  
  
    12.      fetch.fetch({
      13. 
  
  
  
  
    13.          ......
      14. 
  
  
  
  
    14.      });
      15. 
  
  
  
  
    15.  },
      16. 
  
  
  
  
    16.  onShow() {
      17. 
  
  
  
  
    17.      // 設(shè)置定時跳轉(zhuǎn)
      18. 
  
  
  
  
    18.      let to = setTimeout(() => {
      19. 
  
  
  
  
    19.          router.replace({
      20. 
  
  
  
  
    20.              uri: "pages/index/index",
      21. 
  
  
  
  
    21.              params: {
      22. 
  
  
  
  
    22.                  ad: this.ad,
      23. 
  
  
  
  
    23.                  newGoods: this.newGoods,
      24. 
  
  
  
  
    24.                  hotGoods: this.hotGoods,
      25. 
  
  
  
  
    25.                  types: this.types
      26. 
  
  
  
  
    26.              }
      27. 
  
  
  
  
    27.          });
      28. 
  
  
  
  
    28.          clearTimeout(to);
      29. 
  
  
  
  
    29.      }, 6000);
      30. 
  
  
  
  
    30.  ......
      31. 
  
  
  
  
    31.  }
      32.

    4、微信小程序的動畫效果

    最后寫一寫微信小程序的動畫實現(xiàn)，在wxss中同樣支持CSS3的動畫屬性：

     
 
 
 
      
  
  
  
  
    1. .happy {
      2. 
  
  
  
  
    2.   font-size: 50rpx;
      3. 
  
  
  
  
    3.   color: #e20a0b;
      4. 
  
  
  
  
    4.   animation-name: an1;
      5. 
  
  
  
  
    5.   animation-duration: 5s;
      6. 
  
  
  
  
    6.   animation-delay: 500ms;
      7. 
  
  
  
  
    7.   animation-iteration-count: infinite;
      8. 
  
  
  
  
    8.   animation-direction: normal;
      9. 
  
  
  
  
    9.   animation-fill-mode: forwards;
      10. 
  
  
  
  
    10.   animation-timing-function: linear;
      11. 
  
  
  
  
    11. }
      12. 
  
  
  
  
    12. @keyframes an1 {
      13. 
  
  
  
  
    13.   from {
      14. 
  
  
  
  
    14.     transform: translateX(0px);
      15. 
  
  
  
  
    15.     opacity: 0.5;
      16. 
  
  
  
  
    16.   }
      17. 
  
  
  
  
    17.   to {
      18. 
  
  
  
  
    18.     transform: translateX(300px);
      19. 
  
  
  
  
    19.     opacity: 1;
      20. 
  
  
  
  
    20.   }
      21. 
  
  
  
  
    21. }
      22.

    微信小程序的動畫JS實現(xiàn)方式和鴻蒙有很大不同，是通過微信提供的API定義并實現(xiàn)動畫。接口提供了豐富的方法，可在開發(fā)者文檔查閱。

     
 
 
 
      
  
  
  
  
    1. Page({
      2. 
  
  
  
  
    2. 
  
  
  
  
    3.   /**
      4. 
  
  
  
  
    4.    * 頁面的初始數(shù)據(jù)
      5. 
  
  
  
  
    5.    */
      6. 
  
  
  
  
    6.   data: {
      7. 
  
  
  
  
    7.     an2: null
      8. 
  
  
  
  
    8.   },
      9. 
  
  
  
  
    9. 
  
  
  
  
    10.   onShow: function () {
      11. 
  
  
  
  
    11.     let an2 = wx.createAnimation({
      12. 
  
  
  
  
    12.       delay: 500,
      13. 
  
  
  
  
    13.       duration: 5000,
      14. 
  
  
  
  
    14.       timingFunction: 'ease-in-out'
      15. 
  
  
  
  
    15.     });
      16. 
  
  
  
  
    16.     an2.translate(100, 300).step();
      17. 
  
  
  
  
    17.     an2.rotate(90).opacity(0.1).step();
      18. 
  
  
  
  
    18.     this.setData({
      19. 
  
  
  
  
    19.       an2: an2.export()
      20. 
  
  
  
  
    20.     })
      21. 
  
  
  
  
    21.   },
      22. 
  
  
  
  
    22. }
      23.

    動畫基本屬性作為createAnimation()方法的入?yún)?，動畫關(guān)鍵幀由一連串的方法流式操作給出，以step()結(jié)束。這里一個動畫的執(zhí)行的時間是duration給定的時間。動畫對象需使用export()導(dǎo)出到data中，并和頁面元素的animation屬性綁定。

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   新年快樂
      3. 
  
  
  
  
    3.

    想了解更多內(nèi)容，請訪問：

    和華為官方合作共建的鴻蒙技術(shù)社區(qū)

    https://harmonyos.


    網(wǎng)站標(biāo)題：從微信小程序到鴻蒙JS開發(fā)-CSS3動畫&JS動畫&定時器
    文章鏈接：http://www.dlmjj.cn/article/cdpceoh.html