為什么當我使用代碼但適用於 codepen 時，anime.js 示例不起作用？

Question

所以，我一直在嘗試使用來自anime.js 的驚人動畫，這就是這個。

但是當我在復制代碼后使用它時，這個動畫不起作用，但它在 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()執行所有 JavaScript

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 個解決方案

解決方案1
0 2019-08-08 10:56:32

解決方案2
0 2020-07-27 00:34:10

為什么當我使用代碼但適用於 codepen 時，anime.js 示例不起作用？

問題描述

2 個解決方案

解決方案1 0 2019-08-08 10:56:32

解決方案2 0 2020-07-27 00:34:10

解決方案1
0 2019-08-08 10:56:32

解決方案2
0 2020-07-27 00:34:10