В какой-то момент вашей безумной технической жизни вам пришлось использовать анимацию. В зависимости от сложности вы в конечном итоге будете использовать простые анимации CSS или JS либо сложные анимации SVG или CANVAS. Решение принято, правильное? Ну что ж, посмотрим.

Прежде всего, если вам нужна простая, но немного сложная анимация, производительность SVG или CANVAS не так важна, поэтому это вопрос предпочтений.

ХОЛСТ

Canvas был добавлен в великолепный HTML5. Как мы знаем, Canvas ограничен, поскольку им можно управлять только через JS.

Полномочия:

Его можно использовать буквально для рисования форм и графиков, создания смехотворно сложных фото-композиций, очевидно, вы можете создавать анимацию и самое лучшее, что вы можете разрабатывать для обработки и рендеринга живого видео.

Поскольку у Тора есть свой молот, у холста есть WebGL. WebGL (библиотека веб-графики) - это мощный JS API, который можно использовать для рендеринга интерактивной 3D- и 2D-графики и элементов. Элемент холста используется API для рисования / создания графики с аппаратным ускорением.

Пример:

Если честно, синтаксис довольно прост и удобен для чтения. Давайте посмотрим:

HTML:

"<canvas id="canvas"></canvas>"

Javascript:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

Результатом будет зеленая рамка. Легкий.

Canvas предоставляет высокопроизводительный элемент, который лучше всего подходит для рендеринга растровой графики для интерактивных встраиваний или игр, таких как спрайты, редактирование изображений и приложения, требующие возможности манипулирования пикселями. К сожалению, производительность приложений Canvas снижается с увеличением разрешения, и их не рекомендуется использовать в полноэкранных пользовательских интерфейсах.

SVG

SVG (масштабируемая векторная графика) используется как инструмент для определения графики для Интернета. Элемент SVG имеет собственное окно просмотра и систему координат. SVG допускает только определенные элементы контента, такие как: ‹a›, ‹altGlyphDef›, ‹clipPath›, ‹color-profile›, ‹cursor›, ‹filter›, ‹font›, ‹font-face›, ‹ foreignObject ›, ‹image›, ‹marker›, ‹mask›, ‹pattern›, ‹script›, ‹style›, ‹switch›, ‹text›, ‹view› и его графические элементы ‹ animate ›, ‹animateColor›, ‹animateMotion›, ‹animateTransform›, ‹discard›, ‹mpath›, ‹set›, ‹circle›, ‹ellipse›, ‹line›, ‹polygon›, ‹polyline›, ‹rect› .

Полномочия

SVG не зависит от разрешения, что делает его идеальным для рендеринга кроссплатформенных компонентов UI / UX, анимации и приложений, где каждый элемент должен быть доступен через DOM.

SVG - это действительно мощный инструмент для работы в браузере, поскольку он основан на векторах, что обеспечивает высокое качество, но его также можно сочетать с другими мультимедийными элементами, аудио-тегами и видео.

Атрибут viewBox устанавливает логическую систему координат, относительно которой находятся координаты изображения SVG. В этом случае наша картинка размещается во вьюпорте 100 на 100.

Атрибут preserveAspectRatio указывает, что соотношение сторон должно быть сохранено путем центрирования изображения до доступного размера, увеличения размера до максимальной высоты или ширины и затем отсечения любого переполнения.

Пример.
Синтаксис также легко читается:

<svg id="SearchIcon" viewBox="0 0 3000.29 592.05" xmlns="http://www.w3.org/2000/svg">   
<path 
d="M2409,211.5c0,116.25,94.24,210.5,210.5,210.5a209.45,209.45,0,0,0,115.68-34.66c.55.62,1,1.31,1.55,1.9L2848,500.47A42.79,42.79,0,1,0,2908.47,440L2797.24,328.73c-.59-.59-1.28-1-1.9-1.55A209.46,209.46,0,0,0,2830,211.5C2830,95.24,2735.75,1,2619.5,1S2409,95.24,2409,211.5M2482,211.5A137.53,137.53,0,1,1,2619.5,349,137.53,137.53,0,0,1,2482,211.5">
</path>   
  </svg>

Результатом будет значок поиска вроде это.

Но это элемент SVG. Не изображение! Что можно использовать для некоторой болезненной интерактивности пользовательского интерфейса, например, в этом примере:

https://codepen.io/arcticben/pen/xqBbqK

Есть некоторые недостатки. Во-первых, размер файла может очень быстро увеличиваться, если в объекте много мелких элементов. Во-вторых, как вы видите выше, невозможно прочитать графический объект.

Давайте сравним их.

Гибкость?

Как мы теперь знаем, визуально говорящие SVG-файлы достаточно четкие, даже если вы используете их в виде файла или кода.

Например:

<img src="image.svg" alt="image">
.element {
background-image: url(/images/image.svg);
}
<svg id="SearchIcon" viewBox="0 0 3000.29 592.05" xmlns="http://www.w3.org/2000/svg">    <path d="M2409,211.5c0,116.25,94.24,210.5,210.5,210.5a209.45,209.45,0,0,0,115.68-34.66c.55.62,1,1.31,1.55,1.9L2848,500.47A42.79,42.79,0,1,0,2908.47,440L2797.24,328.73c-.59-.59-1.28-1-1.9-1.55A209.46,209.46,0,0,0,2830,211.5C2830,95.24,2735.75,1,2619.5,1S2409,95.24,2409,211.5M2482,211.5A137.53,137.53,0,1,1,2619.5,349,137.53,137.53,0,0,1,2482,211.5"></path>    </svg>

Независимо от того, какой размер вы измените в браузере / окне, качество останется прежним. Что делает SVG действительно гибкими, так это то, что вы можете увеличивать их размер сверх обычного.

Есть три способа анимировать SVG. CSS и SMIL - это декларативные методы и, конечно же, JavaScript.

Время загрузки

Основываясь на этой хорошо проработанной статье, мы можем просто понять, что используете ли вы Canvas или SVG, во многом зависит от вашего конкретного приложения.

Игра с интенсивной графикой, в которой множество объектов постоянно перерисовывается, вероятно, лучше всего реализовать в Canvas. С другой стороны, такие приложения, как вьюеры карт, могут включать в себя большие области рендеринга и могут лучше подойти для SVG.

Ключевые отличия

Холст

  • Зависит от разрешения
  • Нет поддержки обработчиков событий
  • Плохие возможности рендеринга текста
  • Вы можете сохранить полученное изображение как .png или .jpg.
  • Хорошо подходит для игр с интенсивной графикой

SVG

  • Независимое разрешение
  • Поддержка обработчиков событий
  • Лучше всего подходит для приложений с большими областями рендеринга (Google Maps)
  • Медленный рендеринг, если сложный (все, что много использует DOM, будет медленным)
  • Не подходит для игрового приложения

Примеры

Вот несколько личных примеров:

SVG:

Холст:

Заключение

  • SVG, вероятно, лучше подходит для приложений и приложений с небольшим количеством элементов
  • Холст лучше подходит для тысяч объектов и осторожных манипуляций, но для его реализации требуется гораздо больше кода (или библиотеки).

Поделитесь, если вы сочтете это полезным!