В предыдущая part этого урока we’ ве обсуждали, как создать анимированное меню с раздвижными Javascript использованием JQuery рамки.В этом уроке we’ будем продолжать развивать наше приложение путем повышения эффекта скольжения различными способами и сделать его еще более customizable.
Когда мы закончим с этой статьи, мы должны иметь полноценную анимированное меню Javascript, которая позволит вам для отображения меню на большое количество творческого пути.Так let’ Продолжим там, где мы остановились
Расширенный анимационные эффекты с ослаблением Plugin
Простой easing
Самый простой способ придать больше жизни нашей анимации заключается в использовании jQuery’ S Easing Plugin.Вы должны скачать ее и включать скрипт в заголовок, так it’ буду выглядеть примерно так:
<script type="text/javascript" src="javascript/jquery.js"></script> <script type="text/javascript" src="javascript/jquery_easing_plugin.js"></script> <script type="text/javascript" src="javascript/sliding_menu.js"></script>
Чтобы понять, что ослабление плагин делает, мы должны оглянуться назад на мгновение и посмотреть, как мы анимированные нашем меню до сих пор.Это код, который мы использовали в первой части:
function slide ( menu_slider, width )
{
this.is_animation_running = true;
var self = this;
menu_slider.animate (
{ 'width' : width },
this.effect_duration,
function ()
{
self.is_animation_running = false;
}
);
}
Мы сказали slide функция, которая контейнер для анимации, ширина we’ бы хотел, чтобы масштабировать его и продолжительность анимации, that’ и все.Мы просто сказали JQuery, чтобы уменьшить контейнер 253px в течение 1 секунды периода, например, но мы никогда не указанные на самом деле, как добраться от 0px на 253px.И that’ S, где ослабление Плагин поставляется в play.
Мы можем передать еще один параметр animate функция, которая определяет математическое представление о том, сколько эффект должен развиваться с течением времени.Конечно, мы don’ т хотят связываться с слишком много математики, если возможно, that’ почему мы использовать этот плагин для доступа всех этих предопределенных математических формул по name.
Если вы смотрели нашу демо тщательно в предыдущей части, вы, возможно, заметили, что анимация doesn’ Не играю в линейном порядке.That’ потому, что JQuery имеет два встроенных в ослаблении методами, уже, “ linear” и “ swing”.По умолчанию “ swing”, но вы можете изменить его легко “ linear” без дополнительного кода.Тем не менее, ослабление плагин дает нам еще больше контроля.Вы можете использовать более 30 различных функций замедления, чтобы удовлетворить ваш стиль и вкус.Вот несколько примеров, не стесняйтесь экспериментировать с этим по своему усмотрению или просмотр каждого возможного влияния на смягчение plugin’ S homepage.
Первый here’ SA демо использованием “ linear” смягчение (как I’ уже упоминал, вы don’ T нужен плагин для этого).Можете ли вы заметите разницу
Следующее, here’ SA более агрессивный эффект, “ easeOutElastic”:
Наконец, немного тонкие экспоненциальной функции, “ easeOutExpo”:
Сейчас let’ посмотрим на код за это.На самом базовом уровне, ослабление formula’ имя должно быть передано между продолжительностью и параметров функции обратного вызова jQuery’ S animate методом, как это:
// Remember, we did the animation inside the slide function?
function slide ( menu_slider, width )
{
this.is_animation_running = true;
var self = this;
menu_slider.animate (
{ 'width' : width },
this.effect_duration,
"linear", // Here it goes, it could be "easeOutElastic", "easeInCubic", or whatever
function ()
{
self.is_animation_running = false;
}
);
}
Я должен упомянуть здесь, что JQuery даже намного более гибкая, с версии 1.4 вы можете использовать “ в собственности easing”, что означает, что вы можете указывать различные функции замедления для каждого свойства анимации.С we’ Re меняется лишь “ width” атрибут, это не наше дело, но вы можете прочитать об этом на JQuery API site.
Следующее, let’ посмотрим, как мы можем реализовать это в нашем SlidingMenu класса.Очевидно, что мы хотим передать ослабление типа в качестве параметра конструктора класса.Here’ ы, как наш новый конструктор выглядит так:
function SlidingMenu ( container_name, menu_slider_width, duration, easing ) // The new easing parameter gets passed
{
this.effect_duration = duration;
this.menu_slider_width = menu_slider_width;
this.is_animation_running = false;
this.active_menu = $($( container_name + " .menu_slider" )[0]);
this.easing = easing; // Store the easing string as the instance's variable
var self = this;
$( container_name + " .menu_button" ).bind( "click", self, on_click );
this.slide ( this.active_menu, this.menu_slider_width );
}
И это, как мы можем называть его:
new SlidingMenu( ".menu", 253, 1000, "easeOutElastic" );
Мы просто передаем ослабление типа в качестве четвертого параметра.Также обратите внимание, что мы didn’ T присвоить класс к глобальной переменной (в отличие от предыдущей части) для дальнейшего снижения возможных конфликтов с другими скриптами на page.
Наконец, мы используем эту информацию в наших slide функции, чтобы указать смягчения:
function slide ( menu_slider, width )
{
this.is_animation_running = true;
var self = this;
menu_slider.animate (
{ 'width' : width },
this.effect_duration,
this.easing, // We replaced a specific value with the easing string
function ()
{
self.is_animation_running = false;
}
);
}
Помните, что мы можем делать все это, потому что we’ уже использовали “ prototype” сделать slide SlidingMenu’ собственное общественное function.
Комплекс easing
Let’ возьмем это шаг вперед!Мы можем улучшить наше приложение, чтобы принимать более одного ослабление функции, а затем воспроизводить их в случайном порядке, например.Чтобы сделать это, нужно просто передать массив ослабления типов в конструкторе, а не один, а затем выбрать один из них случайно при воспроизведении animation.
Это может быть весьма полезной функцией, поскольку она doesn’ T ограничивать тех, кто хочет использовать только один вид смягчения, но дает больше разнообразия, тем, кто хочет больше.Если you’ повторно не в восторге от идеи изменения темпа анимации случайным образом, все, что вам нужно сделать, это пройти только один смягчения типа SlidingMenu instance.
Here’ S слегка измененная версия slide функции:
function slide ( menu_slider, width )
{
this.is_animation_running = true;
var self = this;
menu_slider.animate (
{ 'width' : width },
this.effect_duration,
this.curr_easing, // Use the new easing variable
function ()
{
self.is_animation_running = false;
}
);
}
Теперь вы можете увидеть I’ уже использовали this.curr_easing, как в настоящее время используется ослабление типа, но то, что этот тип будет точно сводится к on_click функции:
function on_click ( event )
{
. . . // Here we run the checks
// First select a random easing function from the this.easing array
rand_num = Math.floor ( Math.random() * event.data.easing.length ); // Generate a random number between 0 and (arraylength-1)
event.data.curr_easing = event.data.easing[rand_num]; // Choose the random value
. . . // Here is the code that does the animations
}
Мы используем Math.random для генерации случайных чисел и Math.floorокруглить его до целого числа (мы в основном вырезать все цифры после точки).Эти две функции помогают нам выбрать случайного ослабления наших SlidingMenu instance’ S ослабление типов, которые мы выбираем на создание объекта.Кстати, вы помните, мы использовали event.data внутри этой функции для доступа к классу, например, право
Теперь я didn’ T упоминания, но это должно быть очевидно, почему мы определяем ослабление типа в on_click вместо того, чтобы делать непосредственно в slide функции: для плавной анимации, нам нужны как “ слайд in” и “ слайд out” действий, которые необходимо использовать тот же смягчения.Мы могли бы также передать эту переменную в качестве нового параметра slide, но, возможно, it’ SA немного чище работать с меньшим числом параметров here.
К счастью, наш конструктор doesn’ T безразлично параметром является строкой или массивом, поэтому мы don’ т придется изменить это.Все that’ S слева, чтобы создать новый экземпляр SlidingMenu проходя по массиву ослабления функций, например, так:
new SlidingMenu( ".demo_4 .menu", 253, 1000, ["easeOutCubic", "linear", "easeOutExpo"] );
Если все хорошо, вы должны увидеть три типа смягчения изменения случайным между animations.
Наш класс стал немного более гибким с этими новыми возможностями.Тем не менее, в то время как we’ повторно на это, let’ S настроить функцию анимации немного more.
Вертикальные menu
Одна очень важная особенность, которую мы haven’ T реализована в последней части является способность скользить пунктов меню по вертикали.Мы должны исправить это now.
Для того чтобы сделать это, нам нужно сделать 3 вещи:
- Представьте другой параметр в конструктор класса, we’ будем называть это
attr.Это будет либо “ width” или “ height” для горизонтального и вертикального меню, respectively - Эта Attr переменной в нашей
slideфункции вместо“ Width” - Изменить “ width” строки “ amount” где appropriate
Таким образом, конструктор просто берет еще одну строку переменной и зарегистрировать его как обычно:
function SlidingMenu ( container_name, menu_slider_width, duration, easing, attr ) // The new attr parameter
{
this.effect_duration = duration;
this.menu_slider_width = menu_slider_width;
this.is_animation_running = false;
this.active_menu = $($( container_name + " .menu_slider" )[0]);
this.easing = easing;
this.attr = attr; // Remember our new variable
. . .
}
Слайд функцией является немного более сложным, that’ почему я didn’ T включить это в первой части.За первые мысли, вы можете попробовать сделать что-то вроде этого:
function slide ( menu_slider, amount ) // Notice we changed it from "width" to "amount"
{
this.is_animation_running = true;
var self = this;
menu_slider.animate (
{ this.attr : amount }, // replace 'width' with the attr
this.effect_duration,
this.easing,
function ()
{
self.is_animation_running = false;
}
);
}
Но, конечно, wouldn’ T работу, так как первый параметр функции живого map объект.Чтобы назначить правильное количество вправо Attr, используя только переменные, которые мы должны создать новый объект карты первым, и передать его на animate функции, например, так:
function slide ( menu_slider, amount )
{
var map = {}; // Create empty map object
map[this.attr] = amount; // Set attr to amount
this.is_animation_running = true;
var self = this;
menu_slider.animate (
map, // Pass map to animate
this.effect_duration,
this.easing,
function ()
{
self.is_animation_running = false;
}
);
}
В коде выше, var map = {} создает пустой map объекта, то мы устанавливаем нужные значения вручную на следующей строке.(Мы could’ уже использовали var map = new Object(), а вместо {}., Чтобы получить аналогичные результаты) Наконец, мы просто пройти этот новый объект в живых method.
Если все пойдет хорошо, все, что нужно сделать, это создать новый экземпляр SlidingMenu и настройка параметров Attr:
function slide ( menu_slider, amount )
{
new SlidingMenu( ".menu", 158, 1000, "easeOutBounce", "height" );
}
Here’ приведен пример, демонстрирующий использование вертикального меню и “ easeOutBounce” ослабление функции:
Chaining animations
Настройка его up
Splendid!Наша маленькая SlidingMenu становится весьма надежным, но нам также нужно создать механизм для обработки большего анимации в нашем меню.It’ Не то, чтобы трудно, но мы должны рассмотреть несколько вещей, прежде чем мы начнем coding.
Наиболее важным является тот факт, что jQuery’ с живой функция будет работать независимо от других команд вы выполняете, поэтому мы can’ T просто положить одну анимацию линии после другого, потому что тогда все анимации будут казаться работать вместе, чтоНе то, что мыwant.
Мы воспользовались этой функцией в последней части, начиная двух slide функций (раздвижные одной панели, а также другой один) один за другим, но они все еще выглядят как they’ повторного перемещения в то же время.Это было полезно для этого, но мы должны работать вокруг него одновременно не более цепочки анимации together.
We’ уже видели, как мы можем делать такие вещи, после того, как анимация играет, указав последний параметр animation функции, но мы должны быть немного сложнее, если мы хотим, чтобы увидеть эффект до скольжения кнопок меню.Для этого we’ буду использовать setTimeout Javascript функции.Он имеет следующие syntax.
setTimeout("Javascript commands",milliseconds);
А что SetTimeout делает это ждет данной миллисекунд, и только потом выполняет указанную команду Javascript, которая, как правило, простые функции call.
Так let’ S изменить наши on_click_function соответственно:
function on_click ( event )
{
// The usual checks
if ( $(this).next()[0] == event.data.active_menu[0] )
{
return;
}
if ( event.data.is_animation_running )
{
return;
}
var menu_slider = $(this).next();
event.data.first_anim ( menu_slider ); // First animation
setTimeout ( function() { event.data.do_slide( menu_slider ), event.data.extra_anim_duration }, event.data.first_anim_duration ); // Slide panels after the first animation finishes
}
Как вы можете видеть, во-первых, мы делаем ту же проверку, мы сделали в предыдущей части, то мы сохраняем menu_slider переменной well.
И вот наступает новый код: сначала запустить анимацию we’ хотел бы видеть перед раздвижными кнопок меню и использовать setTimeout ждать соответствующее количество миллисекунд, прежде чем начать скользить пунктов меню.Вы можете увидеть we’ ве введены еще две переменные, чтобы наши SlidingMenu конструктор, first_anim который будет определять анимации мы хотим запустить до эффекта скольжения, а extra_anim_duration, который будет хранить дополнительную animation’ S длительность в миллисекундах.We’ возьму посмотреть на реализацию этого в SlidingMenu конструктора в следующем section.
Пока let’ просто сконцентрироваться на остальной части этого кода.Вы можете видеть, мы удалили несколько строк из on_click, все эти линии перейдет в do_slide:
function do_slide ( menu_slider )
{
this.slide ( this.active_menu, 0 );
this.active_menu = menu_slider;
this.slide ( this.active_menu, this.menu_slider_width );
}
Это очень просто: мы просто скользить в настоящее время активной панели и выдвиньте новую, как раньше.Но на этот раз мы обращаемся к переменным с этим ключевым словом.Чтобы сделать это, мы должны сделать do_slide общественные функции SlidingMenu, а также:
SlidingMenu.prototype.do_slide = do_slide;
Наконец, нам нужно добавить возможность воспроизведения анимации после панелей выскользнула.We’ ве обсуждали это несколько раз, прежде чем: мы используем animation function’ последним параметром, чтобы сделать это, так что slide функции изменяется, как это:
function slide ( menu_slider, amount )
{
. . . // Some code we left out here
menu_slider.animate (
map,
this.effect_duration,
easing,
function ()
{
self.is_animation_running = false;
if ( amount == self.menu_slider_width )
{
self.last_anim( self, menu_slider ); // The key line: play the last animation
}
}
);
}
Эти последние несколько линий позволит нам играть в отделке анимации, если это необходимо.Мы только играть, когда новая панель закончил выскальзывания, поэтому мы won’ T называют его дважды случайно.Конечно, у нас еще есть возможность не делать ничего здесь, что we’ буду передать пустую функцию конструктора или не проходят вообще ничего, как last_anim (см. следующий раздел).Мы передаем menu_slider переменной, на всякий случай, мы won’ т обязательно использовать it.
Ну, мы должны были работать совсем немного, чтобы получить эту функцию работать, но все это модификация позволяет нам сделать наше меню, даже любитель, не трогая основной код SlidingMenu.Все, что нам нужно сделать, это указать“ First_anim” и “ last_anim” Функции и затем создать экземпляр SlidingMenu соответственно.We’ будете закончить эту мысль в следующем разделе скоро, но сначала let’ посмотрим на некоторые примеры использования этих двух функций
Простые example
Во-первых, we’ будем моди …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров