抽獎動畫 - 鯉魚跳龍門

来源:https://www.cnblogs.com/tylerdonet/archive/2022/06/28/16419370.html
-Advertisement-
Play Games

pageClass: home-page-class 鯉魚跳龍門動畫 1. 需求 年中618營銷活動要求做一個鯉魚跳龍門的動畫，產品參考了支付寶上的一個動畫，要求模仿這個來做一個類似的動畫。產品提供的截屏視頻如下： 圖1 從這個視頻里得到的信息，我們可以把動畫分解一下： 321倒計時結束，動畫開始播 ...


pageClass: home-page-class

鯉魚跳龍門動畫

1. 需求

年中618營銷活動要求做一個鯉魚跳龍門的動畫，產品參考了支付寶上的一個動畫，要求模仿這個來做一個類似的動畫。產品提供的截屏視頻如下：

圖1
從這個視頻里得到的信息，我們可以把動畫分解一下：

  • 321倒計時結束，動畫開始播放。
  • 小河背景向下滾動，看上去小魚在不停的向上游動，其實小魚固定在屏幕中間位置。
  • 金幣從屏幕頂部掉落，掉入小魚的嘴裡的時候金幣消失，金幣在掉落同時金幣在旋轉。
  • 用戶點擊“狂點”按鈕，該按鈕四周會出現一個光暈，並且變大變小。
  • 金幣掉落完畢，出現龍門，小魚跑到龍門上方。
  • 播放動畫同時頂部有一個時鐘倒計時，從6.18倒數到0。

從視頻上看，有一部分用css動畫實現起來比較麻煩，例如，金幣掉落完成之後，小魚要轉身，從背對觀眾變成面向觀眾，同時大小在變化，這些常見的css動畫沒法完全複原，初步判斷這些是使用其他動畫庫來實現的，普通的css動畫無法實現。
我們事先要把這些告知產品，不然最後實現起來非常麻煩，因為本身活動項目開發時間非常短。

2. 整體思路

2.1 三二一倒計時

三二一倒計時這個很簡單，直接用文字顯示的話不太美觀，UI提供了三個4個張圖片，我們可以按照數字分別命名3.png，2.png，1.png，0.png，然後使用setTimeInterval給變數做遞減就可以了。倒計時結束後靜態的小魚變成一個游泳的小魚，這裡是一個gif圖片，所以直接使用切換圖片就可以了。

2.2 河流

小魚向下游動，相對而言可以讓小河向上滾動，在游戲背景上讓河流絕對定位，設置position，初始bottom為0，播放動畫，變為top為0，這樣看上去是小魚向上游動。

2.3 金幣墜落

金幣墜落也是使用絕對定位的方式，初始狀態top是負值，隱藏在屏幕最上方，下落過程中逐漸變小，並且有旋轉的動作，這裡使用rotateY來控制旋轉。待金幣墜落到小魚嘴的位置的時候，金幣消失，模擬小魚吃掉金幣，這裡設置大小為0，使用scale來縮放圖片實現。

2.4 “狂點”按鈕

用戶點擊狂點按鈕時，小魚的背後出現一個光暈，它由大變小，再由小變大，看上去小魚是在加速，這個交互可以讓動畫更加生動。點擊狂點按鈕是，這個按鈕自己本身也有一個由小變大，再由大變小的過程。

2.5 跳龍門

整個跳龍門的時間控制在6.18秒內，也就是河流滾動的時間也是6.18秒，結束後背景上面出現一個龍門圖片，小魚跳出屏幕。龍門圖片最初設置opacity是0，跳出後是1，這樣自然過度，如果使用顯示&影藏來控制，看上去有點突兀。

2.6 時鐘

最後頂部的倒計時時鐘就很簡單了，只要控制一個數字從6.18遞減到0就滿足需求了。

3. 實現過程

3.1 佈局

整個佈局思路是絕對定位，整個背景fix定位在整個屏幕上，其他的元素使用absolute定位來固定位置。註意背景內的元素是absolute定位，都是居中顯示，這裡使用常用的方式left: 50%; margin-left: -(width/2);來設置左右居中。佈局如下圖1：

圖2 佈局
初始狀態是這樣，註意狂點按鈕覆蓋在小魚上方，這個可以使用不同的z-index來實現，還有一些隱藏的元素，例如：金幣圖片，龍門圖片，動畫未開始的時候他麽是隱藏的。

html代碼如下：

<!-- 躍龍門游戲 -->
<div class="dragon-gate-game" @touchmove.prevent.stop @mousewheel.prevent>
  <!-- 321倒計時 -->
  <mask-dialog ref="refCountdown">
    <div class="count-down">
      <img v-show="countDown == 3" class="coupon-btn" :src="require('../assets/images/animation/3.png')" alt="" />
      <img v-show="countDown == 2" class="coupon-btn" :src="require('../assets/images/animation/2.png')" alt="" />
      <img v-show="countDown == 1" class="coupon-btn" :src="require('../assets/images/animation/1.png')" alt="" />
      <img v-show="countDown == 0" class="coupon-btn" :src="require('../assets/images/animation/0.png')" alt="" />
    </div>
  </mask-dialog>

  <!-- 跳龍門 -->
  <div class="jump">
    <!-- 時鐘倒計時 -->
    <div class="clock">{{ game.clock }}</div>
    <!-- 福字 -->
    <img v-for="(img, i) in game.blessing" :key="i" :src="img" class="blessing" alt="" />
    <!-- 小魚 -->
    <div :class="[fish.name]" id="fish">
      <img :src="fish.src" alt="" class="img-fish"/>
      <img src="../assets/images/animation/bg-aureole.png" alt="" class="backdrop">
    </div>
    <!-- 狂點按鈕 -->
    <img src="../assets/images/animation/btn1.png" :data-name="fish.name" alt="" class="btn-click" @click="jump" />
    <!-- 龍門 -->
    <img src="../assets/images/animation/bg-door.png" alt="" class="door" />
    <!-- 河 -->
    <img src="../assets/images/animation/bg-animation.jpg" alt="" class="river" />
  </div>
</div>

給背景div設置禁止滾輪滾動，禁止拖放，防止它出現滾動條，配合fix定位，固定在屏幕上。其他的元素使用absolute定位，這裡有兩個相容性問題要註意：

  • 註意元素定位使用bottom，不能使用top，防止部分瀏覽器底部工具欄遮擋"狂點"按鈕，其他的元素也使用bottom。
  • 註意321倒計時不能使用js動態切換圖片的路徑，而是使用v-show判斷，否則切換瀏覽器的時候在低端瀏覽器上會出現屏幕閃爍的現象，估計是造成頁面重繪了。
    css代碼如下：
.dragon-gate-game {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  .loading,  .dragon-gate-game, .count-down, .jump {
    width: 100%;
    height: 100vh;
  }
  .count-down  {
    @include flex(center, center, row, nowrap);
    .coupon-btn {
      width: 400px;
    }
  }
  .jump {
    position: relative;
    overflow: hidden;
    .river, .clock, .water, .fish, .swim-fish, .btn-click, .door, .blessing {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
    .clock {
      width: 239px;
      height: 64px;
      background: 34px center / 44px 44px no-repeat url("../assets/images/animation/icon-clock.png"), #000000;
      opacity: 0.4;
      border-radius: 32px;
      top: 120px;
      left: 50%;
      margin-left: -119px;
      z-index: 3;
      font-size: 36px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 64px;
      text-indent: 44px;
    }
    .river {
      z-index: 1;
      width: 750px;
      // height: 14039px;
    }
    .door {
      width: 750px;
      height: 960px;
      z-index: 3;
      opacity: 0;
    }
    .water {
      z-index: 2;
      width: 750px;
      height: 467px;
    }
    .fish, .swim-fish {
      position: relative;
      z-index: 3;
      left: 50%;
      img {
        position: absolute;
        width: 100%;
        left: 50%;
        margin-left: -50%;
      }
      .img-fish {
        z-index: 3;
      }
      .backdrop {
        position: absolute;
        z-index: 2;
        left: 50%;
        margin-left: -50%;
        opacity: 0;
      }
    }
    .fish {
      width: 259px;
      margin-left: -129px;
      top: 700px;
    }
    .swim-fish {
      width: 259px;
      margin-left: -129px;
      top: 600px;
    }

    .btn-click {
      z-index: 4;
      width: 240px;
      left: 50%;
      margin-left: -120px;
      bottom: 200px;
      // top: 1000px;
      // animation: .4s linear 1s infinite alternate btnZoom;
    }
    @keyframes btnZoom {
      from {
        transform: scale(0.8);
      }
      to {
        transform: scale(1.1);
      }
    }

    .blessing {
      width: 80px;
      margin-left: -40px;
      z-index: 3;
      left: 50%;
      top: -140px;
    }
  }
}

3.2 倒計時

data中定義變數countDown，初始值是3，使用setInterval來遞減這個變數，這個邏輯相對來說比較簡單，代碼如下：

//倒計時
countDownClock() {
  this.$refs.refCountdown && this.$refs.refCountdown.show()
  this.timerInterval = null
  this.timerInterval = setInterval(() => {
    this.countDown--
    if (this.countDown < 0) {
      clearInterval(this.timerInterval)
      this.timerInterval = null
      this.$refs.refCountdown &&this.$refs.refCountdown.hidden()
      this.countDown = 3
      // 切換動畫魚
      // this.fish = this.game.swimFish
      // 播放動畫
      // this.playAnime()
    }
  }, 1100)
}

倒計時我們也放在一個透明蒙層里，最後兩句切換動畫魚和靜態魚圖片和播放小河，金幣動畫，暫時註釋了，來看看效果：

圖3 倒計時

3.3 播放動畫

開始播放動畫時，首先把小魚切換成那個gif圖片，讓小魚動起來，這裡在data數據中定義了一些數據。

data(){
  return {
    pageShow: '',                       //頁面顯示
    percentage: '2%',                   //進度條變化
    countDown: 3,                       //321倒計時
    timerInterval: null,                //計時器，用於清除
    fish: {},                           //當前顯示小魚
    game: {
      finish: false,                    //是否已完成，回調後不能再點
      clock: 6.18,                      //時鐘倒計時
      duration: 6180,                   //動畫持續時間
      blessingOpacity: '1',             //顯示金幣
      fish: {name: 'fish', src: require('../assets/images/animation/bg-fish.png')},               //小魚圖片
      swimFish: {name: 'swim-fish', src: require('../assets/images/animation/fish-swim.gif')},    //游泳的小魚
      blessing: Array(20).fill(require('../assets/images/losing-lottery/text-blessing.png')),      //金幣
      clickCount: 0,                  //點擊次數
    }
  }
}

切換小魚只需要上面註釋的那句就可以了：this.fish = this.game.swimFish，然後執行下麵的this.playAnime()來播放動畫。
這裡還是使用anime.js動畫庫來播放，首先讓小河向上滾動，同時讓時鐘從6.18倒數到0，同時讓金幣墜落，這三個動畫前兩個動畫的時間是一致的，都是6.18秒，金幣墜落的動畫需要自己來估計，這裡使用一個延遲，交錯動畫，延遲時間6.18*0.12，交錯時間200毫秒，同時這個還和金幣個數有關係，如果金幣太少，動畫後半部分沒有金幣墜落，金幣太多6.18秒過了金幣還沒有落完，這都不是我們想要的結果，我們設置金幣總共個數是20。
6.18秒結束時要讓龍門浮出，小魚跳出龍門，龍門浮出通過設置opacity來實現，小魚跳出，通過translateY實現，最後看代碼如下：

playAnime() {
  let tl = anime.timeline()
  //動畫
  tl.add({
    //河流流動
    targets: '.river',
    easing: 'linear',
    duration: this.game.duration,
    top: 0,
    complete: () => {
      this.game.finish = true
      this.$emit('animeFinish', this.game.clickCount)
    }
  }).add({
    targets: this.game,
    clock: 0,
    easing: 'linear',
    round: 100,
    duration: this.game.duration,
  }, 0).add({
    //金幣下落
    targets: '.blessing',
    easing: 'linear',
    delay: anime.stagger(200, {start: this.game.duration * 0.12}),
    keyframes: [
      {top: '30%', opacity: '1', scale: 0.8},
      {top: '45%', opacity: '0', scale: 0.5, rotateY: '360deg'}
    ],
  }, 0).add({
    //龍門浮出
    targets: '.door',
    easing: 'linear',
    delay: 200,
    opacity: 1
  }).add({
    //魚跳出去
    targets: '#fish',
    // translateY: -100,
    translateY: -550,
    duration: 1000
  })
}

結合data數據來看，前兩個動畫持續時間都是this.game.duration也就是6.18，金幣墜落的動畫需要我們調試，這裡還使用了關鍵幀，動畫進度是30%的時候，金幣透明度是1，大小為原始大小的0.8倍，進度為45%的時候opacity是0，scale是0.5，沿Y軸旋轉360度。金幣墜落完成後龍門浮出，小魚跳過龍門。這兩個動畫相對簡單，一個是通過opacity來顯示，一個通過translateY來隱藏。最後來看動畫效果。

圖4 動畫

3.4 用戶點擊

用戶點擊狂點按鈕時有兩個交互，一個是狂點按鈕本身會有一個變大變小的過程，其次小魚背後會出現一個光暈，這兩個動畫是每點擊一次才播放一次的。每點擊一次要紀錄一下點擊次數，這個調用抽獎介面的時候要用到，還有要判斷動畫是否已經結束，結束之後點擊是沒有什麼效果的，當然這不是這裡實現動畫的關鍵。看下麵的代碼：

jump() {
  let tl = anime.timeline()
  if (this.game.finish) return
  this.game.clickCount++
  console.log('this.game.clickCount')
  tl.add({
    targets: '.backdrop',
    duration: 1000,
    keyframes: [
      {opacity: 0.2},
      {opacity: 0.5},
      {opacity: 0.8},
      {opacity: 1.2},
      {opacity: 0.8},
      {opacity: 0.5},
      {opacity: 0.2},
      {opacity: 0},
    ]
  }).add({
    targets: '.btn-click',
    easing: 'linear',
    duration: 200,
    keyframes: [
      {scale: 0.9, opacity: 0.9},
      {scale: 0.8, opacity: 0.8},
      {scale: 0.7, opacity: 0.7},
      {scale: 0.6, opacity: 0.6},
      {scale: 0.8, opacity: 0.5},
      {scale: 0.9, opacity: 0.4},
      {scale: 1, opacity: 0.6},
      {scale: 1.1, opacity: 0.8},
      {scale: 1, opacity: 1}
    ]
  }, 0)
}

小魚圖片和它背後的光暈都是使用絕對定位，但是小魚的z-index要比光暈大，這樣看起來光暈是在小魚的下方。這兩個動畫都使用了關鍵幀來增強效果。點擊效果圖如下：

圖5 按鈕點擊

最後就是調用介面，根據介面彈出中獎結果了，這和動畫無關，只需要傳一個參數，點擊狂點按鈕的次數。最後看一下整體效果，如下圖6：

圖6 完整動畫

4.總結

整個鯉魚跳龍門動畫已經介紹完，這個動畫要考慮的元素很多，有小魚，小魚背後的光暈，龍門，金幣，倒計時，小河等等，整個動畫是由一個一個的小動畫組合而成，只要把要考慮的細節考慮清楚，實現起來還是不難的。

5.參考

  1. animate https://www.animejs.cn/

作者：Tyler Ning
出處：http://www.cnblogs.com/tylerdonet/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，如有問題，請微信聯繫冬天里的一把火


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 實時決策的六個用例 - 從詐騙預防到分析，瞭解全球企業如何利用Volt Active Data平臺推動數字化轉型。
    介紹 作為人類，我們天生就想要即刻擁有東西。即時滿足感是一種強大的力量，當前的實時經濟反映了這一點。業務方之間的事務在實時的數字化，逐漸自動化（M2M通信、物聯網、人工智慧和機器學習）並完成。 根據Volt Active Data的​​等待心理調查​​，當被問及“實時意味著什麼”時，超過70%的受訪 ...
  • MySQL max() min() 函數取值錯誤
    今天日誌出現異常，一步一步debug發現SQL語句返回值出錯，進一步發現是max()函數返回出錯。點擊跳轉解決辦法，趕時間的朋友可以去獲得答案。當然我還是希望大伙看看原由。 select max(HTMBXH) from biz_mn_contract_temp; 返回值按理應該是10 ，結果返回了 ...
  • 阿裡雲體驗有獎：如何將 PolarDB-X 與大數據等系統互通
    體驗簡介 場景將提供一臺配置了CentOS 8.5操作系統的ECS實例（雲伺服器）。通過本教程的操作帶您體驗如何將PolarDB-X通過Canal與ClickHouse進行互通，搭建一個實時分析系統。點擊前往 實驗準備 1. 創建實驗資源 開始實驗之前，您需要先創建ECS實例資源。 在實驗室頁面，單 ...
  • 運動App如何實現端側後臺保活，讓運動記錄更完整？
    你在鍛煉健身時，有沒有遇到這樣的情況？辛辛苦苦鍛煉了幾小時，卻發現App停止了運行，本次運動並沒有被記錄到App上，從而失去了一個查看完整運動數據的機會？ 運動類App是通過手機或者穿戴設備的感測器，來識別運動狀態並反饋給用戶的，App能否在手機後臺時刻保持運行是影響運動數據完整性的關鍵因素。為了滿 ...
  • 【前端面試】（四）JavaScript var let const的區別
    視頻鏈接： JavaScript var let const的區別 - Web前端工程師面試題講解 參考鏈接： JavaScript 變數 JavaScript Let JavaScript Const 練習網站： codepen.io 初步認識： 功能實現 HTML的部分： <input type ...
  • CSS畫三角形，圓形，橢圓，圓角長方形
    1、CSS畫一個三角形：（div寬高為0，border存在且顏色不一） step1: 設置寬度，高度為 0 的一個div盒子； step2: 為了方便理解，將盒子的 4 個邊框分別設置一樣的寬度boder，不同的顏色； step3: transparent將其他三個 邊框隱藏掉，就能看到效果了。 如 ...
  • Vue 項目實踐指南
    Vue 框架通過數據雙向綁定和虛擬 DOM 技術，幫我們處理了前端開發中最臟最累的 DOM 操作部分， 我們不再需要去考慮如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 項目中仍然存在項目首屏優化、Webpack 編譯配置優化等問題，所以我們仍然需要去關註 Vue 項目性能方面的優化，使 ...
  • 一種JavaScript響應式系統設計與實現
    一種JavaScript響應式系統實現 根據VueJs核心團隊成員霍春陽《Vue.js設計與實現》第四章前三節整理而成 1. 響應式數據與副作用函數 1.1 副作用函數 會產生副作用的函數。 如下示例所示： function effect () { document.body.innerText = ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類