鯉魚跳龍門動(dòng)畫

1. 需求

年中618營銷活動(dòng)要求做一個(gè)鯉魚跳龍門的動(dòng)畫，產(chǎn)品參考了某寶上的一個(gè)動(dòng)畫，要求模仿這個(gè)來做一個(gè)類似的動(dòng)畫。產(chǎn)品提供的截屏視頻如下：

圖1
從這個(gè)視頻里得到的信息，我們可以把動(dòng)畫分解一下：

• 321倒計(jì)時(shí)結(jié)束，動(dòng)畫開始播放。
• 小河背景向下滾動(dòng)，看上去小魚在不停的向上游動(dòng)，其實(shí)小魚固定在屏幕中間位置。
• 金幣從屏幕頂部掉落，掉入小魚的嘴里的時(shí)候金幣消失，金幣在掉落同時(shí)金幣在旋轉(zhuǎn)。
• 用戶點(diǎn)擊“狂點(diǎn)”按鈕，該按鈕四周會(huì)出現(xiàn)一個(gè)光暈，并且變大變小。
• 金幣掉落完畢，出現(xiàn)龍門，小魚跑到龍門上方。
• 播放動(dòng)畫同時(shí)頂部有一個(gè)時(shí)鐘倒計(jì)時(shí)，從6.18倒數(shù)到0。

從視頻上看，有一部分用css動(dòng)畫實(shí)現(xiàn)起來比較麻煩，例如，金幣掉落完成之后，小魚要轉(zhuǎn)身，從背對(duì)觀眾變成面向觀眾，同時(shí)大小在變化，這些常見的css動(dòng)畫沒法完全復(fù)原，初步判斷這些是使用其他動(dòng)畫庫來實(shí)現(xiàn)的，普通的css動(dòng)畫無法實(shí)現(xiàn)。
我們事先要把這些告知產(chǎn)品，不然最后實(shí)現(xiàn)起來非常麻煩，因?yàn)楸旧砘顒?dòng)項(xiàng)目開發(fā)時(shí)間非常短。

2. 整體思路

2.1 三二一倒計(jì)時(shí)

三二一倒計(jì)時(shí)這個(gè)很簡單，直接用文字顯示的話不太美觀，UI提供了三個(gè)4個(gè)張圖片，我們可以按照數(shù)字分別命名3.png，2.png，1.png，0.png，然后使用setTimeInterval給變量做遞減就可以了。倒計(jì)時(shí)結(jié)束后靜態(tài)的小魚變成一個(gè)游泳的小魚，這里是一個(gè)gif圖片，所以直接使用切換圖片就可以了。

2.2 河流

小魚向下游動(dòng)，相對(duì)而言可以讓小河向上滾動(dòng)，在游戲背景上讓河流絕對(duì)定位，設(shè)置position，初始bottom為0，播放動(dòng)畫，變?yōu)閠op為0，這樣看上去是小魚向上游動(dòng)。

2.3 金幣墜落

金幣墜落也是使用絕對(duì)定位的方式，初始狀態(tài)top是負(fù)值，隱藏在屏幕最上方，下落過程中逐漸變小，并且有旋轉(zhuǎn)的動(dòng)作，這里使用rotateY來控制旋轉(zhuǎn)。待金幣墜落到小魚嘴的位置的時(shí)候，金幣消失，模擬小魚吃掉金幣，這里設(shè)置大小為0，使用scale來縮放圖片實(shí)現(xiàn)。

2.4 “狂點(diǎn)”按鈕

用戶點(diǎn)擊狂點(diǎn)按鈕時(shí)，小魚的背后出現(xiàn)一個(gè)光暈，它由大變小，再由小變大，看上去小魚是在加速，這個(gè)交互可以讓動(dòng)畫更加生動(dòng)。點(diǎn)擊狂點(diǎn)按鈕是，這個(gè)按鈕自己本身也有一個(gè)由小變大，再由大變小的過程。

2.5 跳龍門

整個(gè)跳龍門的時(shí)間控制在6.18秒內(nèi)，也就是河流滾動(dòng)的時(shí)間也是6.18秒，結(jié)束后背景上面出現(xiàn)一個(gè)龍門圖片，小魚跳出屏幕。龍門圖片最初設(shè)置opacity是0，跳出后是1，這樣自然過度，如果使用顯示&影藏來控制，看上去有點(diǎn)突兀。

2.6 時(shí)鐘

最后頂部的倒計(jì)時(shí)時(shí)鐘就很簡單了，只要控制一個(gè)數(shù)字從6.18遞減到0就滿足需求了。

3. 實(shí)現(xiàn)過程

3.1 布局

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

圖2 布局
初始狀態(tài)是這樣，注意狂點(diǎn)按鈕覆蓋在小魚上方，這個(gè)可以使用不同的z-index來實(shí)現(xiàn)，還有一些隱藏的元素，例如：金幣圖片，龍門圖片，動(dòng)畫未開始的時(shí)候他么是隱藏的。

html代碼如下：

<!-- 躍龍門游戲 -->
<div class="dragon-gate-game" @touchmove.prevent.stop @mousewheel.prevent>
  <!-- 321倒計(jì)時(shí) -->
  <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">
    <!-- 時(shí)鐘倒計(jì)時(shí) -->
    <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>
    <!-- 狂點(diǎn)按鈕 -->
    <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設(shè)置禁止?jié)L輪滾動(dòng)，禁止拖放，防止它出現(xiàn)滾動(dòng)條，配合fix定位，固定在屏幕上。其他的元素使用absolute定位，這里有兩個(gè)兼容性問題要注意：

• 注意元素定位使用bottom，不能使用top，防止部分瀏覽器底部工具欄遮擋"狂點(diǎn)"按鈕，其他的元素也使用bottom。
• 注意321倒計(jì)時(shí)不能使用js動(dòng)態(tài)切換圖片的路徑，而是使用v-show判斷，否則切換瀏覽器的時(shí)候在低端瀏覽器上會(huì)出現(xiàn)屏幕閃爍的現(xiàn)象，估計(jì)是造成頁面重繪了。
  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 倒計(jì)時(shí)

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

//倒計(jì)時(shí)
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
      // 切換動(dòng)畫魚
      // this.fish = this.game.swimFish
      // 播放動(dòng)畫
      // this.playAnime()
    }
  }, 1100)
}

倒計(jì)時(shí)我們也放在一個(gè)透明蒙層里，最后兩句切換動(dòng)畫魚和靜態(tài)魚圖片和播放小河，金幣動(dòng)畫，暫時(shí)注釋了，來看看效果：

圖3 倒計(jì)時(shí)

3.3 播放動(dòng)畫

開始播放動(dòng)畫時(shí)，首先把小魚切換成那個(gè)gif圖片，讓小魚動(dòng)起來，這里在data數(shù)據(jù)中定義了一些數(shù)據(jù)。

data(){
  return {
    pageShow: '',                       //頁面顯示
    percentage: '2%',                   //進(jìn)度條變化
    countDown: 3,                       //321倒計(jì)時(shí)
    timerInterval: null,                //計(jì)時(shí)器，用于清除
    fish: {},                           //當(dāng)前顯示小魚
    game: {
      finish: false,                    //是否已完成，回調(diào)后不能再點(diǎn)
      clock: 6.18,                      //時(shí)鐘倒計(jì)時(shí)
      duration: 6180,                   //動(dòng)畫持續(xù)時(shí)間
      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,                  //點(diǎn)擊次數(shù)
    }
  }
}

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

playAnime() {
  let tl = anime.timeline()
  //動(dòng)畫
  tl.add({
    //河流流動(dòng)
    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
  })
}

結(jié)合data數(shù)據(jù)來看，前兩個(gè)動(dòng)畫持續(xù)時(shí)間都是this.game.duration也就是6.18，金幣墜落的動(dòng)畫需要我們調(diào)試，這里還使用了關(guān)鍵幀，動(dòng)畫進(jìn)度是30%的時(shí)候，金幣透明度是1，大小為原始大小的0.8倍，進(jìn)度為45%的時(shí)候opacity是0，scale是0.5，沿Y軸旋轉(zhuǎn)360度。金幣墜落完成后龍門浮出，小魚跳過龍門。這兩個(gè)動(dòng)畫相對(duì)簡單，一個(gè)是通過opacity來顯示，一個(gè)通過translateY來隱藏。最后來看動(dòng)畫效果。

圖4 動(dòng)畫

3.4 用戶點(diǎn)擊

用戶點(diǎn)擊狂點(diǎn)按鈕時(shí)有兩個(gè)交互，一個(gè)是狂點(diǎn)按鈕本身會(huì)有一個(gè)變大變小的過程，其次小魚背后會(huì)出現(xiàn)一個(gè)光暈，這兩個(gè)動(dòng)畫是每點(diǎn)擊一次才播放一次的。每點(diǎn)擊一次要紀(jì)錄一下點(diǎn)擊次數(shù)，這個(gè)調(diào)用抽獎(jiǎng)接口的時(shí)候要用到，還有要判斷動(dòng)畫是否已經(jīng)結(jié)束，結(jié)束之后點(diǎn)擊是沒有什么效果的，當(dāng)然這不是這里實(shí)現(xiàn)動(dòng)畫的關(guān)鍵。看下面的代碼：

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)
}

小魚圖片和它背后的光暈都是使用絕對(duì)定位，但是小魚的z-index要比光暈大，這樣看起來光暈是在小魚的下方。這兩個(gè)動(dòng)畫都使用了關(guān)鍵幀來增強(qiáng)效果。點(diǎn)擊效果圖如下：

圖5 按鈕點(diǎn)擊

最后就是調(diào)用接口，根據(jù)接口彈出中獎(jiǎng)結(jié)果了，這和動(dòng)畫無關(guān)，只需要傳一個(gè)參數(shù)，點(diǎn)擊狂點(diǎn)按鈕的次數(shù)。最后看一下整體效果，如下圖6：

圖6 完整動(dòng)畫

4.總結(jié)

整個(gè)鯉魚跳龍門動(dòng)畫已經(jīng)介紹完，這個(gè)動(dòng)畫要考慮的元素很多，有小魚，小魚背后的光暈，龍門，金幣，倒計(jì)時(shí)，小河等等，整個(gè)動(dòng)畫是由一個(gè)一個(gè)的小動(dòng)畫組合而成，只要把要考慮的細(xì)節(jié)考慮清楚，實(shí)現(xiàn)起來還是不難的。

5.參考

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