三招讓你成爲程序猿中優秀的射雞溼

這篇文章總結一下以前項目中一些 前端 工具及技巧，主要包括 Iconfont的正確使用姿式 、 如何使用酷炫漂亮的動畫（Lottie） 、 如何加入頁面滾動入場離場動效。

我的博客歡迎訪問 https://lishaoy.net

Iconfont的正確使用姿式

Iconfont 是阿里巴巴打造的矢量圖標庫，圖標豐富多彩（單色和彩色），使用方便快捷（可篩選圖片建立本身項目圖標庫），支持在線使用，擺脫了傳統的圖片的繁瑣和css字體圖標庫引入的冗餘。

下面介紹下如何使用 Iconfont

搜索選擇圖標

點擊 Iconfont 打開頁面如圖，能夠搜索 🔍 關鍵字，找到想要的圖標

例如，搜索 ‘image’ 關鍵字，如圖

鼠標放到圖標上會出現 添加入庫 、 收藏 、 下載圖標 選項，通常我會選擇 添加入庫 ，以後統一添加到項目，生成在線地址引入項目（後面會介紹到）

右邊的藍色皇冠按鈕能夠進行 精選 、 所有 的篩選，紅色的按鈕能夠進行 單色 、 多色 、 所有 的篩選

點擊 下載 會彈出下載頁面，能夠進行圖標的編輯和不一樣格式的下載，如圖

添加入庫生成在線鏈接

選擇 添加入庫 的圖標，會在右上角的購物車顯示數量，點擊購物車圖標，會彈出右側欄，如圖

能夠批量下載和添加到項目，點擊 添加至項目 如圖

給項目取一個名字，點擊肯定，如圖

能夠看到有三種圖標引入的方式，默認選中的是 Font class 的方式，也推薦使用這種方式

Unicode : 是以字體的方式引入，以下

@font-face {
  font-family: 'iconfont';  /* project id 1066942 */
  src: url('//at.alicdn.com/t/font_1066942_yvi703p2pv.eot');
  src: url('//at.alicdn.com/t/font_1066942_yvi703p2pv.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1066942_yvi703p2pv.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1066942_yvi703p2pv.woff') format('woff'),
  url('//at.alicdn.com/t/font_1066942_yvi703p2pv.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1066942_yvi703p2pv.svg#iconfont') format('svg');
}

Font class : 是以Css的方式引入，以下

//at.alicdn.com/t/font_1066942_yvi703p2pv.css

Symbol : 是以js的方式引入，以下

//at.alicdn.com/t/font_1066942_yvi703p2pv.js

如想了解3中方式具體用法，可點擊 官方文檔，這裏我主要介紹 Font class 的方式

引入項目使用

首先，把生成的連接引入到頁面中，以下

<link rel="stylesheet" href="//at.alicdn.com/t/font_1066942_yvi703p2pv.css">

其次，用 <i class="iconfont icon-Userselect"></i> 在頁面中使用，大小顏色均可以用 css 調整

阿里在代碼的複製、圖標的搜索、編輯、下載、篩選等一些操做上作的很到位，使用起來方便快捷

我在以前的項目裏也使用過，仍是很漂亮的 https://a.lishaoy.net ，如圖是我在項目裏使用的一些圖標，每一個圖標是否是都作的很精緻

Lottie開源動畫庫

Lottie 是Airbnb開源的一個面向 iOS、Android、React Native 的動畫庫，可以直接把 AE 導出的動畫文件（json），引入到頁面使用，如下是官方給出的效果圖

Lottie 支持 iOS、Android、React Native 、Web ，這裏主要介紹 lottie-Web 是如何使用，更多使用方法能夠參考 http://airbnb.io/lottie/

首先，在頁面中引入 CDN 上的文件，以下

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.2/lottie.min.js" type="text/javascript"></script>

其次，使用 AE 製做動畫（UI提供或者本身製做）導出的 json，或者能夠在 Lottie Files 下載 （Lottie Files 是一個擁有高質量 Lottie 文件格式動畫的網站，不只設計師能夠在上面陳列他們的動畫並且還提供免費下載）

如下是我在項目裏使用的效果圖（上傳圖片中會加劇動畫，上傳成功動畫中止），具體效果能夠去個人項目上傳圖片體驗 上傳圖片動畫效果

具體的代碼以下，在頁面中建立須要加劇動畫的容器（HTML 代碼）

<div class="image-load d-flex justify-content-center align-items-center">
  <div class="box">
    <div class="lottie"></div>
    <div class="text text-muted text-center">The picture is being uploaded ...</div>
  </div>
</div>

而後，用 js 初始化動畫，以下

let anim = lottie.loadAnimation({
      container: $('.image-load .lottie')[0], //動畫容器的元素
      renderer: 'svg', //支持 svg 和 canvas
      loop: true, //是否循環
      autoplay: false, // 是否自動播放
      path: '/EmojiReaction.json' //動畫json文件的位置
    })
    anim.addEventListener('loopComplete', () => {  // 監聽 `loopComplete` 事件，每次播放完成執行
      anim.pause() //中止播放
      $('.image-load').removeClass('loading') //隱藏容器
      $('.image-load .box .text').text('The picture is being uploaded...').removeClass('text-success').addClass('text-muted') //改變說明文字狀態及顏色
    })

更多的參數和事件可查閱官方文檔 Lottie-Web

如何加入頁面滾動入場離場動效

首先，讓咱們來先看看效果，如圖（效果來源個人博客 https://lishaoy.net）

以上動效就是用的 AOS 這個庫，具體的使用方法也很簡單

在頁面上引入 css 和 js 文件

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/>

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

而後，用 AOS.init() 初始化，這樣初始化，使用的是默認設置，具體有不少參數能夠調整，詳情可查閱 項目文檔，如

AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

最後，在頁面上使用便可，如

<div data-aos="fade-in"></div>

或者，也能夠單獨給元素設置參數，使用 data-aos-* ，如

<div data-aos="fade-in"
  data-aos-offset="200"
  data-aos-delay="50"
  data-aos-duration="1000"
  data-aos-easing="ease-in-out"
></div>

更多的載入效果能夠參考官方給出的 示例

如在您作的頁面或應用中使用了這三招，精緻小圖標 、 炫酷的動畫 、 頁面滾動載入動效 ，那麼瞬間讓您的頁面或應用高大上且生動活潑起來。