給你的網站添加炫酷的動畫註釋

前置

rough-notation 用於在網頁上建立註釋並設置註釋動畫的小型 JavaScript 庫。它還能夠應用在一些常見前端框架中，好比 Vue、React、 Svelte、Angular 甚至 Web Component。我把它應用在我建立的博客園皮膚中，好比你能夠看見頭部導航條中的博客暱稱有一個下劃線。下面是它能夠實現的基本效果，點擊按鈕試一試吧。

使用

npm install --save rough-notation

經過將元素傳遞到 annotation 來建立對象，以及經過配置來描述樣式。擁有 annotation 對象後，能夠調用annotation.show()顯示。

import { annotate } from 'rough-notation';

const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline' });
annotation.show();

經過 Group 建立多個動畫註釋：

import { annotate, annotationGroup } from 'rough-notation';

const a1 = annotate(document.querySelector('#e1'), { type: 'underline' });
const a2 = annotate(document.querySelector('#e3'), { type: 'box' });
const a3 = annotate(document.querySelector('#e3'), { type: 'circle' });

const ag = annotationGroup([a3, a1, a2]);
ag.show();

參數

建立 annotation 時，將傳遞一個配置。配置只有一個必填字段，即註釋的字段。可是，您能夠經過多種方式配置。type

類型

這是一個必填字段，設置註釋樣式。

• underline：此樣式在元素下方建立粗略下劃線。
• box：此樣式在元素周圍繪製一個框。
• corcle：此樣式在元素周圍繪製一個圓圈。
• highlight：此樣式建立高光效果，就像用熒光筆標記同樣。
• strike-through：此樣式經過元素繪製水平線。
• crossed-off：此樣式在元素上繪製一個"X"。
• bracket：此樣式圍繞元素（一般是文本段落）繪製一個括號。默認狀況下，在右側，但能夠配置爲任何或所有的左，右，上，下。

animate

在註釋時打開/關閉動畫的布爾屬性。默認值爲 true。

animationDuration

動畫的持續時間（以毫秒爲單位）默認值爲 800ms。

color

表示註釋草圖顏色的字符串值，默認值爲 currentColor。

strokeWidth

註釋描邊寬度。默認值爲 1。

padding

在元素和繪製註釋的大體地點之間填充。能夠將值設置爲相似於 CSS 樣式填充或只是數組。5 top left right bottom``[top, right, bottom, left] [top & bottom, left & right]。

multiline

僅適用於內聯文本。若要註釋多行文本，請將此屬性設置爲 true。

iterations

配置迭代次數。默認狀況下，註釋在兩次迭代中繪製，例如，下劃線時，從左到右繪製，而後從右到左繪製。

brackets

配置元素的哪一側爲支架。值能夠是字符串或字符串數組，每一個字符串都是這些值之一：top left right bottom。繪製支架時，默認值爲 right。

它還提供一些事件，供您靈活調用，這裏不展開描述，能夠去 Github 看一看。

個人使用

notation/index.js

import { annotate, annotationGroup } from 'rough-notation'
import { pageName as currentPage } from '@tools'
import './index.scss'

const pageName = currentPage()
const group = []

const annotateList = [
    {
        page: 'all',
        selector: '#Header1_HeaderTitle',
        config: {
            type: 'underline',
            color: '#2196F3',
        },
    },
    {
        page: 'post',
        selector: '#cb_post_title_url',
        config: {
            type: 'highlight',
            color: '#FFF176',
        },
    },
    {
        page: 'post',
        selector: 'mark',
        config: {
            type: 'highlight',
            color: '#FFD54F',
        },
    },
    {
        page: 'post',
        selector: 's',
        config: {
            type: 'strike-through',
            color: '#FF0000',
        },
    },
    {
        page: 'post',
        selector: 'u',
        config: {
            type: 'underline',
            color: '#2196F3',
        },
    },
    {
        page: 'post',
        selector: 'strong',
        config: {
            type: 'circle',
            color: '#F44336',
        },
    },
]

const buildGroup = items => {
    for (let { selector, page, config } of items) {
        if (page === 'all' || pageName === page) {
            const element = document.querySelectorAll(selector)
            if (!element.length) return
            if (element.length === 1)
                group.push(annotate(document.querySelector(selector), config))
            if (element.length > 1) {
                element.forEach(function(item) {
                    group.push(annotate(item, config))
                })
            }
        }
    }
}

const notation = (customList = annotateList) => {
    buildGroup(customList)
    const ag = annotationGroup(group)
    setTimeout(() => {
        ag.show()
    }, 1000)
}

export default notation

在建立的博客園皮膚使用時，只須要 import notation，能夠傳入一些元素列表或者使用默認的列表。