Параметры смешивания цветов (Multiply) в веб-контексте?

Question

У нас есть клиент, который создал анимированную графику (используя AI & After Effects).

Графический являются по существу три перекрывающихся пончики (не может прямо сейчас на «очевидные причины»)

• Каждого пончик не идеально круглый и искажаются в каком-то уникальном способе
• Каждый пончик имеет другой линейный градиент цвета на другом аккорде
• Каждый пончик вращается, весы & импульсы с несколько иной скоростью в анимации.

Их графика была построена с использованием Illustrator (каждый пончик был 1 слоем), а затем анимирован в After Effects. Результатом перекрывающихся пончиков является хороший эффект умножения цвета, когда различные участки каждого пончика перекрываются.

В настоящее время я пытаюсь перенести это в Интернет и сталкиваться с серьезными проблемами в отношении смешивания цветов & умножения.

Что-то я пробовал.

• Экспорт файла AI как SVG и анимации с использованием RaphaelJS
• Экспорт пути непосредственно из AI и делают их с RaphaelJS
• Возьмите экспортируемый SVG и взломать его использовать FeImage & FeBlend фильтры

Все вышеперечисленное не визуализируется так, как я ожидал, и из небольшого смешения цвета SVG в Google и вообще спецификации SVG не полностью реализованы в большинстве браузеров.

• Я также пытался экспортировать отдельные слои, как в формате PNG и затем с помощью CSS сделать:

  background: url('PNGs/L1.png') center center, url('PNGs/L2.png') center center, url('PNGs/L3.png') center center; background-repeat: no-repeat; background-blend-mode: multiply;

Это любопытное получает меня в правильном направлении, но: это, кажется, полностью сломанный в IE, и я не могу заставить его работать, где каждый PNG является изображением BG на 1 из 3 разных div (что мне нужно сделать, чтобы анимировать div отдельно)

Я просто лаяю неправильное дерево с этой проблемой или это что-то, что есть волшебная библиотека графики js там, которая исправит все мои беды?

Answer 1

Режимы смешивания CSS доступны только в последних браузерах, поэтому, если цветовые эффекты необходимы, что на самом деле не вариант. Единственным эффектом умножения цвета, который имеет достойную поддержку браузера, являются фильтры SVG (<feBlend>).

Одна из трудностей с использованием фильтров заключается в том, что в настоящее время нет приличной поддержки браузера для объединения нескольких элементов из одного и того же файла в фильтр. Ни один из браузеров не поддерживает параметр SVG1.1 enable-background для смешивания одного элемента с элементами за ним (он будет заменен функцией isolation в новой спецификации смешивания CSS).Фильтрующий элемент <feImage> можно использовать для импорта фрагмента вашего SVG в фильтр для другого элемента, но это использование не поддерживается в Firefox (что позволяет использовать его только для файлов полного изображения).

Таким образом, ваша стратегия будет:

• Создать отдельные файлы (SVG или PNG) для каждого из трех цветных пончиков.

• Создайте пустой элемент контейнера, который вы передадите фильтру. Убедитесь, что вы выбрали область фильтра для правильных размеров выходного графика.

• В фильтре используйте три элемента <feImage>, чтобы загрузить компонентную графику. Задайте параметры x, y, width и height для начальных перекрывающихся позиций трех графических элементов.

• <feImage> Объединить результаты с помощью двух <feBlend> операций

• анимировать параметры <feImage> с помощью JavaScript или SMIL с резервированием JavaScript для IE.

Ограничения:

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

• Вы загружаете четыре отдельных файла. Возможно, вы захотите изучить URI данных, чтобы сократить общее время загрузки.

More on SVG Filters

---

Если вы хорошо только с поддержкой новейших браузеров (с другими видеть фигуры, но не цвет умножить эффект), вы должны быть в состоянии сделать это с помощью CSS Blending на любом из

• SVG элементов, с анимированными преобразований

• Несколько HTML изображения или элементы с CSS фоном (анимировать CSS преобразование собственности, возможно, с запасным вариантом, чтобы анимировать абсолютные свойства позиции)

• Один HTML элемент с несколькими CSS фоновых изображений, анимацией, используя свойство background-position (CSS или JavaScript) , Анимация здесь сложнее, так как позиции всех слоев контролируются с помощью одного свойства CSS. Это также не будет аппаратно ускорено, как преобразование, которое может быть реализовано с использованием независимых слоев, объединенных видеокартой.

Тем не менее, отметим, что существуют два различные режим смешивания свойства:

• background-blend-mode управляет тем, как слоистые фон на элементе смешиваются друг с другом. Это может быть список значений для каждого изображения в фоновом режиме. Это не влияет на смешение между отдельными элементами (HTML или SVG).

• mix-blend-mode управляет тем, как данный элемент сливался в содержание позади, с учетом ограничениями isolation собственности (которая изолирует все содержание ребенка от смешивания с остальной частью веб-страницы) или другими свойствами, которые создают контекст стэк ,

More on CSS Blending
caniuse.com browser support for CSS Blending