MooTools - Fx.Options

MooTools предоставляет различные Fx.Options, которые помогут Fx.Tween и Fx.Morph. Эти параметры позволят вам контролировать эффекты.

Давайте обсудим несколько вариантов, которые предоставляет MooTools. Прежде чем мы продолжим, взгляните на следующий синтаксис для настройки параметров.

Синтаксис

var morphObject = new Fx.Morph(morphElement, {
   //first state the name of the option
   //place a :
   //then define your option
});

fps (кадров в секунду)

Этот параметр определяет количество кадров в секунду в анимации при морфинге. Мы можем применить эти fps к функциям Morph или Tween. По умолчанию значение fps равно 50. Это означает, что любая функция будет принимать 50 кадров в секунду во время морфинга.

пример

Давайте рассмотрим пример, в котором мы изменим элемент div со скоростью 5 кадров в секунду. Взгляните на следующий код.

<!DOCTYPE html>
<html>

   <head>
      <style>
         #morph_element {
            width: 100px;
            height: 100px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var morphStart = function(){
            this.start({
               'width': 200,
               'height': 200,
               'background-color': '#d3715c'
            });
         }
         
         window.addEvent('domready', function() {
            var morphElement = $('morph_element');
            var morphObject = new Fx.Morph(morphElement, {
               fps: 5
            });
            
            $('start').addEvent('click', morphStart.bind(morphObject));
         });
      </script>
   </head>
   
   <body>
      <div id = "morph_element"> </div><br/>
      <input type = "button" id = "start"value = "START"/>
   </body>
   
</html>

Вы получите следующий вывод -

Вывод

Нажми на STARTкнопку, чтобы найти анимацию морфинга. Это помогает нам наблюдать за количеством кадров, используемых для анимации. Используйте разные значения для fps, чтобы получить различие в анимации. Рекомендуется использовать значение fps меньше 10. Это поможет вам легко увидеть разницу.

единица измерения

Эта опция используется для установки типа единиц для чисел. Как правило, у нас есть три разных типа единиц измерения - px,% и em. Взгляните на следующий синтаксис.

Синтаксис

var morphObject = new Fx.Morph(morphElement, {
   unit: '%'
});

Приведенный выше синтаксис предназначен для распределения процентов по единицам. Это означает, что все числовые значения рассматриваются как проценты.

ссылка

Эта опция позволяет управлять несколькими вызовами для запуска анимации. Если вы применяете несколько вызовов событий одновременно, эти вызовы будут приняты как вызовы ссылок. После завершения первого вызова автоматически выполняется второй вызов. Он содержит следующие три варианта -

ignore- Это вариант по умолчанию. Он игнорирует любое количество вызовов, пока не завершит эффект.
cancel- Это отменяет текущий эффект, когда создается другой. Он соответствует последнему приоритету вызовов.
Chain- Это позволяет связать эффекты вместе и поддерживать стек вызовов. Он выполняет все вызовы, пока не пройдёт все связанные вызовы в стеке.

Взгляните на следующий синтаксис для использования опции ссылки.

Синтаксис

var morphObject = new Fx.Morph(morphElement, {
   link: 'chain'
});

Продолжительность

Эта опция используется для определения продолжительности анимации. Например, если вы хотите, чтобы объект переместился на 100 пикселей в течение 1 секунды, он будет двигаться медленнее, чем объект, перемещающийся на 1000 пикселей за 1 секунду. Вы можете ввести число, которое измеряется в миллисекундах. Или вы можете использовать любой из этих трех вариантов вместо чисел.

Короткий = 250 мс
Нормальный = 500 мс (по умолчанию)
Длинный = 1000 мс

Взгляните на следующий синтаксис использования продолжительности.

Синтаксис

var morphObject = new Fx.Morph(morphElement, {
   duration: 'long'
});

Или же,

var morphObject = new Fx.Morph(morphElement, {
   duration: 1000
});

переход

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

Синтаксис

var tweenObject = new Fx.Tween(tweenElement, {
   transition: 'quad:in'
});

В следующей таблице описаны различные типы переходов.

S.No.	Тип перехода и описание
1	Линейный Отображает линейный переход с событиями in, out, in-out
2	Quad Отображает квадратичный переход с событиями in, out, in-out
3	Кубический Отображает кубический переход с событиями in, out, in-out
4	Кварта Отображает квартетный переход с событиями входа, выхода, входа-выхода
5	Квинт Отображает пятиступенчатый переход с событиями входа, выхода, входа-выхода
6	Pow Используется для генерации Quad, Cubic, Quart и Quint с событиями in, out, in-out
7	Экспо Отображает экспоненциальный переход с событиями входа, выхода, входа-выхода
8	Circ Отображает круговой переход с событиями входа, выхода, входа-выхода
9	Синус Отображает синусоидальный переход с событиями входа, выхода, входа-выхода
10	Назад Делает переход назад, затем все вперед с событиями in, out, in-out
11	Отказов Делает переход живым с событиями in, out, in-out
12	Эластичный Переход эластичной кривой с событиями входа, выхода, входа-выхода