2015-10-22
434Лабораторная работа №2
Интересные визуальные эффекты, связанные с графикой и текстом, можно получить с помощью фильтров каскадных таблиц стилей. Например, постепенное появление (исчезновение) рисунка, плавное преобразование одного изображения в другое, задание степени прозрачности и т.п.
Обычно визуальные эффекты создаются с помощью графических редакторов (Adobe Photoshop, Macromedia Flash и др.). Вместе с тем во многих случаях при создании небольших анимаций (например, баннеров) и других не слишком сложных визуальных эффектов можно вполне обойтись средствами таблиц стилей и сценариев, достигая своих целей при существенно меньших затратах ресурсов (объем файлов, время на разработку). При разработке более сложных проектов фильтры можно комбинировать с другими средствами.
Фильтр – некий инструмент преобразования изображения, взятого из графического файла и вставленного в HTML-документ. Кроме того, некоторые фильтры можно применять и к текстам. Следует иметь в виду, что фильтры работают только в Internet Explorer, начиная с версии 4. Это, конечно, ограничивает их использование при создании публикаций, инвариантных относительно браузеров. Однако следует иметь в виду, что количество пользователей Microsoft Internet Explorer и аналогичных по своим возможностям браузеров составляет большинство. Кроме того, Web-технологии используются не только в Интернете, но и в локальных сетях.
|
|
|
Существуют два вида фильтров: статические и динамические. Все они определяются в каскадной таблице стилей одинаково:
filter: имя_фильтра (параметр 1, параметр2,...)
Статические фильтры сначала преобразуют изображение или элемент с текстом, а затем результат преобразования отображается в браузере. Таким образом, пользователь видит только конечный результат преобразования. Динамические фильтры выполняют преобразование в течение некоторого времени, которое можно указать в качестве параметра. При этом создается анимационный эффект: преобразование происходит постепенно с отображением всех его промежуточных этапов. В отличие от статических фильтров, применение динамических фильтров обязательно связано с использованием несложных сценариев. В свою очередь, сценарии можно применять для изменения свойств как статических, так и динамических фильтров, создавая различные анимационные эффекты.
Фильтры применяются не ко всем HTML-элементам, а только к тем из них которые определяют прямоугольный блок и не являются окнами. Ниже приводится список тегов, к содержимому которых можно применять фильтры:
<body>;
<button>;
<div> – если заданы параметры размеров width и height или элемент абсолютно позиционирован;
|
|
|
<img>;
<input>;
<marquee>;
<span> – если заданы параметры размеров width и height или элемент абсолютно позиционирован;
<table>;
<textarea>;
<td>;
<th>;
<textarea>.
Статические фильтры
К статическим фильтрам относятся следующие:
alpha – определяет степень видимости объекта. Принимает параметры: opacity, style, finishOpacity, startX, startY, finishX, finishY, enabled;
blur – создает эффект движения объекта. Принимает параметры: add, direction, strength, enabled;
chroma – переводит определенный цвет изображения в прозрачный. Принимает параметры: color, enabled;
dropShadow – отображает силуэт определенного цвета для выбранного объекта, создавая иллюзию, что объект находится над страницей, отбрасывая тень. Принимает параметры: offX, offY, positive, enabled;
fliph – отражает объект относительно центральной вертикальной оси. Принимает параметр enabled;
flipv – отражает объект относительно центральной горизонтальной оси. Принимает параметр enabled;
glow – создает для объекта эффект сияния. Принимай параметры: color, strength, enabled;
gray – отображает объект в градациях серого. Принимает параметр enabled;
invert – обращает цвета объекта. Принимает параметр enabled;
mask – делает из объекта прозрачную маску (отображает прозрачные (transparent)символы определенным цветом, а непрозрачные делает прозрачными).Принимает параметры: color, enabled;
shadow – отрисовывает "боковые" грани объекта, создавая впечатление объемности. Принимает параметры: color, direction, enabled;
wave – создает волнистое искажение объекта вдоль вертикальной оси. Принимает параметры: add, strength, freq, phase, ligthStrength, enabled;
xray – изменяет глубину цвета объекта и отрисовывает черно-белым, делаяего похожим на рентгеновский снимок. Принимает параметр enabled.
Пример из листинга 1 иллюстрирует применение некоторых из перечисленных выше фильтров с параметрами, принятыми по умолчанию.
Каждый фильтр имеет параметр enabled, принимающий значения true (разрешено применение) и false (запрещено применение). Значением по умолчанию является true.
Фильтры blur, glow и wave имеют параметр strength, определяющий интенсивность (силу), применения фильтра в диапазоне целых чисел от 0 до 255.
Фильтры chroma, dropShadow, glow, mask и shadow имеют параметр color, принимающий в качестве значения имя или код цвета.
Фильтры blur и shadow имеют параметр direction, определяющий направлениеразмытия изображения и падения тени соответственно. Этот параметр принимает значения 0 и кратные 45, означающие количество градусов, отсчитанное от вертикали по часовой стрелке.
Фильтр blur имеет параметр add, принимающий значения true и false. Этот параметр определяет, добавлять (true) или нет (false) исходное изображение к результату применения фильтра.
Чтобы фильтры blur, glow, wave, alpha, dropShadow, shadow, xray воздействовали на тексты, последние должны быть абсолютно позиционированными т.е. иметь параметр position: absolute.
Далее рассматриваются наиболее популярные фильтры.
Тень (dropShadow, shadow)
Фильтр dropShadow имеет параметры offX offy, определяющие смещение тени в пикселях в горизонтальном и вертикальном направлениях соответственно. Параметр positive, определяет, от каких пикселов следует отбрасывать тень: от непрозрачных (true) или прозрачных (false). Этот фильтр действует на графические изображения и дает видимые результаты, если они содержат прозрачные участки.
Фильтр dropShadow можно применять и к абсолютно позиционированным текстам.
Фильтр s hadow имеет параметры direction (направление) color (цвет). Параметр direction принимает значения 0 и кратные 45, означающие количество градусов, отсчитанное от вертикали по часовой стрелке.
Волновое искажение (wave)
Фильтр wave имеет параметры: add, strength, freq, phase, ligthStrength. Параметр add определяет добавлять (true) или нет (false) исходное изображение к результату применения фильтра. Параметр strength задает амплитуду волны искажения. Параметр freq указывает количество Максимов волны искажения, phase – фазу в диапазоне от 0 до 100. Параметр ligthStrength определяет степень освещения для имитации трехмерного эффекта для волны. Этот фильтр можно применять и к изображениям, и к абсолютно позиционированным текстам.
|
|
|
Размытие (blur)
Фильтр blur имеет параметры: add, direction, strength. Параметр add определяет добавлять (true) или нет (false) исходное изображение к результату применения фильтра. Параметр strength задает силу размытия. Параметр direction указывает направление размытия изображения. Он принимает значения 0 и кратные 45, означающие количество градусов, отсчитанное от вертикали по часовой стрелке. Фильтр blur можно применять и к изображениям, и к абсолютно позиционированным текстам.
Прозрачность (alpha)
Прозрачность графического объекта в диапазоне целочисленных значений от 0 до 100 можно установить с помощью фильтра alpha. Значение 0 соответствует полной прозрачности изображения, т.е. оно становится невидимым. Значение 100 означает, наоборот, полную непрозрачность изображения. Таким образом alpha является степенью непрозрачности. Сквозь прозрачные графические объекты видны лежащие ниже изображения. Степень их видимости определяется значением прозрачности изображения, лежащего выше. Кроме того, прозрачность имеет несколько вариантов градиентной формы. Можно сделать так, чтобы прозрачность постепенно увеличивалась от центра к краям изображения. Это позволяет просто и весьма эффективно согласовать вставляемое в документ изображение с фоном.
Фильтр alpha имеет параметры:
opacity – задает степень прозрачности (точнее, непрозрачности) как целое число в диапазоне от 0 до 100;
style – определяет градиентную форму распределения прозрачности по изображению как целое число от 0 до 3. Если параметр style не указан или имеет значение 0, то градиент не применяется (степень прозрачности одинакова для любых участков изображения);
finishOpacity – конечное значение степени прозрачности (от 0 до 100);
startX, startY, finishX, finishY – координаты точек, определяющие прямую, на которой прозрачность равна значению параметра finishOpacity. При style>0 прозрачность точек между границами объекта и этой прямой изменяется от значения opacity до finishOpacity. При style=2 прозрачность изменяется от центра к эллипсу, вписанного в прямоугольник с диагональю заданной координатами startX, startY, finishX, finishY. При этом вне эллипса прозрачность определяется значением finishOpacity.
|
|
|
Повороты
В браузере Internet Explorer 5.5 и более поздних версий возможно применение фильтра basicimage, имеющего множество парметров, с помощью которых графическое изображение можно повернуть на угол, кратный 90 градусов, задать прозрачность, зеркально отразить, определить маску и др. В Internet Explorer, начиная с версии 4, все эти эффекты, за исключением поворотов, создаются отдельными фильтрами. Порядок их применения такой же, как и фильтра alpha, задающего прозрачность. Ниже рассматривается создание эффекта поворота.
Параметр rotation фильтра basicimage принимает целочисленные значения: 0 (нет поворота), 1 (90 градусов), 2 (180 градусов), 3 (270 градусов).
Динамические фильтры
Динамические фильтры позволяют организовать постепенноепоявление или исчезновение изображения, трансформацию одного графическою объекта в другой, а также имитирование освещения.
Трансформация
Суть трансформации графического объекта заключается в том, что сначаланеобходимо зафиксировать первое изображение, затем выполнить заменуэтого изображения другим и/или изменить параметры того же самого изображения, а после этого выполнить собственно трансформацию. Все эти действия выполняются в сценарии. Фиксация и трансформация изображения производятся с помощью специальных методов (функций) фильтра apply () и play () соответственно. Для остановки процесса преобразовании предназначен метод stop (). Для трансформации объектов служат двафильтра: revealtrans и blendtrans. Второй из них является частным случаем первого.
Фильтр revealtrans используется для трансформации изображения – постепенного появления или перехода от одного изображения к другому. Кроме параметра enabled (которым обладают все фильтры), он имеет следующие параметры:
duration – длительность преобразования в секундах (число с плавающей точкой);
transition – тип преобразования (целое число от 0 до 23):
• 0 – Box In (стягивающийся прямоугольник);
• 1 – Box Out (расширяющийся прямоугольник);
• 2 – Circle In (стягивающийся круг);
• 3 – Circle Out (расширяющийся круг);
• 4 – Wipe Up (стирание вверх);
• 5 – Wipe Down (стирание вниз);
• 6 – Wipe Right (стирание вправо);
• 7 – Wipe Left (стирание влево);
• 8 – Vertical Blinds (вертикальные жалюзи);
• 9 – Horisontal Blinds (горизонтальные жалюзи);
• 10 – Checkerboard Across (сужающиеся клетки шахматной доски);
• 11 – Checkerboard Down (закрывающаяся шахматная доска);
• 12 – Random Dissolve (случайный наплыв);
• 13 – Split Vertical In (вертикальное деление внутрь);
• 14 – Split Vertical Out (вертикальное деление наружу);
• 15 – Split Horisontal In (горизонтальное деление внутрь);
• 16 – Split Horisontal Out (горизонтальное деление наружу);
• 17 – Strips Left Down (стирание влево вниз);
• 18 – Strips Left Up (стирание влево вверх);
• 19 – Strips Right Down (стирание вправо вниз);
• 20 – Strips Right Up (стирание вправо вверх);
• 21 – Random Bars Horisontal (случайные горизонтальные полосы);
• 22 – Random Bars Vertical (случайные вертикальные полосы);
• 23 – Random selection of (0 – 22) (случайный выбор из предыдущих вариантов).
Рассмотрим применение фильтра revealtrans для создания эффекта появления изображения.
Здесь в таблице стилей для изображения устанавливаются его невидимость (visibility=hidden) и фильтр с указанием его имени и параметров. В секции сценария с помощью метода applay () сначала фиксируется исходное невидимое состояние изображения, затем изображение становится видимым и с помощью метода play () выполняется переход от невидимого состояния к видимому.
