Дизайнер, автор обучающих программ, уроков и виджетов по Adobe Muse

Вадим Якупов

Первый виджет по Анимации

ко всем действиям в Adobe Muse

АниМоушн

Документация

Инструкция по пользованию АниМоушн Макс.

1. Вставьте виджет в рабочий проект.

2. Выделите элемент и в подсказке напишите animotion [команда]

 

 Чтобы анимация заработала нужно ей задать правило

 Одно правило состоит из нескольких определений, каждая из которой отвечает за определенное действие.

 

 Основных определений четыре - это if (перев. с англ.- "если"), on (перев. с англ.- "на"), do  (перев. с англ.- "совершить действие"), to  (перев. с англ.- "к")

 

Например: animotion if: click, on: .onElem, do: bounce animated, to: .toElem

 

В начале каждого правило нужно писать animotion, так виджет поймет, что анимировать нужно именно этот элемент.

 

'IF'

if - это действие события, то есть условие при котором будет совершенно какое-либо действие.

 

События бывают разные, будь то клик, двойной клик, прокрутка, загрузка страницы и так далее, все события нужно писать на английском языке. Я приведу наиболее популярные все остальные Вы можете найти на сайте - https://developer.mozilla.org/ru/docs/Web/Events

СОБЫТИЯ:

  •   click - одиночный клик левой кнопки мыши или тачклик на тачдевайсах
  •   dblclick - двойной клик
  •   focus - поле ввода для текста выделено
  •   mouseover - курсор на элементе, срабатывает каждый раз на вложенные (дочерние) объекты
  •   animationend - конец анимации
  •   transitionend - конец перехода
  •   mousedown - процесс нажатия мышкой на элемент
  •   mouseup - событие после полного клика мышки
  •   mouseenter - курсор на элементе, не срабатывает каждый раз на вложенные объекты, только один раз на родительский.
  •   mouseleave - курсор покидает элемент, срабатывает только на родительском элементе
  •   mousemove - курсор двигается по элементу
  •   mouseout - курсор покидает элемент, срабатывает каждый раз на родительский и вложенные объекты
  •   orientationchange - Изменение ориентации устройства (книжная/альбомная)
  •   resize - изменение размера браузера
  •   scroll - прокрутка браузера
  •   copy - копирование чего-либо
  •   touchend - Прикосновение закончилось над элементом
  •   touchleave - Прикосновение перемещается от этого элемента, но не заканчивает касаться тачэкрана
  •   touchmove - Перемещение по элементу с помощью касания
  •   touchstart - Касание элемента только что началось.

 

В нашем случае это одиночный клик мыши. Поэтому все последующие действия будут осуществляться только после клика.

 

'ON'

On - это то, на какой элемент будет производиться действие if.

 

PS Если в подсказке к элементу Вы хотите, чтобы именно к этому элементу было применено действие, то его указывать не надо. Если к другому элемету, то нужно.

Здесь поддерживаются так называемые CSS-селекторы, то есть писать нужно название классов, идентификаторов или определенных селекторов.

Класс - это имена стилей графики, стилей абзацев, стилей текста, стилей символов. Пишется сначало точка, потом имя. В нашем случае это .onElem . onElem - это имя, которое мы предварительно создали в стилях графики.

Внимание в начале имени нельзя писать цифры.

Идентификатор - их нужно искать с помощью браузера обычно он пишется так id='u75'. В таком случае здесь мы напишем on: #u75

Селекторы - можно отфильтровать определенные элементу по типу, к примеру если мы напишем on: p, то будет применен ко всему тексту с тегом p. Более подробно с селекторами можете ознакомиться здесь и здесь

 

'DO'

Do - это действие, которое нужно совершить.

 

ДЕЙСТВИЯ

Действия могут быть разными, такие как:

  • анимация (bounce animated)
  •  удалить элемент ($remove)
  •  добавить класс ($addClass classOne classTwo)
  •  удалить класс ($removeClass classOne classTwo)
  •  переключить класс ($toggleClass activeClass)
  •  продублировать элемент ($clone #clone |3) - продублирует элемент три раза

 

В нашем случае нам нужно просто проанимировать наш элемент do: bounce animated

 

АНИМАЦИЯ

Все эффекты анимации Вы можете найти на сайте amandea-shop.com/demo/animotion-rus.html

Также есть дополнительные инструменты, которые добавляет больше возможностей по управлению анимацией

P.S. Обязательно пишите animated (время анимации с этим параметром будет составлять 1 секунда). Исключения составляют параметры duration и delay

Правильно - do: bounce animated

Правильно do: bounce duration-lg

Неправильно - do: bounce

 

КОЛИЧЕСТВО

infinite  :  проигрывать анимацию бесконечно

iteration-1  :  проигрывать анимацию 1 раз

iteration-2  :  проигрывать анимацию 2 раз

iteration-3  :  проигрывать анимацию 3 раз

iteration-4  :  проигрывать анимацию 4 раз

 

НАПРАВЛЕНИЕ АНИМАЦИИ

direction-normal    :  Анимация проигрывается нормально

direction-reverse    :  Анимация проигрывается в обратную сторону

direction-alternate    :  Анимация проигрывается сначало нормально, протом в обратную сторону (работает с infinite и iteration-2)

direction-alternate-reverse  :  Анимация проигрывается сначало обратно, протом нормально (работает с infinite и iteration-2)

 

ВРЕМЯ

duration-xs  :  время анимации равна 0.25 сек

duration-sm  :  время анимации равна 0.5 сек

duration-md  :  время анимации равна 1 сек

duration-lg  :  время анимации равна 2 сек

duration-xl  :  время анимации равна 4 сек

P.S. Работает только без animated

 

ЗАДЕРЖКА ПЕРЕД АНИМАЦИЕЙ

delay-xs : время задержки равна 0.25 сек

delay-sm : время задержки равна 0.5 сек

delay-md : время задержки равна 1 сек

delay-lg : время задержки равна 2 сек

delay-xl : время задержки равна 4 сек

P.S. Работает только без animated

 

ТИП ТАЙМИНГА АНИМАЦИИ (время/скорость)

timing-linear  :  Везде одинаково

timing-ease   :  Плавное появление, плавное затухание

timing-ease-in  :  Плавное появление, резкое затухание

timing-ease-out  :  Резкое появление, плавное затухание

timing-ease-in-out  :   Резкое появление, резкое затухание

 

ВИД КУРСОРА

pointer  :  рука

 

ЦЕНТР АНИМАЦИИ

Если Вам кажется, что во время анимации центр смещен, то добавьте параметр center в 'DO'

 

Если положение элемента после анимации изменилось. К примеру Ваш элемент был повернут на 45 градусов, а после анимации flipInX - он вернулся в положение 0 градусов, то в таком случае Вам нужно будет положить этот элемент в кнопку состояния (или контейнер для элементов в виджете) и к этой кнопке состояния применить эффект в подсказке, предварительно удалив его из элемента.

 

ОБРЕЗАНИЕ АНИМАЦИИ

Если вы применяете команду анимации для изображений или svg графики и какая-либо анимация двигается внутри рамки, при этом она обрезается рамкой, то Вам нужно воспользоваться 'контейнером для элементов', Вам нужно вставить его в проект, потом выделить изображение и вставить в контейнер, и команду уже применять к конейнеру с изображением. Таким образом анимация обрезаться не будет.

 

СКРЫТЬ/ПОКАЗАТЬ ЭЛЕМЕНТ

  • hide - скрыть элемент, место для элемента сохраняется, он просто становится невидимым
  • hide-hard - скрыть элемент, страница будет формирована так, как будто этого элемента не было на сайте.
  • show - показать элемент
  • invicible - скрыть элемент через непрозрачность (возможна анимация перехода в настройках в элементе)
  • vicible - показать элемент через непрозрачность (возможна анимация перехода в настройках в элементе)

Если элемент имеет класс hide в начале загрузке страницы, и для того чтобы анимация появилось нужно в 'DO' указывать всегда show

 

'TO'

To - Элемент, к которому нужно совершить действие, что мы указали в 'Do'.

 

Элементы указываются в такой же формулировке, что и в 'On'. Если действие совершается к элементу, в котором пишется подсказка, то его указывать не нужно.

СЕЛЕКТОРЫ 'TO'

  • target - пишется в TO, и это значит что эффект применяется к элементу, который указан в ON
  • $parent - пишется в TO, и это значит, что эффект применяется к родителю, который указан в ON
  • $children - пишется в TO, и это значит, что эффект применяется ко вложенному элементу, что указан в ON

 

ЧТО В ИТОГЕ МЫ ПОЛУЧИЛИ:
if: click, on: .onElem, do: bounce animated, cursor: pointer - это значит, что при наведении на элемент, курсор меняется на руку, при нажатии, он подпрыгнет. Так как наша цель была присвоить анимацию тому же элементу, в котором указана команда, то в таком случае мы не писали TO и даже можно не писать ON.

 

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

Сначало animotion потом определение(if, on, do, to) ДВОЕТОЧИЕ действие/событие/элемент ЗАПЯТАЯ. Это очень важно, в конце команды запятую можно не ставить.

 

 

Дополнительные параметры определения.

Before, After, cursor

  • Before - Это действие или анимация, которое может выполняться перед 'Do'
  • After - Это действие или анимация, которое может выполняться после 'Do'
  • cursor - это состояние курсора мыши. Если ничего не стоит, то курсор имеет вид стрелки.

Если:

 cursor: pointer - то на данном элементе при наведении курсор поменяется на руку, обозначающая, что на этот элемент можно нажать.

 

Некоторые функции:

  • after: removeAnim - удаляет анимацию после проигрывания (если нужно проиграть анимацию один раз)
  • after: $fireOnce - удаляет событие после проигрывания

 

АНИМАЦИЯ ВО ВРЕМЯ ПРОКРУТКИ

Прокрутка применяется с использованием Before

if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat

 

ЧТО ЭТО ЗНАЧИТ:

Действие: прокрутка, на: окно браузера (именно на нем все будет работать, на window), сделать: анимацию, перед: функция прокрутки, каждый раз повторять(если не нужно повторять просто не пишите repeat)

 

НАСТРОЙКИ ЯДРА ВИДЖЕТА

Убрать горизонтальную прокрутку - Часто бывает так, что те элементы, которые уезжает в правый бок могут создавать горизонтальную прокрутку, поэтому с помощью этого параметра это можно предотвратить.

Убрать вертикальную прокрутку - Возможно, Вам это понадобится, если собираетесь делать сайт без вертикальной прокрутки.

Смещение анимации при скроллинге - бывает так, что  элемент не успевает убираться перед прокруткой браузера поэтому Вы можете его сместить в отрицательно число. По мне так идеально -50

 

НЕСКОЛЬКО ДЕЙСТВИЙ К ОДНОМУ ЭЛЕМЕНТУ

Команд может быть несколько, все они перечисляются через ;

Например

animotion if: click, do: wobble; if: scroll, on: window, do: swing

 

ПРИСВАИВАНИЕ КЛАССА ЧЕРЕЗ ПОДСКАЗКУ

Если Вам нужно присвоить дополнительный класс к элементу, а стили графики уже заняты или Вам не хочется иметь дело со стилями, а нужно просто идентифицировать элемент с помощью класса, то Вы можете написать в подсказке class [имяКласса], Например, class secondBlock

Таким образом к выбранному элементу добавится класс secondBlock и Вы сможете к нему обратиться через команду АниМоушн.

ВНИМАНИЕ: Эту функцию можно использовать только в том случае, если в подсказке нет других команд, т.ч. эта команда должна быть одна. Если помимо нее будет команда animotion или другая команда, то работать НИЧЕГО НЕ БУДЕТ. БУДЬТЕ ВНИМАТЕЛЬНЫ.

 

ЗАМЕТКИ К CSS-КОДУ

Если Вы используете свои классы в стилях и Ваши стили не изменяют элемент в соответствии с Вашими настройками, то добавьте в конец css-правила !important

Например, .bg{background-color: #27A6D9 !important;}

 

Если поле ввода виджета не вмещает Ваш CSS-код, то Вы можете писать в head или поместить, как объект HTML

Чтобы придать элементу анимационный переход во время добавления/удаления/переключения класса в команде виджета анимоушн, то добавьте переход в настройках состояния виджета в Adobe Muse CC 2015.1 или воспользуйтесь виджетом плавного перехода - http://www.lpkurs.ru/rollover.html для предыдущих версий Adobe Muse