如何在 Angular cli 应用程序中添加 JavaScript 文件？

Question

我正在尝试在我的 Angular 应用程序中复制这种效果 - https://codepen.io/jonathasborges1/pen/YzryRpX。

但我很难应用效果

有人可以帮助我吗？

"use strict";
var LeafScene = function (el) {
    this.viewport = el;
    this.world = document.createElement("div");
    this.leaves = [];
    this.options = {
        numLeaves: 60,
        wind: {
            magnitude: 1.2,
            maxSpeed: 12,
            duration: 300,
            start: 0,
            speed: 0
        }
    };
    this.width = this.viewport.offsetWidth;
    this.height = this.viewport.offsetHeight;
    // animation helper
    this.timer = 0;
    this._resetLeaf = function (leaf) {
        // place leaf towards the top left
        leaf.x = this.width * 2 - Math.random() * this.width * 1.75;
        leaf.y = -10;
        leaf.z = Math.random() * 200;
        if (leaf.x > this.width) {
            leaf.x = this.width + 10;
            leaf.y = (Math.random() * this.height) / 2;
        }
        // at the start, the leaf can be anywhere
        if (this.timer == 0) {
            leaf.y = Math.random() * this.height;
        }
        // Choose axis of rotation.
        // If axis is not X, chose a random static x-rotation for greater variability
        leaf.rotation.speed = Math.random() * 10;
        var randomAxis = Math.random();
        if (randomAxis > 0.5) {
            leaf.rotation.axis = "X";
        }
        else if (randomAxis > 0.25) {
            leaf.rotation.axis = "Y";
            leaf.rotation.x = Math.random() * 180 + 90;
        }
        else {
            leaf.rotation.axis = "Z";
            leaf.rotation.x = Math.random() * 360 - 180;
            // looks weird if the rotation is too fast around this axis
            leaf.rotation.speed = Math.random() * 3;
        }
        // random speed
        leaf.xSpeedVariation = Math.random() * 1 - 0.2;
        leaf.ySpeed = Math.random();
        return leaf;
    };
    this._updateLeaf = function (leaf) {
        var leafWindSpeed = this.options.wind.speed(this.timer - this.options.wind.start, leaf.y);
        var xSpeed = leafWindSpeed + leaf.xSpeedVariation;
        leaf.x -= xSpeed;
        leaf.y += leaf.ySpeed;
        leaf.rotation.value += leaf.rotation.speed;
        var t = "translateX( " +
            leaf.x +
            "px ) translateY( " +
            leaf.y +
            "px ) translateZ( " +
            leaf.z +
            "px )  rotate" +
            leaf.rotation.axis +
            "( " +
            leaf.rotation.value +
            "deg )";
        if (leaf.rotation.axis !== "X") {
            t += " rotateX(" + leaf.rotation.x + "deg)";
        }
        leaf.el.style.webkitTransform = t;
        leaf.el.style.MozTransform = t;
        leaf.el.style.oTransform = t;
        leaf.el.style.transform = t;
        // reset if out of view
        if (leaf.x < -10 || leaf.y > this.height + 10) {
            this._resetLeaf(leaf);
        }
    };
    this._updateWind = function () {
        if (this.timer === 0 ||
            this.timer > this.options.wind.start + this.options.wind.duration) {
            this.options.wind.magnitude = Math.random() * this.options.wind.maxSpeed;
            this.options.wind.duration =
                this.options.wind.magnitude * 50 + (Math.random() * 20 - 10);
            this.options.wind.start = this.timer;
            var screenHeight = this.height;
            this.options.wind.speed = function (t, y) {
                var a = ((this.magnitude / 2) * (screenHeight - (2 * y) / 3)) / screenHeight;
                return (a *
                    Math.sin(((2 * Math.PI) / this.duration) * t + (3 * Math.PI) / 2) +
                    a);
            };
        }
    };
};
LeafScene.prototype.init = function () {
    for (var i = 0; i < this.options.numLeaves; i++) {
        var leaf = {
            el: document.createElement("div"),
            x: 0,
            y: 0,
            z: 0,
            rotation: {
                axis: "X",
                value: 0,
                speed: 0,
                x: 0
            },
            xSpeedVariation: 0,
            ySpeed: 0,
            path: {
                type: 1,
                start: 0
            },
            image: 1
        };
        this._resetLeaf(leaf);
        this.leaves.push(leaf);
        this.world.appendChild(leaf.el);
    }
    this.world.className = "leaf-scene";
    this.viewport.appendChild(this.world);
    // reset window height/width on resize
    var self = this;
    window.onresize = function (event) {
        self.width = self.viewport.offsetWidth;
        self.height = self.viewport.offsetHeight;
    };
};
LeafScene.prototype.render = function () {
    this._updateWind();
    for (var i = 0; i < this.leaves.length; i++) {
        this._updateLeaf(this.leaves[i]);
    }
    this.timer++;
    requestAnimationFrame(this.render.bind(this));
};
// start up leaf scene
var leafContainer = document.querySelector(".falling-leaves"), leaves = new LeafScene(leafContainer);
leaves.init();
leaves.render();

Answer 1

您可以创建一个像 这样的文件并将其保存为 script.js，然后将其添加到您的 index.html 或动态加载它：

public loadScript(){
    return new Promise(resolve => {
      const scriptElement = document.createElement('script');
      scriptElement.src = '/assets/js/script.js'
      scriptElement.onload = resolve;
      document.body.appendChild(scriptElement);
    });
  }

然后在你的 ts 文件中调用和订阅这个函数来知道它什么时候被加载或者当它被加载到你的页面时做一些事情。