又雙叒叕是一個動態簡歷

demonQ發表於2018-12-23

先看效果

請戳這裡看預覽

這裡是程式碼

見過了？別走，這是與眾不同的地方

  • 針對移動端優化了體驗
  • 支援動畫跳過
  • 支援多段動畫
  • 標點字元特殊處理，停留時間略長於字元時間
  • typescript 編寫
  • 對功能進行了封裝處理，可以直接引入使用

基本準備

字元逐個彈出效果的實現

原理很簡單，一個閉包，逐一擷取字串，setTimeout 渲染在頁面上即可

/**
 * @param {HTMLElement} container - 渲染字元的容器
 * @param {string} text - 需要渲染的字串
 */
function loadItem(container, text) {
  let num = 0
  let sum = text.length
  let interval = 16

  const startLoad = () => {
    setTimeout(() => {
      num += 1
      if (num <= sum) {

        let str = text.substr(0, num)

        container.scrollTop = 100000

        container.innerHTML = str

        setTimeout(() => {
          startLoad()
        }, interval)

      }
    }, interval)
  }

  startLoad()
}
複製程式碼

html 上的 CSS 字元自動生效

只要在字串開始渲染時，在 html 中新增一個 style 標籤，將渲染的 CSS 程式碼寫入到標籤中即可

建立一個 style 標籤

function getStyleEl() {
  let newStyle = document.createElement('style')
  let head = document.querySelector('head')
  head.appendChild(newStyle)
  let allStyle = document.querySelectorAll('style')

  return allStyle[allStyle.length - 1]
}
複製程式碼

將 CSS 程式碼寫入

/**
 * 
 * @param {string} style - CSS 程式碼
 * @param {HTMLElement} el - 建立的 style 標籤
 */
function handleStyle(style, el) {
  el.innerHTML = style
}
複製程式碼

CSS 程式碼高亮，markdown 自動轉換

這裡需要藉助 prismjs 和 marked 兩個程式碼處理庫（當然也可以用其他的）

需要在上述的 loadTtem 函式中新增判斷

let code
switch (type) {
  case 'css':
    handleStyle(str, styleEl)
    code = Prism.highlight(str, Prism.languages.css)
    break
  case 'md':
    code = marked(str)
    break
}
複製程式碼

進階處理

分析

基本的核心功能已經準備好了

下面我們開始分析過程，開始編寫程式碼

需求如下：

  1. 支援多段動畫載入
  2. 支援動畫跳過（直接載入完成）
  3. 移動端特殊處理

基於上述需求，我們需要先對介面進行定義

我們設想函式是這樣使用的

/**
 * @param {HTMLElement} container - 字元渲染的容器
 * @param {Object} options - 動畫引數
 * 
 * @param {string} options.content.load - 需要渲染的字串
 * @param {'css' | 'md'} options.content.type - 渲染後高亮的方式，當前僅支援 'css' | 'md' 兩個引數
 * @param {string} options.content.id - 渲染容器的 id
 * @param {boolean} options.content.rewrite - 是否需要重寫
 * 
 * @param {Object}? options.mobileAnimate - 移動端需要特殊處理
 * @param {string} options.mobileAnimate.styleID - css 載入的容器 ，id 應與 content 中 css 容器的 id 相同
 * @param {string} options.mobileAnimate.string - markdown 載入的容器，id 應與 content 中 md 容器的 id 相同
 */
let ar = new AnimateResume(container, {
  content:[
    {
      load:'',
      type:'css',
      id:'',
      rewrite:'',
    },
    ...
  ],
  mobileAnimate:{
    styleID:'',
    resumeID:''
  }
})
ar.animate()
ar.skip()
複製程式碼

使用前需要例項化一個並傳入引數，通過 animate 方法開始動畫，skip 方法跳過動畫

根據上述引數設想，我們可以寫出如下的 typescript 介面，不瞭解 typescript 的同學可以直接跳過，只看上面程式碼的註釋即可

interface Core {
  container: Element
  options: CoreOptions
  isSkip: boolean

  animate: () => void
  skip: () => void
}

interface CoreOptions {
  content: Array<LoadParams>
  mobileAnimate?: {
    styleID: string
    resumeID: string
  }
}

interface LoadParams {
  load: string
  type: 'css' | 'md'
  id: string
  rewrite?: boolean
}
複製程式碼

實現

基本的架構已經分析好了，現在可以開始實現了

逐一載入

首先，因為動畫是多段完成的，所以我們通過引數 content 傳入的是一個二維陣列，其中每個 item 存放著我們想要載入的內容和對應要求，如何讓動畫一段一段的完成呢？很自然的能想到 Promise 方法，通過 Promise.then() 來實現。

所以我們可以將這個需求抽象為：一個未知長度的陣列，需要逐一的在未知時間後載入下一項。

實現也很簡單，程式碼如下：

function load(contents) {
  if (contents.length) {
    this.loadItem(contents[0])
      .then(() => this.load(contents.slice(1)))
  }
}
複製程式碼

可以想到，上述中的 loadItem 方法應該返回一個 new Promise ,內部當字串載入完成後返回 resolve()，然後繼續執行下一段 load 方法

支援跳過

如何才能中斷當前的動畫，直接載入完成呢？

最初我嘗試直接暴力的通過在 loadItem 時檢查載入字數和一個全域性變數來判斷是否 setTimeout， 但很明顯這麼做及其不優雅，而且有 bug（但我忘了是什麼 bug 了...）。

優雅實現：在類中宣告 this.isSkip = false（相當於全域性變數），在 skip() 方法呼叫時，將其改變為 true，在 loadItem 中 setTimeout 前檢查該變數，如果為 true 則丟擲 reject()

所以上述的 load 方法需要新增變為：

function load(contents) {
  if (contents.length) {
    this.loadItem(contents[0])
      .then(() => this.load(contents.slice(1)))
      .catch(() => this.skipAnimate())
  }
}
複製程式碼

skipAnimate 即為對應的跳過動畫方法

移動端處理

沒有動圖…… 請點選預覽在手機或者谷歌除錯中自行檢視

展示樣式我們可以直接在渲染的 CSS 程式碼動畫中自定義，所以不過多解釋

這裡只說一下兩個頁面上下滑動的效果實現

我們需要藉助 better-scroll 外掛來幫助優化，分別設定上部分頁面上拉重新整理事件和下部分頁面的下拉重新整理事件，在對應事件觸發時，通過 transform:translateY(x) 來實現頁面的整體滑動，程式碼如下

  let styleScroll = new BScroll(styleContainer, {
    pullUpLoad: {
      threshold: 20
    }
  })

  let mdScroll = new BScroll(mdContainer, {
    pullDownRefresh: {
      threshold: 20,
    }
  })

  styleScroll.on('pullingUp', function () {
    mdContainer.style.transform = 'translateY(calc(-100% - 4rem))'
    styleContainer.style.transform = 'translateY(calc(-100% - 1rem))'
    styleScroll.finishPullUp()
  })
  mdScroll.on('pullingDown', function () {
    mdContainer.style.transform = 'translateY(0)'
    styleContainer.style.transform = 'translateY(0)'
    mdScroll.finishPullDown()
  })
複製程式碼

需要注意的是如果下方簡歷內容長度不夠，不會觸發 better-scroll 的滑動檢測，導致無法出現預想的滑動效果。

標點處理

根據傳入的字元來判斷下一個字元出現的延遲時間，即 setTimeout 方法的第二個引數。

function getInterval(str: string, interval = 16): number {
  if (/\D[\,]\s$/.test(str)) return interval * 20
  if (/[^\/]\n\n$/.test(str)) return interval * 40
  if (/[\.\?\!]\s$/.test(str)) return interval * 60
  return 0
}
複製程式碼

參考自 github.com/STRML/strml… ，算是拾人牙慧了。

結束

基本的實現思路已經說完，具體的程式碼貼上來實在是篇幅太長，請檢視原始碼。

不瞭解 typescript 的同學可以看這裡，這是我年初時用 js 寫的，不過算是程式導向編寫，沒有做過多的封裝處理。

寫在最後

第一次見到strml.net/ 時，是在初學前端大概三四個月的樣子，當時看到這樣的展現形式著實是被驚豔到了，那時還是個小白，連 highlight 這樣的外掛都不知道，更不知道還能在style裡自定義東西，更更更不知道網站下面就放著View Source這麼個大字，只是一心想的要自己也寫一個，就那麼硬生生自己寫正則，通過不同的特殊符號載入對應的標籤處理變色，再通過 `dom.style....=...' 設定樣式，然後居然還寫的有模有樣，第一次找工作時還居然敢拿出來給面試官看了（笑）。

年初的時候試著重寫了這個專案，感覺已是沒有什麼難度了，不過也是程式導向，一頓操作罷了。這些天初學 typescript 想著拿個什麼東西練個手，所以又把這個專案用 ts 重構了，並且進一步的進行了封裝。感覺可以出來溜溜了，所以寫下了這篇文章。

相關文章