從微信小程序到鴻蒙js開發【10】——CSS3動畫&JS動畫&定時器

目錄：css

在進入APP時，一般都會有一個歡迎界面，用於展現APP的名稱、logo，並預先加載部分數據。既然是歡迎頁面，天然少不了一些動畫元素。簡單運用了CSS3和JS的動畫效果，progress組件以及倒計時擼了一個歡迎頁面。直接上效果：xss

一、基於CSS3的動畫效果函數

1.1 給動畫元素設置animation屬性。post

animation-name：動畫名
animation-duration：動畫持續時間
animation-delay：動畫開始前延遲時間
animation-iteration-count：動畫重複次數
animation-timing-function：動畫執行速度
animation-fill-mode：動畫模式

<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 動畫名"匹配設置動畫規則。性能

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

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

以上兩步，就實現了gif圖中HUAWEI的logo旋轉和逐漸清晰的動畫效果。

二、基於JS的動畫效果

2.1 動畫元素給定id/ref等能夠用於元素匹配的屬性。

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

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

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

2.3 調用play()方法開始動畫執行。

onShow() {
        // 設置動畫
        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();
        ......
    }

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

transform其中的key輸入倒是沒有提示了。

這裏寫完後會有紅線說缺乏屬性，但運行是沒問題的，能夠忽略。若是看着難受能夠把數組單獨聲明爲一個變量，再做爲animate()方法入參。

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

對比CSS3的動畫技術，使用JS實現動畫會更有靈活性。能夠在onShow()中定義動畫，在用戶進行必定操做後再執行。CSS3的只能在頁面顯示後必定時間執行，但能夠用百分比的形式定義更豐富的動畫漸變效果。

三、JS定時器

setTimeout()和setInterval()兩個定時函數在鴻蒙中能夠無縫對接使用。

gif圖中的倒計時使用setInterval()實現每1秒倒數一個數並改變省略號的個數，在倒數到0時清除定時器。爲防止殭屍線程影響性能，切記調用clearTimeout()和clearInterval()清除掉定時器。

倒計時部分，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() {
    ......
        // 設置倒計時
        let iv = setInterval(() => {
            let suffix;
            switch (this.seconds % 3) {
                case 2:
                suffix = "...";
                break;
                case 1:
                suffix = "..";
                break;
                default:
                suffix = ".";
                break;
            }
            this.loading = "數據加載中" + suffix;
            this.seconds--;
            if (this.seconds == 0) {
                clearInterval(iv);
            }
        }, 1000);
    }

頁面會在動畫播放完成後跳轉到商城首頁，使用setTimeout()設置定時跳轉便可。這裏在播放動畫時預加載了首頁須要的數據，做爲頁面參數跳轉，能夠加快商城頁的展現速度，提高用戶體驗。

onInit() {
        // 首頁數據預加載
        // 獲取廣告圖片
        fetch.fetch({
            ......
        });
        // 獲取推薦商品
        fetch.fetch({
            ......
        });
        // 獲取一級分類
        fetch.fetch({
            ......
        });
    },
    onShow() {
        // 設置定時跳轉
        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);
    ......
    }

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

最後寫一寫微信小程序的動畫實現，在wxss中一樣支持CSS3的動畫屬性：

.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;
  }
}

需注意的是animation-name屬性IDE的提示是帶有雙引號的，須要去除，不然不起效果。

微信小程序的動畫JS實現方式和鴻蒙有很大不一樣，是經過微信提供的API定義並實現動畫。接口提供了豐富的方法，可在開發者文檔查閱。

Page({

  /**
   * 頁面的初始數據
   */
  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()
    })
  },
}

動畫基本屬性做爲createAnimation()方法的入參，動畫關鍵幀由一連串的方法流式操做給出，以step()結束。這裏一個動畫的執行的時間是duration給定的時間。動畫對象需使用export()導出到data中，並和頁面元素的animation屬性綁定。

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

做者：Chris.