• Как лучше анимировать svg?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Зависит от того, что именно вы хотите анимировать в svg. Кому то трансформаций хватит, а кому-то нужны сложные анимации для path со всякими кастомными приблудами.
    Универсальные варианты - GSAP и D3. Гсап чисто заточен под анимации, и там имеется большое количество готовых решений/плагинов для свг. Если вам необходимо сделать крутую и комплексную анимацию, то это наверное самый оптимальный вариант. D3 тоже хорош, но он больше рассчитан на работу с данными, и для всяких красивяшек-анимашек не особо подойдет.
    Есть еще velocityJS и подобные либы, но они все по сути дела являются лайт-версиями Гсапа (при том что у самого гсапа есть более легкие его версии).
    CSS умеет многое, с ним можно даже анимировать отрисовку path и подобные штуки, но он вообще не дружит ни с какими ИЕ, когда дело касается работы с path (+ в ФФ имеются проблемы с transform-origin). Примеры баловства с svg лоадерами на чистом css:
    codepen.io/suez/pen/myvgdg
    codepen.io/suez/pen/ogmMOM
    codepen.io/suez/pen/MwJdRy

    Если вам необходимо сделать что-то совсем уж кастомное и крутое, и при этом вы совершенно не уверены что либы в этом вам помогут (либо нет такого функционала, либо пока научитесь его юзать - сойдете с ума), то придется писать велосипеды на js. requestAnimationFrame и в бой. Вот два велосипеда для примера - codepen.io/suez/pen/oXLroX и codepen.io/suez/pen/emjwvP

    Ах да, еще есть SMIL анимации (которые прямо внутри SVG описываются) и они умеют очень многое (во многом даже удобнее js получаются, без потери в функциональности), но от них уже медленно отказываются современные браузеры (да и к тому же они никогда не поддерживались в IE). Так что их можете обходить стороной.
    Ответ написан
  • Как спрятать служебный метод?

    Используйте Node.js 6, там уже есть классы и стрелочные функции. Код станет намного компактнее и красивее.
    По поводу служебных методов: если имеются в виду private-методы, то в этом нет особой необходимости. Но если все же очень надо, это делается через Symbol, WeakMap или замыкание. Примеры можно легко нагуглить. Так же есть вариант с декораторами https://github.com/elado/class-private-method-decorator
    Но для него нужно подключать в проект Babel.
    P.S. Если нужен чистый синтаксис можно использовать TypeScript. Пример из документации:
    class Animal {
        private name: string;
        constructor(theName: string) { this.name = theName; }
    }
    
    new Animal("Cat").name; // Error: 'name' is private;
    Ответ написан
    Комментировать