【AnimeJs】——仿Animejs徒手实现SVG动画

原创

已于 2022-12-28 10:05:53 修改 · 917 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html #前端 #动画

于 2022-12-24 17:20:32 首次发布

本文介绍了如何通过自定义JavaScript代码实现SVG动画，以替代anime.js库，从而提高性能。首先分析了anime.js改变SVG动画的原理，然后详细展示了如何编写新的JavaScript函数来实现同样的动画效果，包括处理d、fill和stroke属性的动画，以及应用缓动函数。通过这种方式，可以减少不必要的代码引入，提升页面加载速度。

我们一般会引入anime.js来改变svg动画，但是anime.js源码有一千多行，但我们只需要修改svg这部分的时候，可以通过我们自己手写一段代码来实现svg动画，来优化性能。

首先来看先anime.js是如何改变svg动画：

1、在script标签中引入anime.js：<script src="anime.js"></script>；

2、svg中有path属性，通过改变path中的d、fill、stroke来改变动画效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg class="social" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
        <path class="path"
            style="fill:#3b5998;fill-rule:evenodd;stroke:#3b5998;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
            d="m 41.416254,90 c -0.327378,-7.4702 0.20833,-32.7284 0,-39.901 -5.386902,-0.2083 -4.521603,0.3274 -9.848987,0 0.20833,-5.50595 0.36436,-7.66666 0.126269,-13.32142 4.646472,0.0181 3.439989,-0.009 9.848987,-0.1894 0.09586,-3.7736 0.133082,-3.0791 0.126269,-7.38674 0.18259,-3.73943 -0.486609,-10.54308 4.293149,-14.96288 4.779758,-4.4198 13.606811,-3.64808 22.223356,-3.53554 -0.04417,5.73754 -0.03936,9.37986 0,12.87945 -5.049924,0.46388 -7.309188,-0.33689 -10.85914,1.26269 -1.403378,3.17794 -1.569601,4.80531 -1.262691,11.93242 3.147964,-0.13336 8.201788,-0.1378 12.626907,0 -0.995158,6.00899 -0.948285,7.62376 -1.767767,13.06882 -3.676625,0.088 -5.605721,-0.1488 -11.111678,0 -0.148814,6.756 0.357147,33.0107 0,40.1536 -6.428576,0.1786 -8.174438,-0.03 -14.394674,0 z" />
    </svg>
    <script src="anime.js"></script>
    <script>
        anime({
                targets: '.path',
                d: {
                    // 改变d，从一种状态改变到另一种状态
                    value: [
                        "m 41.416254,90 c -0.327378,-7.4702 0.20833,-32.7284 0,-39.901 -5.386902,-0.2083 -4.521603,0.3274 -9.848987,0 0.20833,-5.50595 0.36436,-7.66666 0.126269,-13.32142 4.646472,0.0181 3.439989,-0.009 9.848987,-0.1894 0.09586,-3.7736 0.133082,-3.0791 0.126269,-7.38674 0.18259,-3.73943 -0.486609,-10.54308 4.293149,-14.96288 4.779758,-4.4198 13.606811,-3.64808 22.223356,-3.53554 -0.04417,5.73754 -0.03936,9.37986 0,12.87945 -5.049924,0.46388 -7.309188,-0.33689 -10.85914,1.26269 -1.403378,3.17794 -1.569601,4.80531 -1.262691,11.93242 3.147964,-0.13336 8.201788,-0.1378 12.626907,0 -0.995158,6.00899 -0.948285,7.62376 -1.767767,13.06882 -3.676625,0.088 -5.605721,-0.1488 -11.111678,0 -0.148814,6.756 0.357147,33.0107 0,40.1536 -6.428576,0.1786 -8.174438,-0.03 -14.39