Как изменить скрипт анимации svg

102
27 ноября 2019, 18:20

Есть такой скрипт - (function() {

'use strict';
var docElem = window.document.documentElement;
window.requestAnimFrame = function(){
    return (
        window.requestAnimationFrame       || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function(/* function */ callback){
            window.setTimeout(callback, 1000 / 60);
        }
    );
}();
window.cancelAnimFrame = function(){
    return (
        window.cancelAnimationFrame       || 
        window.webkitCancelAnimationFrame || 
        window.mozCancelAnimationFrame    || 
        window.oCancelAnimationFrame      || 
        window.msCancelAnimationFrame     || 
        function(id){
            window.clearTimeout(id);
        }
    );
}();
function SVGEl( el ) {
    this.el = el;
    this.image = this.el.previousElementSibling;
    this.current_frame = 0;
    this.total_frames = 150;
    this.path = new Array();
    this.length = new Array();
    this.handle = 0;
    this.init();
}
SVGEl.prototype.init = function() {
    var self = this;
    [].slice.call( this.el.querySelectorAll( 'path' ) ).forEach( function( path, i ) {
        self.path[i] = path;
        var l = self.path[i].getTotalLength();
        self.length[i] = l;
        self.path[i].style.strokeDasharray = l + ' ' + l; 
        self.path[i].style.strokeDashoffset = l;
    } );
};

SVGEl.prototype.render = function() {
    if( this.rendered ) return;
    this.rendered = true;
    this.draw();
};
SVGEl.prototype.draw = function() {
    var self = this,
        progress = this.current_frame/this.total_frames;
    if (progress > 1) {
        window.cancelAnimFrame(this.handle);
        this.showImage();
    } else {
        this.current_frame++;
        for(var j=0, len = this.path.length; j<len;j++){
            this.path[j].style.strokeDashoffset = Math.floor(this.length[j] * (1 - progress));
        }
        this.handle = window.requestAnimFrame(function() { self.draw(); });
    }
};
SVGEl.prototype.showImage = function() {
    classie.add( this.image, 'show' );
    classie.add( this.el, 'hide' );
};
function getViewportH() {
    var client = docElem['clientHeight'],
        inner = window['innerHeight'];
    if( client < inner )
        return inner;
    else
        return client;
}
function scrollY() {
    return window.pageYOffset || docElem.scrollTop;
}
// http://stackoverflow.com/a/5598797/989439
function getOffset( el ) {
    var offsetTop = 0, offsetLeft = 0;
    do {
        if ( !isNaN( el.offsetTop ) ) {
            offsetTop += el.offsetTop;
        }
        if ( !isNaN( el.offsetLeft ) ) {
            offsetLeft += el.offsetLeft;
        }
    } while( el = el.offsetParent )
    return {
        top : offsetTop,
        left : offsetLeft
    };
}
function inViewport( el, h ) {
    var elH = el.offsetHeight,
        scrolled = scrollY(),
        viewed = scrolled + getViewportH(),
        elTop = getOffset(el).top,
        elBottom = elTop + elH,
        // если 0, элемент считается в области просмотра, как только он входит.
        // если 1, элемент рассматривается в области просмотра только тогда, когда он полностью
        // находится внутри значения в процентах (1> = h> = 0)
        h = h || 0;
    return (elTop + elH * h) <= viewed && (elBottom) >= scrolled;
}
function init() {
    var svgs = Array.prototype.slice.call( document.querySelectorAll( '#main svg' ) ),
        svgArr = new Array(),
        didScroll = false,
        resizeTimeout;
    // svgs уже показано ...
    svgs.forEach( function( el, i ) {
        var svg = new SVGEl( el );
        svgArr[i] = svg;
        setTimeout(function( el ) {
            return function() {
                if( inViewport( el.parentNode ) ) {
                    svg.render();
                }
            };
        }( el ), 250 ); 
    } );
    var scrollHandler = function() {
            if( !didScroll ) {
                didScroll = true;
                setTimeout( function() { scrollPage(); }, 60 );
            }
        },
        scrollPage = function() {
            svgs.forEach( function( el, i ) {
                if( inViewport( el.parentNode, 0.5 ) ) {
                    svgArr[i].render();
                }
            });
            didScroll = false;
        },
        resizeHandler = function() {
            function delayed() {
                scrollPage();
                resizeTimeout = null;
            }
            if ( resizeTimeout ) {
                clearTimeout( resizeTimeout );
            }
            resizeTimeout = setTimeout( delayed, 200 );
        },
        clickMenu = function() {
            svgs.forEach( function( el, i ) {
                if( inViewport( el.parentNode, 0.5 ) ) {
                    svgArr[i].render();
                }
            });
            didScroll = false;
        };
    window.addEventListener( 'scroll', scrollHandler, false );
    window.addEventListener( 'resize', resizeHandler, false );
    window.addEventListener( 'click', clickMenu, false );
}
init();

})();

Как заставить работать анимацию и по клику тоже

READ ALSO
Фазы работы скрипта js

Фазы работы скрипта js

На learnjs написано:

93
не работает navigator.app.loadUrl в приложении vue.js cordova

не работает navigator.app.loadUrl в приложении vue.js cordova

столкнулся проблемой, не работает функция открытия ссылки в дефолтном браузере устройства из приложения на vuejs в cordova 5

105
Найти объект в массиве

Найти объект в массиве

Всем привет! Я новичок, мне нужна ваша помощь, есть такой код:

122
Как можно с помощью JavaScript передать файл на сервер?

Как можно с помощью JavaScript передать файл на сервер?

На счет картинки понятно - ее можно передать с помощью base64, а как файл?У меня файл 100 мб, я хочу положить его на сервер 192168

120