Редактор Studio: создание своих эффектов взаимодействия клика или наведения
6 мин. чтения
Добавьте Эффекты, чтобы создать анимацию при клике и наведении курсора на элементы. Эффект может анимировать тот же элемент, который запускал его, или любой другой элемент на странице.
Благодаря собственным эффектам у вас есть полный контроль и возможность создать анимацию с нуля. Вы также можете контролировать время анимации, чтобы сделать ее действительно эффективной.
Шаг 1 | Добавьте триггер (по клику или при наведении)
Чтобы начать, выберите элемент, который запускает взаимодействие. Это элемент, на который посетители наводят или нажимают, прежде чем увидеть анимацию. Затем перейдите во вкладку Анимация и эффекты в панели инспектора, чтобы добавить новый эффект.
Совет:
Вы можете добавить к элементу несколько эффектов, чтобы они запускали другую анимацию при наведении курсора или клике.
Чтобы добавить триггер:
- Выберите элемент, который должен запускать эффект взаимодействия.
- Нажмите на стрелку Открыть инспектор
в правом верхнем углу редактора. - Перейдите во вкладку Анимация и эффекты
. - Выберите Наведение / Клик.
- Нажмите +Добавить.
Шаг 2 | Настройте эффект
Теперь вы можете выбрать, к какому элементу будет добавлена анимация, саму анимацию, которая должна отображаться, и точное действие, которое происходит при наведении курсора или клике (например, применить анимацию, включить / выключить ее и т. д.)
Чтобы настроить эффект:
- Выберите вариант из раскрывающегося списка При наведении / По клику:
- Начать анимацию: нажатие / наведение курсора на элемент запускает выбранную анимацию.
- Включение/выключение: как и в случае с переключателем, клик по элементу активирует эффект, а второй клик выключает его.
- Сброс анимации: нажатие / наведение курсора на элемент удаляет любую анимацию, которая была применена ранее.
- Выберите вариант из раскрывающегося списка Элемент с анимацией:
- Сделайте так, чтобы элемент запускал свою собственную анимацию: нажмите на название элемента (рядом с ним отобразится слово (сам элемент)).
- Добавьте анимацию к другому элементу на странице: выберите элемент из раскрывающегося списка или нажмите Выбрать на холсте, чтобы выбрать его на странице.
Совет: удерживайте клавишу Cmd / Ctrl, чтобы выбрать дочерний элемент.
- Перейдите во вкладку Свое.
- Нажмите Создать свою анимацию.
Совет:
Создаваемые вами анимации сохраняются для использования в будущем на других элементах.
Шаг 3 | Настройте анимацию
Теперь пришло время создать анимацию с нуля. Добавьте все виды преобразований макета и дизайна, чтобы изменить размер элемента (масштаб), положение (сдвиг), угол (поворот), цвет заливки и многое другое.
Вы также можете настроить исходное состояние элемента в дополнение к созданной вами анимации. Так выглядит элемент при загрузке, до того, как посетители начнут с ним взаимодействовать. Чтобы связать все это воедино, установите длительность и переход анимации.
Чтобы настроить анимацию:
- Выберите способ настройки анимации:
Настроить дизайн элемента
Настроить исходное состояние элемента
Установить длительность и легкость анимации
2. (Необязательно) Нажмите 
Пуск на плавающей панели, чтобы просмотреть анимацию.
Пуск на плавающей панели, чтобы просмотреть анимацию.3. Когда будете готовы, нажмите Готово.
Совет:
Установив отображение элемента при нажатии или наведении, он отобразится на холсте в виде клетчатого наложения. Это указывает на то, что элемент изначально прозрачен.
Эту индикацию можно отключить в любое время. Нажмите на значок Wix Studio 
, наведите курсор на Вид и нажмите Прозрачные элементы.
, наведите курсор на Вид и нажмите Прозрачные элементы.Часто задаваемые вопросы
Нажмите ниже, чтобы узнать подробнее о создании эффектов.
Как это выглядит, когда элемент запускает собственную анимацию?
Как выглядит взаимодействие между разными элементами?
Может ли один элемент запускать несколько других элементов?
Может ли один элемент иметь несколько анимаций?
Была ли статья полезна?
|