给你的网站添加炫酷的动画注释

前置

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，能够传入一些元素列表或者使用默认的列表。