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

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

1 <!-- “新增小程式”的動畫提示 -->
2  
3 <view hidden='{{isWebChatTipsHidden}}' class='wx_tip'>
4  
5   <image src="/images/tip_ios.svg"
 
></image>
6  
7 </view>

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

 1 /* “新增小程式”的動畫提示容器樣式 */
 2  
 3 .wx_tip {
 4  
 5   position: fixed;/* 固定、停靠定位 */
 6  
 7   z-index: 120;/* 垂直方向層級，數字越大越靠前 */
 8  
 9   top: 4rpx;/* 距離頂部位置 */
10  
11   right: -40px;/* 距離右側位置 */
12  
13
 
   height: 120rpx;
14  
15 }
16  
17 /* “新增小程式”的動畫提示圖片樣式 */
18  
19 .wx_tip image {
20  
21   height: 100%;
22  
23   animation: heart 1.3s ease-in-out 2.7s infinite alternate;
24  
25   /* 動畫名稱 動畫完成一個週期所花費的秒或毫秒 動畫的速度曲線 動畫何時開始（延遲開始時間） 動畫被播放的次數 動畫是否在下一週期逆向地播放 */
26  
27 }
28  
29  
30 /* 定義“心跳”動畫 */
31  
32 @keyframes heart 
 
{
33  
34   /* 開始位置 */
35  
36   from {
37  
38     transform: translate(0, 0);
39  
40   }
41  
42   /* 結束位置 */
43  
44   to {
45  
46     transform: translate(0, 6px);
47  
48   }
49  
50 }

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

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

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

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

表1 animation樣式引數值說明

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

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

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

表4 animation-direction引數的可選值

最後，需要在邏輯程式碼中，通過定時器控制“新增小程式”的動畫提示，顯示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

專案視訊課程：小程式開發入門之實戰案例解析：高清桌布推薦