Question

因此，我一直在尝试使用来自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();

})();

Answer 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()

Answer 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就可以了，但是目前此临时性修复可以解决

我也很确定，有一种更好的方法

为什么在使用代码但在Codepen上有效时anime.js示例不起作用？

2 个答案: