Дополнительные параметры анимации кнопки¶
Посредством дополнительных параметров анимации, указываемых в самом имени анимации посредством _ разделителей возможно указать время отдельных этапов анимаций, ее направления и т.д.
Также дополнительные параметры анимации можно указывать в параметре AnimationData, что равносильно указанию их в имени анимации и является более новым способом установки параметров.
Список анимаций
———————————-
opacityrolloutlookoutforwardAndBackforwardStopAndAwaycornerToCornerforwardAndStoplootOutAndOuttopToBottomAndStopupToDownresizeAnimation
opacity¶
Формат: opacity_<конечное_значение_прозрачности_кнопки>
Пример: opacity_0.3
В параметре AnimationData: {"finalOpacity":0.5}
rollout¶
Формат: rollout_<начальное_положение>_<процент_выдвижения_кнопки>
Пример: rollout_left_70
В поле AnimationData: {"side":"left","rollOutPercent":80}
<процент_выдвижения_кнопки>¶
Процент от ширины страницы на которую максимально будет выдвинута кнопка
lookout¶
Формат: lookout_<начальное_положение>_<процент_выдвижения_кнопки>
Пример: lookout_left_70
В поле AnimationData: {"side":"left"}
<процент_выдвижения_кнопки>¶
Процент от ширины кнопки на которую максимально будет «выглядывать» кнопка
cornerToCorner¶
Дополнительные параметры отсутствуют.
forwardStopAndAway¶
Формат: forwardStopAndAway_<начальное_положение>
Пример: forwardStopAndAway_right
В поле AnimationData: {"side":"left"}
forwardAndStop¶
Формат: forwardAndStop_<начальное_положение>_<длительность_первого_этапа>_<дополнительный_режим>_<ширина_выезда>_<начальное_положение>
Пример: forwardAndStop_right_2000_0.9
В поле AnimationData: {"widthPercent": 0.8, "side":"left","waitDuration":2500, "startWidthPercent": 0.1}
<длительность_первого_этапа>¶
Длительность проезда кнопки от одного края до другого в мс
<дополнительный_режим>¶
Варианты:
maximizeButton- увеличение размеров кнопки до размеров экрана по завершению перемещенияopenModal- открытие модального окна по завершению анимации кнопки
<ширина_выезда>¶
Задается как число от 0 до 1 - соответсвует пропорциональной ширине (от ширины страницы) для точки завершения выезда кнопки.
К примеру при 1 кнопка проедет всю щирину экрана, при 0.5 - только половину, после чего остановится.
<начальное_положение>¶
Задается в диапазоне от 0 до 1, соответствует пропорциональной ширине страницы, т.е. 0 - левый край страницы, 1 - правый, 0.5 - половина страницы.
upToDown¶
Формат: ``upToDown_<сторона_up_или_down>_<длительность_ожидания_перед_запуском_анимации_в_мс>_<длина_перемещения>_<начальное_положение> ``
Пример: `` upToDown_up_2000_1_0``
Данная анимация также может именоваться TopToBottom.
В поле AnimationData: {"side":"top","waitDuration":2500, "heightPercent": 1, "startHeightPercent":0}
<длительность_ожидания_перед_запуском_анимации_в_мс>¶
Длительность паузы (в мс) после первого проезда кнопки в противоположной части экрана
<длина_перемещения>¶
Длина от высоты страницы на которую будет перемещена кнопка. Задается в диапазоне от 0 до 1 (по - умолчанию: 1).
<начальное_положение >¶
Стартовая позиция кнопки в процентах от высоты экрана. Задается в диапазоне от 0 до 1 (по - умолчанию: 0).
forwardAndBack¶
Формат: `` forwardAndBack_<начальное_положение>_<pauseDuration>_<stopDuration>``
Пример: `` forwardAndBack_right_2000``
В поле AnimationData: {"side":"left","pauseDuration":0,"stopDuration":0}
<pauseDuration>¶
Длительность паузы (в мс) после первого проезда кнопки в противоположной части экрана
<stopDuration>¶
Длительность задержки до уменьшения probtn_wrapper
lookOutAndOut¶
Анимация с выглядыванием кнопки (два раза), затем показом модального окна и выездом кнопки к боку модального окна.
Формат: `` lookOutAndOut_<начальное_положение>_<ширина_выглядывания>``
Пример формата: `` lookOutAndOut_right_50``
В поле AnimationData: {"side":"left", "rollOutPercent":50}
Пример: http://demo.viewst.com/button_example4/fruto/desktop/
<ширина_выглядывания>¶
Процент выглядывания кнопки
resizeAnimation¶
Анимация изменения размера кнопки.
В поле AnimationData: [{"autoStart": false, "width": -100, "height": 0.176,
"waitDuration": 800, "name": "step2",
"ButtonIframeInitialSize": {"W": "375", "H": "66"} }]}
autoStart¶
Если значение установлено в true - анимации начинают выполняться сразу. Если false - после получения события probtn_start_animation.
window.top.postMessage({ "command": "probtn_start_animation" }, "*");
width¶
Новая ширина кнопки
height¶
Новая высота кнопки
name¶
Идентификатор шага анимации