Учебники

MooTools — Fx.Options

Сентябрь 8, 2018

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 к функциям 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,% и ems. Посмотрите на следующий синтаксис.

Синтаксис 

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

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

ссылка на сайт

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

  • игнорировать — это опция по умолчанию. Он игнорирует любое количество вызовов, пока не завершит эффект.

  • отмена — отменяет текущий эффект, когда создается другой эффект. Это следует за новейшим приоритетом вызова.

  • Цепочка — это позволяет объединять эффекты и поддерживать стек вызовов. Он выполняет все вызовы, пока не пройдет все цепочки вызовов в стеке.

игнорировать — это опция по умолчанию. Он игнорирует любое количество вызовов, пока не завершит эффект.

отмена — отменяет текущий эффект, когда создается другой эффект. Это следует за новейшим приоритетом вызова.

Цепочка — это позволяет объединять эффекты и поддерживать стек вызовов. Он выполняет все вызовы, пока не пройдет все цепочки вызовов в стеке.

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

Синтаксис 

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

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

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

  • Короткий = 250 мс
  • Нормальный = 500 мс (по умолчанию)
  • Long = 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'
});

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

линейный

Отображает линейный переход с событиями входа, выхода и выхода

Quad

Отображает квадратичный переход с событиями in, out, out

кубический

Отображает кубический переход с событиями in, out, out

кварта

Отображает квартальный переход с событиями in, out, out

квинта

Отображает квинтичный переход с событиями in, out, out

бух

Используется для генерации Quad, Cubic, Quart и Quint с событиями in, out, out

Экспо

Отображает экспоненциальный переход с событиями in, out, out

ЦО

Отображает круговой переход с событиями in, out, in out

Синус

Отображает синусоидальный переход с событиями in, out, out

назад

Делает переход обратно, затем весь вперед с событиями in, out, out

подпрыгивать

Делает переход оживленным с событиями in, out, out

Эластичный

Переход по упругой кривой с событиями in, out, in out

42
Share: