Question

我想从这个联合教程中创建一个聚合物

http://tympanus.net/codrops/2013/07/03/interactive-particles-slideshow/

我可以创建一个基本组件，但脚本particleSlideshow.js不会触发。

我认为这是因为我需要将其代码移动到聚合物init脚本中，但我不知道如何做到这一点。这是文件中的脚本。任何想法如何将其转移到聚合物。我想我想知道init中的内容以及可以保留在外部文件中的内容。

var self = window;

;(function(self) {

    var canvas,
        context, 
        particles = [], 
        text = [], 
        nextText = [], 
        shape = {}, 
        mouse = { x: -99999, y: -99999 }, 
        currentTransition = 'circle', 
        left, right, 
        layout = 0, 
        type = ['circle', 'ovals', 'drop', 'ribbon'], 
        FPS = 60,

        /*
         * List words.
         */

        words = [ 'circle', 'ovals', 'drop', 'ribbon' ],

        /*
         * List colors.
         */

        colors = {
            circle: [ '#e67e22', '#2c3e50' ],
            ovals: [ '#c0392b', '#ff7e15' ],
            drop: [ '#1d75cf', '#3a5945' ],
            ribbon: [ '#702744', '#f98d00' ]
        };

    /*
     * Init.
     */

    function init() {

        console.log(document.querySelector('.ip-slideshow').length);
        console.log(shadow.querySelector('.ip-slideshow').length);

        var slideshowContainer = document.querySelector('.ip-slideshow');

        canvas = document.createElement('canvas');

        canvas.width = innerWidth;
        canvas.height = 500;

        slideshowContainer.appendChild(canvas);

        // Browser supports canvas?
        if(!!(capable)) {

            context = canvas.getContext('2d');

            // Events
            if('ontouchmove' in window) {
                canvas.addEventListener('touchup', onTouchUp, false);
                canvas.addEventListener('touchmove', onTouchMove, false);   
            }
            else {
                canvas.addEventListener('mousemove', onMouseMove, false);
            }

            // Arrows
            handleClick('bind', 'left');
            handleClick('bind', 'right');

            window.onresize = onResize;

            createParticles();

            // Arrows elements
            left = document.querySelector('.ip-nav-left');
            right = document.querySelector('.ip-nav-right');

            // Show right arrow
            right.classList.add('ip-nav-show');

        }
        else {
            console.error('Sorry, switch to a better browser to see this experiment.');
        }

    }

    /*
     * Checks if browser supports canvas element.
     */

    function capable() {
        return canvas.getContext && canvas.getContext('2d');
    }

    /*
     * On resize window event.
     */

    function onResize() {

        canvas.width = window.innerWidth;
        canvas.height = 500;

        // Reset the text particles, and align again on the center of screen
        nextText = [];
        updateText();

    }

    function scrollX() {
        return window.pageXOffset || window.document.documentElement.scrollLeft; 
    }

......

    /*
     * Request new frame by Paul Irish.
     * 60 FPS.
     */

    window.requestAnimFrame = (function() {

        return  window.requestAnimationFrame       || 
                window.webkitRequestAnimationFrame || 

                function(callback) {

                    window.setTimeout(callback, 1000 / FPS);

                };

    })();

    window.addEventListener ? window.addEventListener('load', init, false) : window.onload = init;

})(self);

Answer 1

如果更改脚本而不是

window.addEventListener ? window.addEventListener('load', init, false) : window.onload = init;

你做了类似

的事情

self.initParticlesSlideshow = init;

然后你可以在这样一个元素的domReady中调用它：

Polymer('my-element', {
  domReady: function() {
    initParticlesSlideshow();
  }
});

还有很多其他方法可以做到这一点，以及许多其他细节;我只是想让你开始。 = P

将外部init函数转换为聚合函数

1 个答案: