[[383195]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

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

https://harmonyos.51cto.com

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

1、基于CSS3的動(dòng)畫效果

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

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

<image src="/common/huaWei.jpeg" class="logo"></image> 

.logo { 
    width: 300px; 
    height: 300px; 
    border-radius: 150px; 
    animation-name: an1; 
    animation-duration: 5s; 
    animation-iteration-count: 1; 
    animation-timing-function: linear; 
    animation-fill-mode: none; 
} 

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

@keyframes an1 { 
        from { 
            transform: rotate(180deg); 
            opacity: 0.3; 
        } 
        to { 
            transform: rotate(360deg); 
            opacity: 1.0; 
        } 
} 

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

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

2、基于JS的動(dòng)畫效果

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

<image src="/common/liteMall.png" class="textImg" id="textImg"></image> 

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

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

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

onShow() { 
     // 設(shè)置動(dòng)畫 
     let textImg = this.$element("textImg").animate([ 
         { 
             transform: {translateY: '200px'}, opacity: 0.1 
         }, 
         { 
             transform: {translateY: '0px'}, opacity: 1 
         } 
     ], { 
         duration: 5000, 
         easing: "linear-out-slow-in", 
         fill: "forwards", 
         iterations: 1 
     }); 
     textImg.play(); 
     ...... 
 } 

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

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

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

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

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

3、JS定時(shí)器

setTimeout()和setInterval()兩個(gè)定時(shí)函數(shù)在鴻蒙中可以無(wú)縫對(duì)接使用。

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

倒計(jì)時(shí)部分，hml視圖層：

<div class="loading"> 
    <progress type="circular"></progress> 
    <text> 
        {{ loading }} 
    </text> 
</div> 
<text class="count"> 
    {{ seconds }} 
</text> 

css渲染層：

.loading { 
    width: 100%; 
    height: 150px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
progress { 
    width: 120px; 
    height: 120px; 
} 
.loading>text { 
    font-size: 40px; 
    color: #666666; 
} 
.count { 
    position: fixed; 
    bottom: 385px; 
    left: 225px; 
    font-size: 60px; 
    color: #666666; 
} 

js邏輯層：

onShow() { 
  ...... 
      // 設(shè)置倒計(jì)時(shí) 
      let iv = setInterval(() => { 
          let suffix; 
          switch (this.seconds % 3) { 
              case 2: 
              suffix = "..."; 
              break; 
              case 1: 
              suffix = ".."; 
              break; 
              default: 
              suffix = "."; 
              break; 
          } 
          this.loading = "數(shù)據(jù)加載中" + suffix; 
          this.seconds--; 
          if (this.seconds == 0) { 
              clearInterval(iv); 
          } 
      }, 1000); 
  } 

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

onInit() { 
     // 首頁(yè)數(shù)據(jù)預(yù)加載 
     // 獲取廣告圖片 
     fetch.fetch({ 
         ...... 
     }); 
     // 獲取推薦商品 
     fetch.fetch({ 
         ...... 
     }); 
     // 獲取一級(jí)分類 
     fetch.fetch({ 
         ...... 
     }); 
 }, 
 onShow() { 
     // 設(shè)置定時(shí)跳轉(zhuǎn) 
     let to = setTimeout(() => { 
         router.replace({ 
             uri: "pages/index/index", 
             params: { 
                 ad: this.ad, 
                 newGoods: this.newGoods, 
                 hotGoods: this.hotGoods, 
                 types: this.types 
             } 
         }); 
         clearTimeout(to); 
     }, 6000); 
 ...... 
 } 

4、微信小程序的動(dòng)畫效果

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

.happy { 
  font-size: 50rpx; 
  color: #e20a0b; 
  animation-name: an1; 
  animation-duration: 5s; 
  animation-delay: 500ms; 
  animation-iteration-count: infinite; 
  animation-direction: normal; 
  animation-fill-mode: forwards; 
  animation-timing-function: linear; 
} 
@keyframes an1 { 
  from { 
    transform: translateX(0px); 
    opacity: 0.5; 
  } 
  to { 
    transform: translateX(300px); 
    opacity: 1; 
  } 
} 

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

Page({ 
 
  /** 
   * 頁(yè)面的初始數(shù)據(jù) 
   */ 
  data: { 
    an2: null 
  }, 
 
  onShow: function () { 
    let an2 = wx.createAnimation({ 
      delay: 500, 
      duration: 5000, 
      timingFunction: 'ease-in-out' 
    }); 
    an2.translate(100, 300).step(); 
    an2.rotate(90).opacity(0.1).step(); 
    this.setData({ 
      an2: an2.export() 
    }) 
  }, 
} 

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

<view class="happy" animation="{{ an2 }}"> 
  新年快樂 
</view> 

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

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

https://harmonyos.51cto.com