WYSIWYG Web Builder

Обзор



Содержание сайта
Визуальные редакторы
Обзор программ л.2
WYSIWYG Web Builder

Содержание

Введение
Основные шаги
Настройки WYSIWYG Web Builder

Интерфейс
Интерфейс WYSIWYG Web Builder 9 и 10
Язык интерфейса
Строка меню (Menu Bar)
Лента (Ribbon)
Панель вставок (Toolbox)
Панель быстрого доступа
Менеджер сайта
Инспектор свойств
Менеджер резервирования
Издатель файлов
Form Wizard
Master Page
Master Frames
Master Objects
Менеджер расширений
Менеджер активов
Менеджер объектов
Менеджер темы
Менеджер градиента
Менеджер стиля
Менеджер мультипликации  
Менеджер шрифтов Google
Редактор стилей ссылок
Диспетчер ссылок
Линейка, сетка, направляющие линии

Сайт

Страницы

Объекты
Работа с объектами
Список объектов
Текст
Заметки (Notes)
Заголовки
Шрифты
Заполняющий текст
Спецсимволы
Списки
RollOver Text
Обтекание текста
Горизонтальная линия
Изображения (Image)
Изображения (Picture)
Rollover Image
Rollover Layer
Бегущая строка 
Карта ссылок
Баннер
ClipArt
Text Art
Слайды
Фотоколлаж
Фотогалерея
Аккордеон
Таблицы
Ссылки
Закладки (якоря)
Рамка (Inline Frame)
Lightbox (Лайтбокс)
Анимация
Объекты рисунка
Панели навигации
Вставка кода HTML
Audio HTML5
YouTube  
Блог
Статья
Карусель
Держатель места
Рассылка новостей
Лента новостей
Поиск на сайте
Таймер
Верхний колонтитул
Нижний колонтитул
Java Scripts
Java апплеты
Примечания
Информационные бюллетени
RSS Feed (RSS-канал)
Structured Data
Блоки объектов
Объекты jQuery
ThemeRoller
Embedded Page
Reusable objects
Веб-формы
Card
Section (Раздел)
Flexbox
Wizard
Flex Grid (сетка)
Объекты Media
Объекты администрирования
Объекты страниц коммерции
Значок (Favorites Icon)
Карты Google
Toasts
Card Container
Conveyer Belt
И другие объекты

Расширения
События
Глобальная замена
Слои (уровни)
Поиск ошибок
Использование искусственного интеллекта
Оптимизация сайта (SEO)
Администрирование
CMS
Предварительный просмотр
Публикация
Новое в последних версиях
Сотрудничество

Создание мультипликации

Введение
Мультипликация Flash
Flash Video Player  
Мультипликация GIF 
Применение мультипликации к объекту   
Менеджер мультипликации  
График времени анимации   
Свойства анимации 
Анимированные переходы
Имитация рисования
Преобразование графических форм 
Эффекты при прокрутке страницы  
Lottie Animation
Новое в WYSIWYG Web Builder 11
Новое в WYSIWYG Web Builder 12
Новое в WYSIWYG Web Builder 14
Новое в WYSIWYG Web Builder 15
Новое в WYSIWYG Web Builder 16
Новое в WYSIWYG Web Builder 17


Введение

В WYSIWYG Web Builder есть встроенная поддержка мультипликации и анимированных переходов с использованием CSS3 (с версии WYSIWYG Web Builder 9).

Мультипликации и переходы CSS3 поддержаны всеми современными браузерами (FireFox/Safari/Opera/Chrome/IE10). Исключение - Internet Explorer 9 и более ранние версии не поддерживают такую мультипликацию.

Анимация CSS3 в WYSIWYG Web Builder - это набор заранее разработанных эффектов, которые позволяют элементу постепенно изменяться от одного стиля до другого, не используя JavaScript или Flash.

Эффекты анимации могут быть применены к широкому разнообразию свойств CSS, включая цвет фона, ширину, высоту, непрозрачность. Можно применить преобразование объекта (вращение, искажение, масштабирование и др.).

В настоящее время анимации применимы к следующими объектами:
  • Изображения (Image)
  • Объектам рисунка - графические формы , Clip Art, Text Art,текстовая область  (Text Area), кривые (Curves), полигон (Polygon), линия, баннер.
  • Combobox и  Editbox
  • Элементы формы: кнопка, выпадающий список, поле, текстовая область
  • Бегущая строка (Marquee)
  • Текст (Text)
  • Слой (Layer)
Обратите внимание, что в основном вы можете разместить любой объект на слое, так что позволяет анимировать и другие объекты.

Также можно связать анимацию со стилем (в Style Manager - менеджере стилей). Это позволяет динамически назначать анимацию объекта через events (события) -> set style (задать стиль).

Примечание:
Не все мультипликации полезны для всех объектов. Например анимация цвета фона изображения или формы не даст никакого эффекта, потому что нет никакого фона в этом случае!
Также  не применима анимация к установленным свойствам left, top, width, height, margin и другим свойствам, которые предварительно устанавливаются.

Вы можете также связать анимацию со стилем (в Менеджере Стиля). Это позволяет применить анимацию к объекту через  события - events -> set style.


Применение мультипликации к объекту

Чтобы применить анимацию к вставленному объекту, откройте его свойства (щелчок правой кнопкой по объекту - Object Properties).
Откроется окно свойств объекта. Например, для баннера окно свойств будет выглядеть так, как показано на рисунке ниже



Вы можете использовать для создания анимации в Свойствах объекта вкладки "Text Animation" и "CSS3 Animation", которые содержат настройки анимации. При щелчке по кнопке "Animation Manager" откроется окно Менеджера мультипликации с набором доступных эффектов.

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

Для предварительного просмотра созданной мультипликации используйте меню File - Preview in Browser.


Новое в  в WYSIWYG Web Builder 17

Новые функции:
- добавлена ​​поддержка свойства clip-path. Это мощное свойство, позволяющее создавать анимации на основе фигур.
- добавлено 15 новых анимаций с использованием свойства clip-path. Вы можете редактировать анимацию, используя Менеджер мультипликации
(Animation Manager).
 

Менеджер мультипликации - Animation Manager

Для создания мультипликации используется менеджер мультипликации - Animation Manager.

Для открытия менеджера мультипликации используйте Ленту - вкладку Tools - раздел Tools - Animation Manager.

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



Если Вы хотите анимировать размер или позицию объекта, лучше использовать, transforms (преобразование).

Первый шаг в создавание мультипликации - определение 'key frames' - 'ключевых кадров. Ключевой кадр - пункт, который определяет начало и конец перехода.
У самой простой анимации будет два ключевых кадра - один в начале (0 %) и один в конец (100 %). У более сложных мультипликаций будет больше промежуточных  ключевых кадров.

В ключевом кадре Вы устанавливаете позицию (в процентах)  продолжительности анимации. Вы должны определить по крайней мере два ключевых кадра (0 % и 100 %), но у Вас могут быть много ключевых кадров.
Каждый ключевой кадр определяет свойство (и значение), которое применено к элементу в указанной стадии анимации.

Пример 1 -Переходы цветов (изменение прозрачности):
Первый ключевой кадр: 0 %. Цвет фона #000000
Последний ключевой кадр: 100 %. Цвет фона #FFFFFF
Эффект мультипликации будет заключаться в плавном переходе от черного цвета фона к белому цвету.

Примечания:
1. Синхронизация определена в свойствах анимации объекта, а не в анимации непосредственно. Этим путем Вы можете многократно использовать анимацию в различных объектах с различными параметрами настройки синхронизации.
2. Вы можете анимировать многие свойства CSS одновременно при использовании нескольких ключевых кадров в одной позиции.

Пример 2 - вращение графической формы
Добавьте форму к странице (см. Объекты рисунка).
Дважды щелкните по форме, чтобы открыть ее свойства и выберите вкладку мультипликации CSS3.
В мультипликационных эффектах выберите 'transform-rotate' (преобразование - вращение), установите продолжительность 2500 (2.5 секунды).
Предварительно просмотрите или издайте страницу, чтобы видеть мультипликацию.



Пример изменения масштаба изображения при наведении курсора (англ. язык)
 
- Новая функция для Менеджера анимации: добавлена ​​опция «Слияние». Эта опция объединит анимации по умолчанию с вашей собственной коллекцией.
Мы регулярно добавляем новые анимации в коллекцию по умолчанию. Однако, если вы настроили анимацию, ваша коллекция не будет перезаписана, поэтому это означает, что новые анимации не добавляются в ваш список автоматически. Опция «Объединить» облегчит добавление этих новых анимаций в вашу пользовательскую коллекцию.
Если у вас нет измененных анимаций, кнопка слияния будет отключена.


График времени анимации -Animation Timeline

Опция Animation Timeline доступна на вкладке Page (или используйте Строку меню - меню Page - Animations Timeline -
График времени).
График времени анимации отображает все мультипликации на странице, Вы можете также добавить, редактировать и удалять мультипликации. Также можно перетащить мультипликации на графике времени, таким образом Вы можете управлять согласованностью (синхронизацией) действий анимированныъ объектов.


Свойства анимации (Animation Properties)


У объектов, которые действительно поддерживают мультипликацию, есть вкладка Animation CSS3 в их свойствах. Здесь Вы можете выбрать мультипликацию и установить синхронизацию.

Для разных объектов есть разный набор доступных настроек анимации. Ниже показаны настройки для объекта Shape (графическая форма):



Animation - Определяет анимацию (созданную в Менеджере анимации), чтобы использовать для объекта.
Duration (Продолжительность) - Определяет продолжительность анимации в миллисекундах.
Delay (Задержка)  - Задержка начала мультипликации  (в миллисекундах) Задержка не будет происходить во время повторения анимации и применима только к началу анимации.
Iteration count - Вы можете конфигурировать, сколько времени должна продолжаться анимация.Или Вы можете заставить анимацию повторяться бесконечно при использовании -1.
Direction - При выборе "normal" - анимация играет от начала до конца. При выборе "alternate to play" - запуск анимации вперед и затем назад.
Timing (Синхронизация).  Функция синхронизации анимации определяет кривую скорости анимации.
Кривая скорости определяет время перехода от одного набора стилей CSS к другому и способствует плавным переходам.
  • linear - линейная анимация с одинаковой скоростью от начала и до конца
  • ease -медленное начало, ускорение и затем замедление в конце
  • ease-in - медленное начало.
  • ease-out - медленный конец
  • ease-in-out - у анимации есть и медленное начало, и медленный конец
Fill Mode - Режим заполнения. Определяет, как стили применены к адресату Ваших мультипликаций CSS за пределами мультипликации непосредственно.
По умолчанию Ваши мультипликации CSS не будут затрагивать свойства объекта, которые Вы анимируете, пока первый ключевой кадр (keyframe) не запускается.
В некоторых случаях Вы можете хотеть, чтобы свойства начали изменяться перед началами мультипликации или после того, как она закончилось. Например, если мультипликация начинается скрытой или с различной непрозрачностью, тогда Вы можете выбрать  'Forwards' (ранее), 'Backwards' (позднее) или 'Both' ('Оба').

Play State - Эта опция определяет, выполняется ли мультипликация заново или делает паузу.


Преобразование графических форм
Преобразование формы (Morphing Shape) может создать анимацию на вашем веб-сайте. Поддерживаются все встроенные формы, клипарты и библиотеки значков. Вы даже можете переключаться между значками разных библиотек.
Анимации могут запускаться автоматически (слайд-шоу), при наведении курсора мыши, при прокрутке с помощью привязок или в зависимости от текущей позиции прокрутки (непрерывно).
См. также

Анимированные переходы

Transition
- Переход CSS3 - анимация, которая перемещает свойство между двумя состояниями. Переходы - неявная анимация, что означает, что они вызваны изменениями состояния, такими как ‘hover’ (наведение курсора) или ‘focus’, в отличие от анимации, которая работает непрерывно.
Вы можете добавить множественные переходы к объектам, что позволяет анимировать одновременно несколько свойств.

Trigger (Спусковой механизм) -  определяет механизм, который запускает анимированный переход из одного состояния в другое.
Обычно используемые спусковые механизмы - ‘hover’' и 'focus'.
Duration -  Определяет продолжительность перехода в миллисекундах.
Delay - Определяет задержку начала перехода
Timing - Функция синхронизации определяет кривую скорости анимации.
Property (Свойство)  - Определяет название свойства CSS, к которому применен переход.
Value - Определяет новое значение свойства CSS.


Переходы (Transitions) - Новая функция: добавлены свойства анимации: имя-анимации, продолжительность анимации, задержка анимации, количество итераций анимации, направление анимации, функция времени анимации, режим заливки анимации. Это можно использовать (например) для установки анимации объекта при наведении.
Пример: выберите анимацию, установите продолжительность и количество итераций.

Прокрутка переходов (Scroll Transitions) - Новая функция: добавлена ​​возможность использовать предопределенные анимации для переходов прокрутки. Ключевые кадры выбранной анимации будут автоматически преобразованы в переходы прокрутки, поэтому анимация воспроизводится кадр за кадром, пока объекты прокручиваются в окне просмотра.

Новое для Переходов / Анимации - Добавлено свойство «font-variation-settings». Добавлено свойство «font-stretch» ​​для анимации компактности символов шрифта. Добавлено свойство «backdrop-filter».
Подробнее


Подробнее о переходах


Эффекты при прокрутке страницы

Мультипликации на прокрутке - популярный эффект в современных вебсайтах. Элементы HTML остаются скрытыми, пока пользователь не листает страницу (не использует полосы прокрутки страницы), после чего элемент показывается  с анимацией.  В результате вебсайт выглядит динамичным.

Мультипликация при прокрутке применима к страницам, имеющим большую высоту (т.е. имеющих полосу вертикальной прокрутки). При создании анимации устанавливаются закладки в определенных разделах страницы.

Подробнее об эффектах прокрутки
http://www.wysiwygwebbuilder.com/bookmark_events.html


Параллакс

В версии WYSIWYG Web Builder 11 введена новая функция - создание эффекта при прокрутке Параллакс.
См. Параллакс


В версии WYSIWYG Web Builder 11 добавлены новые эффекты мультипликации CSS3.
Посмотреть примеры


См. также примеры создания мультипликации (англ. язык):
Управление мультипликацией (началом и остановкой), используя события (Events)
Изменение масштаба изображения при наведении курсора

Обучение (англ. язык):

http://www.wysiwygwebbuilder.com/animation.html
http://www.wysiwygwebbuilder.com/transitions.html
http://www.wysiwygwebbuilder.com/transform.html


Новая функция: добавлено 10 новых анимаций CSS3 для Менеджера мультипликации: анимация-поворот влево, анимация-поворот вправо, анимировать поворот из левого, анимация-поворот-прямая, пульс-1, пульс-2, трансформ, трансформировать-масштабирование, трансформирование-масштабирование, преобразование-дрожь
- Новая функция: добавлен фон, граница  (short hand), отображение и свойства позиции для анимируемых свойств. Они могут быть полезны для переходов прокрутки.
- Новая функция: добавлены кнопки "Copy' ("копировать") для быстрого клонирования анимации и переходов.
- Новая функция: добавлены переходы прокрутки (Scroll Transitions). Это позволяет анимировать CSS-свойства объектов в зависимости от положения горизонтальной полосы прокрутки. Например, можно задать непрозрачность (затухание) объекта на основе положения прокрутки. Перемещения/поворота / масштабирования объектов на место, когда он прокручивается в поле зрения.
Например, вы можете установить прозрачность объекта или переместить/повернуть/масштабировать его на основе положения прокрутки.

Переход прокрутки (также известный как ключевой кадр) должен иметь начальное и конечное значение. Первый ключевой кадр определяет начальное значение анимации и второе конечное значение. Например, можно изменить прозрачность объекта в начале и конце (исчезновение объекта в зависимости от положения полосы прокрутки). Также возможно создать несколько ключевых кадров для анимации complexer.
Чтобы добавить переходы прокрутки, перейдите к свойствам объекта анимации и нажмите кнопку "Добавить" (add) в разделе transition.
Посмотреть примеры (прокрутите страницу по вертикали):
http://www.wysiwygwebbuilder.com/support/scrolltransition_color.html
http://www.wysiwygwebbuilder.com/support/scrolltransition_gradient.html
http://www.wysiwygwebbuilder.com/support/scrolltransition_flyin.html
http://www.wysiwygwebbuilder.com/support/scrolltransition_parallax.html

Скачать демо-проект:
http://www.wysiwygwebbuilder.com/support/scrolltransitions.zip

Дополнительно возможно создать:
- Запуск и остановка анимации CSS3, испольуя с события
- Увеличение изображения с помощью CSS3 преобразования
- Смещение - свойство offset определяет положение ключевого кадра относительно якоря. Смещение может быть положительным или отрицательным.
- Якорь - свойство Anchor (якорь в комбинации с смещение) задает, как вертикальное положение ключевого кадра будет срабатывать.
Подробнее (англ. язык).

Новое в WYSIWYG Web Builder 14

При создании CSS3 анимации (CSS3 Animations)
Улучшено: при использовании onscrollreveal событий с CSS animate (css), то целевой объект будет первоначально скрыт автоматически (через класс visibility-hidden ("видимость-скрытый"). Это поведение можно перезаписать, добавив $SCROLLREVEAL_AUTOHIDE$ - > false в пользовательские переменные.
- Новая функция: добавлен предварительный просмотр анимации.
- Новая функция: добавлена поддержка свойства ‘filter ("фильтр") в переходах и анимации CSS. Это добавляет возможность анимации яркости, контраста, оттенка, размытия, инвертирования, насыщения, оттенков серого и сепии.
- Новая функция: добавлена анимация текста "Neon".
- Новая функция: добавлена анимация текста "Fire" ("огонь").
- Новая функция: добавлена анимация текста "Classic Movie"  ("классический фильм").



- Новая функция: добавлен 'transform-wobble-top' (раскачивание top), ‘transform-wobble-center’ (раскачивание center) и ‘transform-wobble-bottom’  (раскачивание bottom).
- Новая функция: добавлено несколько текстовых анимаций letterspacing. Например: "letterspacing фокус В" и "letterspacing развернуть".
Плюс, более чем 25 новых анимаций, в том числе: анимация-границы исчезают, фон, положение, фокус-в / фокус-аут и другие.


Имитация рисования

Новое в WYSIWYG Web Builder 15.
WYSIWYG Web Builder имеет встроенную поддержку анимации SVG Path. Это оживляет границу (обводку) форм SVG, textart, клипарт.

Для создания анимации вставьте на страницу объект, используя Панель вставок (Toolbox).
В Инспекторе свойств щелкните по значку , чтобы открыть окно свойств  выделенного объекта.
В окне свойств (настроек) перейдите на вкладку Output.
Раздел Format - выберите Publish as <svg>
Animation (Анимация) - выбор, следует ли запускать анимацию при загрузке страницы или когда объект прокручивается в области просмотра (при раскрытии прокрутки).
Когда установлено none («нет»), анимация SVG будет отключена.
Duration (Продолжительность анимации)
Easing (смягчение) Определяет временные характеристики анимации. Например, для реализации эффектов подпрыгивания или ускорения.
Reverse (Задний ход) - Запускает анимацию "задом - наперед".
Loop (петля) - зацикливание анимации
Указывает, следует ли перезапустить анимацию после ее завершения.
Sub path delay (Задержка дополнительного пути)
Это позволяет установить задержку анимации между отдельными частями фигуры. Это полезно только для фигуры, которая имеет дополнительные пути. Установите в «0» для анимации всех подпутей одновременно.

CSS анимация / переходы (transitions)
- Новая функция: добавлены 24 новые функции замедления (easing ), вдохновленные jQuery UI
- Новая функция: добавлено 8 новых анимаций: защелкивание, откидывание, складывание, разворачивание и др.
Посмотреть примеры
- Новая функция: добавлена ​​альфа-поддержка для переходных цветов. Это также работает с переходами прокрутки!

Примеры создания анимации рисования

См. также (англ. язык):


Новое в WYSIWYG Web Builder 16

Отключение анимации
Новая функция: добавлена ​​возможность отключать CSS-анимацию и переходы для небольших экранов.

SVG анимации
- Новая функция: добавлена ​​опция «Анимировать заливку» (Animate Fill). Это скроет заливку (фон) фигуры до тех пор, пока анимация обводки не будет завершена.

- Новая функция: добавлен «ручной» (manual) режим триггера. Теперь SVG-анимацией можно управлять с помощью событий: media play и media stop. Например, чтобы запустить анимацию при нажатии кнопки или при активации слайда «Карусель» (Carousel slide).


Lottie Animation
Новое в WYSIWYG Web Builder 17
Возможность отображать легкие, масштабируемые и интерактивные анимации Lottie на своих веб-сайтах. Анимации Lottie могут запускаться автоматически, при нажатии, наведении или прокрутке. Также можно анимировать кадр за кадром в зависимости от положения полосы прокрутки (параллакс).
Анимации можно использовать как отдельный элемент или как фон/передний план в слоях и сетках макета.
Для вставки на веб-страницу анимации  на Панели вствок (Toolbox) в разделе Media выберите Lottie Animation.

В настройках указывается:
- название файла анимации (это может быть либо файл на вашем компьютере, либо URL-адрес, например: https://assets3.lottiefiles.com/packages/lf20_RItkEz.json)
- как воспроизводится анимация (при загрузке страницы, при наведении, по щелчку и др.)
- скорость (например: 1 или 2,5 или 0,25)
- ширина (полная, максимальная)
- и другое.
Онлайн-учебник
Страница анимации Lottie
Примеры анимации Lottie (бесплатные)

Ослабление (Easing)

Новое в WYSIWYG Web Builder 17
- Улучшено: при использовании эффектов Easing в анимации (например, в закладках, меню панели, анимации SVG, прокрутке и т. д.) генератор HTML теперь будет включать только модуль эффектов jQuery (11 КБ) вместо полной библиотеки пользовательского интерфейса jQuery (248 КБ). !


Последнее обновление: январь 2024 г.

О всех замеченных ошибках или неточностях в описании программы, а также о возможных дополнениях просьба сообщить по адресу: average.2011@mail.ru
Если у Вас есть веб-страница с дополнительными материалами по данной теме, сообщите адрес страницы, чтобы на нее можно было сделать ссылку.


Рейтинг@Mail.ru