添加到我的小程序動畫實現詳細講解，輕鬆學會動畫開發！附壁紙小程序源碼下載鏈接

爲了讓用戶能儘可能多地使用小程序，也算是沉澱用戶，現在很多小程序中，都有引導用戶“添加到我的小程序”的操作提示，而且大多都是有動畫效果。在高清壁紙推薦小程序首頁，用戶每次進入，都會在頁面右上方，顯示“添加小程序”的動畫提示，如下圖所示：

怎麼實現這樣的關注提示功能呢？首先，進入pages/index/index.wxml文件中，編寫佈局代碼如下：

<!-- “添加小程序”的動畫提示 -->

<view hidden='{{isWebChatTipsHidden}}' class='wx_tip'>

  <image src="/images/tip_ios.svg"></image>

</view>

佈局代碼很簡單，主要是通過樣式實現圖片“心跳”的動畫效果，接下來，進入pages/index/index.wxss文件中，編寫樣式代碼如下：

/* “添加小程序”的動畫提示容器樣式 */

.wx_tip {

  position: fixed;/* 固定、停靠定位 */

  z-index: 120;/* 垂直方向層級，數字越大越靠前 */

  top: 4rpx;/* 距離頂部位置 */

  right: -40px;/* 距離右側位置 */

  height: 120rpx;

}

/* “添加小程序”的動畫提示圖片樣式 */

.wx_tip image {

  height: 100%;

  animation: heart 1.3s ease-in-out 2.7s infinite alternate;

  /* 動畫名稱 動畫完成一個週期所花費的秒或毫秒 動畫的速度曲線 動畫何時開始（延遲開始時間） 動畫被播放的次數 動畫是否在下一週期逆向地播放 */

}


/* 定義“心跳”動畫 */

@keyframes heart {

  /* 開始位置 */

  from {

    transform: translate(0, 0);

  }

  /* 結束位置 */

  to {

    transform: translate(0, 6px);

  }

}

在上面代碼中，關鍵點在於：動畫（animation）樣式的使用。雖然說微信小程序可以直接通過邏輯代碼，實現一樣的動畫效果，但出於便捷和靈活性考慮，一般建議還是通過樣式代碼來實現。

關於動畫（animation）樣式，有很多相關屬性和知識點，這裏不可能全部講解，也不是本文的重點。下面只針對最常用和核心的animation的屬性及用法做具體講解。animation語法如下：

animation: name duration timing-function delay iteration-count direction;

各參數值說明如下表所示:

表1  animation樣式參數值說明

屬性	類型
animation-name	規定需要綁定到選擇器的 keyframe 名稱。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始之前的延遲。
animation-iteration-count	規定動畫應該播放的次數。
animation-direction	規定是否應該輪流反向播放動畫。

其中，animation-timing-function、animation-iteration-count和animation-direction參數的可選值如表2、表3和表4所示:

表2  animation-timing-function參數的可選值

屬性	類型
linear	動畫從頭到尾的速度是相同的。
ease	默認。動畫以低速開始，然後加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。

表3  animation-iteration-count參數的可選值

屬性	類型
n	定義動畫播放次數的數值。
infinite	規定動畫應該無限次播放。

表4  animation-direction參數的可選值

屬性	類型
normal	默認值。動畫應該正常播放。
alternate	動畫應該輪流反向播放。

最後，需要在邏輯代碼中，通過定時器控制“添加小程序”的動畫提示，顯示8秒後自動（隱藏）消失。進入pages/index/index.js文件中，編寫相關代碼如下：

Page({
 
  data: { 
    /**
     * “添加小程序”的動畫提示是否隱藏，默認：false，顯示     */
 
    isWebChatTipsHidden: false
 
  },
 
  onLoad: function (option) { 
    //開啓定時器：8秒後隱藏“添加小程序”的動畫提示 
    setTimeout(()=>{ 
      //更新頁面數據
 
      this.setData({
 
        isWebChatTipsHidden: true
 
      });
 
    },8000);
 
  }
 
});

好了，這篇技術博客就寫到這裏，希望對你能有所幫助。高清壁紙推薦微信小程序源碼現已開源：基於2020年新版微信小程序API開發，項目小巧，但知識點很全面，有詳細的代碼註釋、佈局技巧講解，非常適合初學者學習，並有高級功能實現（滑動停靠及吸頂、自定義導航欄及適配等）及小程序廣告位的開發，項目提供有測試接口，下載後即可運行體驗；如果感覺項目不錯，請點贊或轉發，讓更多的人能看到，謝謝！

項目開源鏈接：https://gitee.com/hbcwxkj/os_bizhi_minapp

項目視頻課程：小程序開發入門之實戰案例解析：高清壁紙推薦