Comments 12
Спасибо за идею с раскраской. Мне бы сходу в голову такая идея не пришла.
Спасибо за статью, приятно видеть такое на русском языке. У меня к вам куча вопросов.
- Какие техники и инструменты вы используете для морфинга в SVG или Canvas? Правда, это тема для статьи.
- Как происходит работа с дизайнером/заказчиком. Делает ли дизайнер раскадровки и прототипы анимации? Или анимации проектируете сами?
- Очень чувствителен вопрос производительности анимации. Хотелось бы разным устройствам отдавать разную анимацию, в зависимости от производительности. Есть ли какой-то реальный способ определения производительности устройства в контексте браузера? Если нет, то как следует поступать, ведь нужно же как-то сделать хорошо для разных классов устройств.
Правда, это тема для статьи.
Да, про это лучше статью написать.
Как происходит работа с дизайнером/заказчиком
К сожалению в наших реалиях мало дизайнеров, прошаренных в плане анимаций, а заказчики часто сами не знают, что такое бывает. Так что по большей части делаю все сам или по примерным наброскам (что-то вроде очень простой раскадровки). Недавно на тостере задавали вопрос про передачу анимации, если она была отрендерена в какой-либо программе, я там более подробно описал, что желательно иметь в таком случае, но это скорее исключение.
вопрос производительности
Обычно достаточно не запускать более одной анимации в единицу времени, а на маленьких экранах уменьшать количество элементов в них (например в последнем примере можно не 10 прямоугольников делать, а 3-5). Для сложных анимаций на canvas иногда считают fps и что-то меняют в зависимости от полученного значения.
Есть мнение, что некоторые вещи проще делать в самом svg-файле вообще не прибегая к JS.
Например, это:
Например, это:
Не хочу вас огорчать, но там внутри 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())
...
Я не совсем корректно выразился. При использовании скрипта внутри svg-файла он остаётся рабочим и при использовании расширений для браузеров отключающих скрипты на диалектах ECMAScript. Ну и самодостаточность такого решения, опять же.
А статья мне понравилась, ага.
А статья мне понравилась, ага.
Вот чистоган без js — правда голая анимация без синхрона с часиками компа или сервера.
Но JS использован только для синхронизации времени, анимация родная svg
Помню лет 13 назад, когда в вебе интерактив преимущественно держался на флеше, я «фрилансил» (и слова такого тогда не знал), создавая баннеры с такого рода анимациями. Благо, в той же Macromedia Flash можно было, сочетая маски и Motion Tween анимацию, делать практически всё, что сейчас делают моушн дизайнеры. Правда не так удобно и быстро, как в современных инструментах.
Когда-то давно загорелся идеей сделать все иконки на сайте через наложение маски иконки поверх цвета. Отказался от этой мысли, так как в FF поддержки масок толком не было. Сама статья хорошая, но и сейчас ситуация с масками не очень понятна. Возможно, рановато использовать.
caniuse.com/#search=mask
caniuse.com/#search=mask
svg открыл целый пласт возможностей, спасибо
Sign up to leave a comment.
SVG маски и вау-эффекты: о магии простыми словами