为什么当我使用代码但在 codepen 上工作时，anime.js 示例不起作用？答案

【问题标题】：Why is anime.js example not working when I use the code but works on codepen?为什么当我使用代码但在 codepen 上工作时，anime.js 示例不起作用？
【发布时间】：2019-08-08 10:46:14
【问题描述】：

所以，我一直在尝试使用来自anime.js 的惊人动画，which is this one。

但是当我在复制代码后使用它时，这个动画不起作用，但它在 codepen 上起作用。我已经完全按照原样获取了代码。

以下是我添加anime.js和其他js文件的方法：

<script type="text/javascript" src="https://codepen.io/juliangarnier/pen/75efae7724dbc3c055e918057fc4aca5"></script>
    <script src="anime-master/lib/anime.min.js"></script>
<script src="js/sphere.js"></script>

sphere.js 是包含来自 codepen 的 js 代码的文件。其他一切都完全相同。有什么我做错了还是我在这里失踪了。非常感谢任何帮助。

查看动画的以下js代码后，错误状态：

UncaughtReferenceError 动画未定义在anime.set() 以下代码的一部分。

function fitElementToParent(el, padding) {
    var timeout = null;
    function resize() {
        if (timeout) clearTimeout(timeout);
        anime.set(el, {scale: 1});
        var pad = padding || 0;
        var parentEl = el.parentNode;
        var elOffsetWidth = el.offsetWidth - pad;
        var parentOffsetWidth = parentEl.offsetWidth;
        var ratio = parentOffsetWidth / elOffsetWidth;
        timeout = setTimeout(anime.set(el, {scale: ratio}), 10);
    }
    resize();
    window.addEventListener('resize', resize);
}

var sphereAnimation = (function() {

    var sphereEl = document.querySelector('.sphere-animation');
    var spherePathEls = sphereEl.querySelectorAll('.sphere path');
    var pathLength = spherePathEls.length;
    var hasStarted = false;
    var aimations = [];

    fitElementToParent(sphereEl);

    var breathAnimation = anime({
        begin: function() {
            for (var i = 0; i < pathLength; i++) {
                aimations.push(anime({
                    targets: spherePathEls[i],
                    stroke: {value: ['rgba(255,75,75,1)', 'rgba(80,80,80,.35)'], duration: 500},
                    translateX: [2, -4],
                    translateY: [2, -4],
                    easing: 'easeOutQuad',
                    autoplay: false
                }));
            }
        },
        update: function(ins) {
            aimations.forEach(function(animation, i) {
                var percent = (1 - Math.sin((i * .35) + (.0022 * ins.currentTime))) / 2;
                animation.seek(animation.duration * percent);
            });
        },
        duration: Infinity,
        autoplay: false
    });

    var introAnimation = anime.timeline({
        autoplay: false
    })
        .add({
            targets: spherePathEls,
            strokeDashoffset: {
                value: [anime.setDashoffset, 0],
                duration: 3900,
                easing: 'easeInOutCirc',
                delay: anime.stagger(190, {direction: 'reverse'})
            },
            duration: 2000,
            delay: anime.stagger(60, {direction: 'reverse'}),
            easing: 'linear'
        }, 0);

    var shadowAnimation = anime({
        targets: '#sphereGradient',
        x1: '25%',
        x2: '25%',
        y1: '0%',
        y2: '75%',
        duration: 30000,
        easing: 'easeOutQuint',
        autoplay: false
    }, 0);

    function init() {
        introAnimation.play();
        breathAnimation.play();
        shadowAnimation.play();
    }

    init();

})();

【问题讨论】：

检查控制台。很可能是由于配置不同而导致的错误
@RoryMcCrossan 我也添加了控制台错误，抱歉编辑延迟
为什么要在脚本标签中编写 url？
@kiranvj 删除或添加不会改变任何东西，但我在一个 SO 答案中读到它是必需的，因为可能有这个文件包含我们版本中缺少的代码

标签： javascript jquery html animation anime.js

【解决方案1】：

删除这个，你不需要它。

<script type="text/javascript" src="https://codepen.io/juliangarnier/pen/75efae7724dbc3c055e918057fc4aca5"></script>

下面的行不适合你

<script src="anime-master/lib/anime.min.js"></script>

检查路径anime-master/lib/anime.min.js是否正确
检查控制台中的 404 错误
在 window.load 或 $( document ).ready() 中执行所有 JavaScript

【讨论】：

所以，我确实删除了它并添加了 document.on('load', function()) .. 因为 ready() 现在已弃用，但我仍然没有得到动画，只有球体。另外，我下载了 github 页面上提到的 zip 并使用了正确的路径到anime.min.js，但动画不工作
$(document).on('load', function() { put all ur js code here }); ;在控制台中，只需输入anime 并输入，你看到了什么？。
如果可行，也试试<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

【解决方案2】：

尝试将与anime.js 交互的js 代码移动到像这样的html 文件中

var animation = anime.timeline({...})
animation.add({...})

所以在你的情况下，你必须将你的 sphere 变量移动到 html 文件中，它看起来像这样

<html>
...
  <script src="your_other_js_file.js"></script>
  <script>
    var sphereAnimation = (function() {

          //your code here

    })();
  </script>
...
</html>

这解决了我的问题，我真的不知道为什么它只是通过将它从 js 文件移动到 html 来工作，但现在这个临时修复就可以了

我也很确定，有更好的方法来做到这一点

【讨论】：