SVG маски и вау-эффекты: о магии простыми словами

[NeXTs_od]

Спасибо за идею с раскраской. Мне бы сходу в голову такая идея не пришла.

[Sergey-Pimenov]

Спасибо за статью, приятно видеть такое на русском языке. У меня к вам куча вопросов.

• Какие техники и инструменты вы используете для морфинга в SVG или Canvas? Правда, это тема для статьи.
• Как происходит работа с дизайнером/заказчиком. Делает ли дизайнер раскадровки и прототипы анимации? Или анимации проектируете сами?
• Очень чувствителен вопрос производительности анимации. Хотелось бы разным устройствам отдавать разную анимацию, в зависимости от производительности. Есть ли какой-то реальный способ определения производительности устройства в контексте браузера? Если нет, то как следует поступать, ведь нужно же как-то сделать хорошо для разных классов устройств.

[sfi0zy]

Правда, это тема для статьи.

Да, про это лучше статью написать.

Как происходит работа с дизайнером/заказчиком

К сожалению в наших реалиях мало дизайнеров, прошаренных в плане анимаций, а заказчики часто сами не знают, что такое бывает. Так что по большей части делаю все сам или по примерным наброскам (что-то вроде очень простой раскадровки). Недавно на тостере задавали вопрос про передачу анимации, если она была отрендерена в какой-либо программе, я там более подробно описал, что желательно иметь в таком случае, но это скорее исключение.

вопрос производительности

Обычно достаточно не запускать более одной анимации в единицу времени, а на маленьких экранах уменьшать количество элементов в них (например в последнем примере можно не 10 прямоугольников делать, а 3-5). Для сложных анимаций на canvas иногда считают fps и что-то меняют в зависимости от полученного значения.

[Ne01eX]

Есть мнение, что некоторые вещи проще делать в самом svg-файле вообще не прибегая к JS.

Например, это:

[triton]

Не хочу вас огорчать, но там внутри SVG-файла тоже JS
function setClock()
{
var date = new Date()
var h = parseInt(date.getHours())
h = h > 12 ? h-12: h
var m = parseInt(date.getMinutes())
var s = parseInt(date.getSeconds())
...


[Ne01eX]

Я не совсем корректно выразился. При использовании скрипта внутри svg-файла он остаётся рабочим и при использовании расширений для браузеров отключающих скрипты на диалектах ECMAScript. Ну и самодостаточность такого решения, опять же.

А статья мне понравилась, ага.

[KeySVG]

Вот чистоган без js — правда голая анимация без синхрона с часиками компа или сервера.

[isuo]

Но JS использован только для синхронизации времени, анимация родная svg

[andreyorst]

Помню лет 13 назад, когда в вебе интерактив преимущественно держался на флеше, я «фрилансил» (и слова такого тогда не знал), создавая баннеры с такого рода анимациями. Благо, в той же Macromedia Flash можно было, сочетая маски и Motion Tween анимацию, делать практически всё, что сейчас делают моушн дизайнеры. Правда не так удобно и быстро, как в современных инструментах.

[narekchang]

Когда-то давно загорелся идеей сделать все иконки на сайте через наложение маски иконки поверх цвета. Отказался от этой мысли, так как в FF поддержки масок толком не было. Сама статья хорошая, но и сейчас ситуация с масками не очень понятна. Возможно, рановато использовать.

caniuse.com/#search=mask

[sfi0zy]

Вы говорите про использование масок в CSS, там и правда все печально с поддержкой браузерами. А так они были уже очень давно и в пределах svg элементов работают во всех современных браузерах.

[greenkey]

svg открыл целый пласт возможностей, спасибо