goodDesigner

這篇文章總結(jié)一下之前項(xiàng)目中一些 前端 工具及技巧，主要包括 Iconfont的正確使用姿勢(shì) 、 如何使用酷炫漂亮的動(dòng)畫(huà)（Lottie） 、 如何加入頁(yè)面滾動(dòng)入場(chǎng)離場(chǎng)動(dòng)效。

個(gè)人博客歡迎訪問(wèn) https://lishaoy.net

Iconfont的正確使用姿勢(shì)

Iconfont 是阿里巴巴打造的矢量圖標(biāo)庫(kù)，圖標(biāo)豐富多彩（單色和彩色），使用方便快捷（可篩選圖片創(chuàng)建自己項(xiàng)目圖標(biāo)庫(kù)），支持在線使用，擺脫了傳統(tǒng)的圖片的繁瑣和css字體圖標(biāo)庫(kù)引入的冗余。

下面介紹下如何使用 Iconfont

搜索選擇圖標(biāo)

點(diǎn)擊 Iconfont 打開(kāi)頁(yè)面如圖，可以搜索 ?? 關(guān)鍵字，找到想要的圖標(biāo)

Iconfont

例如，搜索 ‘image’ 關(guān)鍵字，如圖

Iconfont

鼠標(biāo)放到圖標(biāo)上會(huì)出現(xiàn) 添加入庫(kù) 、 收藏 、 下載圖標(biāo) 選項(xiàng)，一般我會(huì)選擇 添加入庫(kù) ，之后統(tǒng)一添加到項(xiàng)目，生成在線地址引入項(xiàng)目（后面會(huì)介紹到）

右邊的藍(lán)色皇冠按鈕可以進(jìn)行 精選 、 全部 的篩選，紅色的按鈕可以進(jìn)行 單色 、 多色 、 全部 的篩選

點(diǎn)擊 下載 會(huì)彈出下載頁(yè)面，可以進(jìn)行圖標(biāo)的編輯和不同格式的下載，如圖

Iconfont

添加入庫(kù)生成在線連接

選擇 添加入庫(kù) 的圖標(biāo)，會(huì)在右上角的購(gòu)物車(chē)顯示數(shù)量，點(diǎn)擊購(gòu)物車(chē)圖標(biāo)，會(huì)彈出右側(cè)欄，如圖

Iconfont

可以批量下載和添加到項(xiàng)目，點(diǎn)擊 添加至項(xiàng)目 如圖

Iconfont

給項(xiàng)目取一個(gè)名字，點(diǎn)擊確定，如圖

image

可以看到有三種圖標(biāo)引入的方式，默認(rèn)選中的是 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中方式具體用法，可點(diǎn)擊 官方文檔，這里我主要介紹 Font class 的方式

引入項(xiàng)目使用

首先，把生成的鏈接引入到頁(yè)面中，如下

<link rel="stylesheet" >

其次，用 <i class="iconfont icon-Userselect"></i> 在頁(yè)面中使用，大小顏色都可以用 css 調(diào)整

阿里在代碼的復(fù)制、圖標(biāo)的搜索、編輯、下載、篩選等一些操作上做的很到位，使用起來(lái)方便快捷

我在之前的項(xiàng)目里也使用過(guò)，還是很漂亮的 https://a.lishaoy.net ，如圖是我在項(xiàng)目里使用的一些圖標(biāo)，每個(gè)圖標(biāo)是不是都做的很精致

Iconfont

Lottie開(kāi)源動(dòng)畫(huà)庫(kù)

Lottie 是Airbnb開(kāi)源的一個(gè)面向 iOS、Android、React Native 的動(dòng)畫(huà)庫(kù)，能夠直接把 AE 導(dǎo)出的動(dòng)畫(huà)文件（json），引入到頁(yè)面使用，以下是官方給出的效果圖

Lottie

Lottie

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

首先，在頁(yè)面中引入 CDN 上的文件，如下

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

其次，使用 AE 制作動(dòng)畫(huà)（UI提供或者自己制作）導(dǎo)出的 json，或者可以在 Lottie Files 下載 （Lottie Files 是一個(gè)擁有高質(zhì)量 Lottie 文件格式動(dòng)畫(huà)的網(wǎng)站，不僅設(shè)計(jì)師可以在上面陳列他們的動(dòng)畫(huà)而且還提供免費(fèi)下載）

以下是我在項(xiàng)目里使用的效果圖（上傳圖片中會(huì)加重動(dòng)畫(huà)，上傳成功動(dòng)畫(huà)停止），具體效果可以去我的項(xiàng)目上傳圖片體驗(yàn) 上傳圖片動(dòng)畫(huà)效果

Lottie

具體的代碼如下，在頁(yè)面中創(chuàng)建需要加重動(dòng)畫(huà)的容器（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 初始化動(dòng)畫(huà)，如下

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

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

如何加入頁(yè)面滾動(dòng)入場(chǎng)離場(chǎng)動(dòng)效

首先，讓我們來(lái)先看看效果，如圖（效果來(lái)源我的博客 https://lishaoy.net）

Iconfont

以上動(dòng)效就是用的 AOS 這個(gè)庫(kù)，具體的使用方法也很簡(jiǎn)單

在頁(yè)面上引入 css 和 js 文件

<link rel="stylesheet" />

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

然后，用 AOS.init() 初始化，這樣初始化，使用的是默認(rèn)設(shè)置，具體有很多參數(shù)可以調(diào)整，詳情可查閱 項(xiàng)目文檔，如

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

});

最后，在頁(yè)面上使用即可，如

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

或者，也可以單獨(dú)給元素設(shè)置參數(shù)，使用 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>

更多的載入效果可以參考官方給出的 示例

如在您做的頁(yè)面或應(yīng)用中使用了這三招，精致小圖標(biāo) 、 炫酷的動(dòng)畫(huà) 、 頁(yè)面滾動(dòng)載入動(dòng)效 ，那么瞬間讓您的頁(yè)面或應(yīng)用高大上且生動(dòng)活潑起來(lái)。