Anime.js 实现带有描边动画效果的复选框攻略

简介

Anime.js 是一个轻量级的 JavaScript 动画库，可以用来快速的创建各种各样的动画效果。本攻略将介绍如何通过 Anime.js 实现带有描边动画效果的复选框。

步骤

1. 安装 Anime.js

我们首先需要安装 Anime.js，可以通过 npm 或者直接下载源码安装。

npm install animejs

或者直接下载最新的 Anime.js 源码。

2. HTML 结构

我们需要先创建一个 HTML 结构，这里我们以一个简单的复选框为例。

<input type="checkbox" id="checkbox">
<label for="checkbox">复选框</label>

3. CSS 样式

我们需要为复选框添加一些基础样式和动画效果。

input[type="checkbox"] {
    display: none;
}

label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

label:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #999;
    left: 0;
    bottom: 2px;
}

label:after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    left: 5px;
    bottom: 7px;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

input[type="checkbox"]:checked + label:after {
    opacity: 1;
}

4. Anime.js 配置

我们需要配置 Anime.js 的参数，创建一个描边动画效果。

const checkbox = document.querySelector('#checkbox');
const path = anime.path('path');
const timeline = anime.timeline({
    autoplay: false
});

timeline
    .add({
        targets: path,
        strokeDashoffset: [anime.setDashoffset, 0],
        duration: 300,
        easing: 'easeInOutSine'
    })
    .add({
        targets: path,
        strokeDashoffset: [0, -anime.setDashoffset],
        duration: 300,
        easing: 'easeInOutSine'
    });

checkbox.addEventListener('change', () => {
    if (checkbox.checked) {
        timeline.play();
    } else {
        timeline.reverse();
    }
});

5. 完整实例

我们可以通过下面的完整示例来查看整个过程。

HTML

<head>
    <meta charset="UTF-8">
    <title>Anime.js 实现带有描边动画效果的复选框</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <input type="checkbox" id="checkbox">
    <label for="checkbox">复选框</label>
    <svg viewBox="0 0 100 50" width="0" height="0">
        <path d="M 0 25 C 20 45 80 45 100 25 C 80 5 20 5 0 25" fill="transparent" stroke="#FFBFBF" stroke-width="2" />
    </svg>

    <script src="./anime.min.js"></script>
    <script src="./script.js"></script>
</body>

CSS

input[type="checkbox"] {
    display: none;
}

label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

label:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #999;
    left: 0;
    bottom: 2px;
}

label:after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    left: 5px;
    bottom: 7px;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

input[type="checkbox"]:checked + label:after {
    opacity: 1;
}

JavaScript

const checkbox = document.querySelector('#checkbox');
const path = anime.path('path');
const timeline = anime.timeline({
    autoplay: false
});

timeline
    .add({
        targets: path,
        strokeDashoffset: [anime.setDashoffset, 0],
        duration: 300,
        easing: 'easeInOutSine'
    })
    .add({
        targets: path,
        strokeDashoffset: [0, -anime.setDashoffset],
        duration: 300,
        easing: 'easeInOutSine'
    });

checkbox.addEventListener('change', () => {
    if (checkbox.checked) {
        timeline.play();
    } else {
        timeline.reverse();
    }
});

示例说明

示例一

我们可以通过下面的示例来查看描边动画效果的实现过程。

<input type="checkbox" id="checkbox">
<label for="checkbox">复选框</label>
<svg viewBox="0 0 100 50" width="0" height="0">
    <path d="M 0 25 C 20 45 80 45 100 25 C 80 5 20 5 0 25" fill="transparent" stroke="#FFBFBF" stroke-width="2" />
</svg>

<script src="./anime.min.js"></script>
<script>
    const checkbox = document.querySelector('#checkbox');
    const path = anime.path('path');
    const timeline = anime.timeline({
        autoplay: false
    });

    timeline
        .add({
            targets: path,
            strokeDashoffset: [anime.setDashoffset, 0],
            duration: 300,
            easing: 'easeInOutSine'
        })
        .add({
            targets: path,
            strokeDashoffset: [0, -anime.setDashoffset],
            duration: 300,
            easing: 'easeInOutSine'
        });

    checkbox.addEventListener('change', () => {
        if (checkbox.checked) {
            timeline.play();
        } else {
            timeline.reverse();
        }
    });
</script>

<style>
    input[type="checkbox"] {
        display: none;
    }

    label {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
    }

    label:before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 20px;
        height: 20px;
        border: 2px solid #999;
        left: 0;
        bottom: 2px;
    }

    label:after {
        content: "";
        display: inline-block;
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #fff;
        left: 5px;
        bottom: 7px;
        opacity: 0;
        transition: opacity 0.1s ease-in-out;
    }

    input[type="checkbox"]:checked + label:after {
        opacity: 1;
    }
</style>

示例二

我们可以通过下面的示例来查看复选框的基础样式和动画效果。

<input type="checkbox" id="checkbox">
<label for="checkbox">复选框</label>

<style>
    input[type="checkbox"] {
        display: none;
    }

    label {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
    }

    label:before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 20px;
        height: 20px;
        border: 2px solid #999;
        left: 0;
        bottom: 2px;
    }

    label:after {
        content: "";
        display: inline-block;
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #fff;
        left: 5px;
        bottom: 7px;
        opacity: 0;
        transition: opacity 0.1s ease-in-out;
    }

    input[type="checkbox"]:checked + label:after {
        opacity: 1;
    }
</style>