#javascript #html #animation #svg
#javascript #HTML #Анимация #svg
Вопрос:
Я только начал работать с SVG и собрал достаточно информации, чтобы увидеть, что анимация этих объектов — это не то же самое, что анимация объектов canvas. С объектами canvas холст перерисовывается в каждом кадре, но, похоже, с SVG вы не должны думать в терминах кадров и кадров в секунду, а скорее в терминах секунд и задержек, используя встроенный <animate> тег.
Хотя я ценю всю готовую функциональность для SVG-анимации, я хорошо понимаю (и библиотеку), как заставить мои анимации работать вместе на canvas с использованием фреймов и парадигмы временной шкалы.
Я знаю, что для SVG существует поддержка временной шкалы и планирования с помощью библиотек типа GSAP or SVG.js , но я предпочитаю думать в терминах FPS и и frameCount .
Мне было интересно, смогу ли я продолжать использовать эту парадигму, но вместо этого просто обновлять атрибуты моих объектов SVG на каждой итерации кадра и позволять DOM повторно отображать позиции вместо того, чтобы придумывать способ описания анимации в <animate> теге.
Я полностью открыт для предложений, если использование <animate> тега не так сложно, как я думаю, для планирования моих анимаций / их совместного перемещения, и любые предложения будут высоко оценены.
Мои потребности в анимации не относятся к высокопроизводительным веб-сайтам, я просто хочу пошагово просмотреть их, чтобы показать людям некоторые математические концепции по мере их продвижения.
Комментарии:
1. У вас есть свободный выбор. Используйте анимацию SMIL (это то, что вы обнаружили), анимацию ключевых кадров CSS или императивную анимацию Javascript, используя интерфейс window.requestAnimationFrame() . Пока производительность не вызывает беспокойства, все это справедливая ставка. Если это вызывает беспокойство, это , возможно, стоит рассмотреть
2. @ccprog Большое вам спасибо. Допустим, я смог создать абстракцию «Временной шкалы», подобную той, о которой я упоминал выше, и эта временная шкала могла принимать команды из парадигмы
framesиFPSи генерировать соответствующие теги анимации дляSVGэлементов, было бы тогда это лучшим из обоих миров? (императивный или декларативный) .3. Это довольно широкое и, безусловно, неспецифичное. Возможно, если вы опубликуете какой-нибудь код, чтобы показать, какой тип описания вы используете в данный момент, можно было бы дать некоторые подсказки о том, куда идти дальше.
4. @ccprog Создание тегов анимации является декларативным, что означает, что оно может быть оптимизировано браузером правильно? Это хорошо, потому что это может привести к более плавной работе. Декларативная анимация описана здесь как более быстрая и не блокирует основной поток. Javascript, с другой стороны, является обязательным и блокирует основной поток. Мне интересно, написал ли я javascript для генерации этих тегов анимации, если это было бы оптимально. Еще раз спасибо! Извините за путаницу.
5. Встречный аргумент заключается в том, что с декларативным языком вы всегда боретесь с его словарным запасом. Что, если он не знает, как выполнить интерполяцию между определенными значениями? Что, если определенная функция упрощения не поддерживается? Две концепции, с которыми, как я вижу, разработчики регулярно сталкиваются, — это преобразование путей и интерполяции по нескольким параметрам (в основном, двумерной геометрии). Вот почему я спросил о примерах кода. Если мы сможем увидеть, какие вещи вы анимируете, мы могли бы догадаться о сложных крайних случаях.
Ответ №1:
Обновление атрибутов SVG-элементов — это совершенно отличный способ их анимации. Это может быть более производительным, чем очистка всех элементов в вашем основном теге SVG и перерисовка — но это зависит от чертежа, браузера и деталей анимации. Но SVG визуализируется на удивление быстро, поэтому, если вы просто просматриваете адаптированные фреймы для демонстрации концепции, и если было бы удобнее думать о каждом фрейме независимо, вы должны быть в полном порядке, чтобы также очистить и перерисовать. Если ваш проект предназначен для веб-сайта, обязательно протестируйте свою реализацию хотя бы в Chrome и Firefox, поскольку у них есть небольшие различия.