|
|||||||
Содержание
Введение |
Создание мультипликацииВведение В WYSIWYG Web Builder есть встроенная поддержка мультипликации и анимированных переходов с использованием CSS3 (с версии WYSIWYG Web Builder 9). Мультипликации и переходы CSS3 поддержаны всеми современными браузерами (FireFox/Safari/Opera/Chrome/IE10). Исключение - Internet Explorer 9 и более ранние версии не поддерживают такую мультипликацию. Анимация CSS3 в WYSIWYG Web Builder - это набор заранее разработанных эффектов, которые позволяют элементу постепенно изменяться от одного стиля до другого, не используя JavaScript или Flash. Эффекты анимации могут быть применены к широкому разнообразию свойств CSS, включая цвет фона, ширину, высоту, непрозрачность. Можно применить преобразование объекта (вращение, искажение, масштабирование и др.). В настоящее время анимации применимы к следующими объектами:
Также можно связать анимацию со стилем (в 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 к другому и способствует плавным переходам.
По умолчанию Ваши мультипликации 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
Новая функция: добавлено 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 новых анимаций: защелкивание, откидывание, складывание, разворачивание и др. Посмотреть примеры - Новая функция: добавлена альфа-поддержка для переходных цветов. Это также работает с переходами прокрутки! Примеры создания анимации рисования См. также (англ. язык):
• Введение в анимацию CSS3.
• Запуск и остановка анимации CSS3 с помощью событий. • Введение в переходы CSS3. • Использование преобразования CSS3 для масштабирования изображения. • Анимация текста с помощью объекта «Баннер». • Переходы по ссылкам • Использование переходов прокрутки • Анимация пути в формате SVG. • Эффекты движения • Анимация Лотти • Эффекты мыши Новое в 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 г.
|
||||||
|