Спец. Эффекты в Mootools – Уроки Mootools – Урок 10


Еще раз добро пожаловать в наш класс по изучению библиотеки Mootools 1.2. Если вы пришли сюда впервые, советую посмотреть и предыдущие уроки, особенно, если вы не совсем знакомы с этой библиотекой (внизу страницы, около комментариев есть специальная ссылка).

Итак, сегодня мы рассмотрим возможности создания спец. эффектов в Mootools из библиотеки эффектов Fx.Tween. Функции этого дополнения, как и многие другие функции библиотеки, очень просты в применении, но при этом дают разработчикам очень большую свободу действий, позволяя улучшить эстетичность веб-приложений и конечно же «юзабилити» (очень модное слово сегодня в интернете; в переводе с англицкого: usability – «удобство (ис)пользования«).

Быстрые спец.эффекты

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

.tween();

Английское слово tween означает мягкий переход из одного свойства в другое. В нашем случае можно сказать, что переход осуществляется от одного значения свойства, к другому. Например можно сделать так, чтобы блок div мягко и красиво растянулся с ‘width:100px’ до ‘width:300px’. А фреймворк Mootools позаботился о том,
чтобы создание таких эффектов не занимало более секунды!

//создаем функцию
var tweenerFunction  = function() {

        //выбираем элемент, над которым будем издеваться
        //и добавляем к нему .tween
        //а в качестве атрибутов добавляем свойство, которое будет изменяться
        //и значение на которое это свойство нужно мягко изменить
	$('tweener').tween('width', '300px');

}
 
window.addEvent('domready', function() {
        //тут мы добавляем прослушку на определенное событие (в нашем случае click)

        //к кнопке, которая должна вызвать эффект
        $('tween_button').addEvent('click', tweenerFunction);

});

Ну а HTML код для этой функции выглядит так:

<button id="tween_button">растянуть до 300 px</button>

.fade();

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

//создаем функцию
var tweenFadeFifty = function() {

       //выбираем объект
       //добавляем к нему .fade
       //и задаем значение между 0 и 1, к которому нужно привести прозрачность элемента
       //(0 - невидимка, 1 - полный видимка)
	$('tweener').fade('.5');

}
 
window.addEvent('domready', function() {
        //тут мы добавляем прослушку на определенное событие (в нашем случае click)

        //к кнопке, которая должна вызвать эффект
        $('tween_fade_fifty').addEvent('click', tweenFadeFifty);

});

Вот и HTML код:

<button id="tween_fade_fifty">Снижаем видимость до 50%</button>

.highlight();

Снова не могу обойтись без слова «замечательная»! .highlight() – это замечательная функция! Она очень узконаправленная, при этом также очень полезна. Она имеет две функции:

  1. Использование для мягкого перехода к иному цвету фона (можно посмотреть пример немногой ниже).
  2. Мгновенно изменяет цвет фона, потом мягко переходит к другому цвету.

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

А пока предлагаю рассмотреть пример использования функции. Создадим два блока div, и применим к ним оба типа функции .highlight().

//создаем функцию
var tweenHighlight = function(event) {

        //тут мы будем использовать конструкцию, которую пока еще не использовали - event.target
        //которая будет передаваться как параметр функции
        //на человеческом языке это звучит как "цель события"
        //а так как эффект применим к тому же элементу, к которому прикреплена прослушка на событие
        //не нужно будет снова создавать селектор.
        //обратите внимание, что addEvent автоматически передаст объект события в качестве параметра

        //в функцию, которую вызывает... оч полезно ;) 
	event.target.highlight('#eaea16');
}
 
//создаем вторую функцию

//тут нужно передать сразу параметр
//так как функция будет вызываться при определенном событии
//и ей в параметры автоматически припишут событие (как в функции выше)
//а элемент можно вызывать с помощью конструкции .target
//(цель события)
var tweenHighlightChange = function(item) {

        //тут, вместо одного значения цвета, через запятую добавляем второй цвет
        //что установит первый цвет, и целевой цвет перехода
        item.target.highlight('#eaea16', '#333333');

}
 
window.addEvent('domready', function() {
	$('tweener').addEvent('mouseover', tweenHighlight);

    $('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});

Вкусные примеры

Вот она – самая интересная часть любого урока. Помните, еще со школы – все что там училка трындит, очень часто кажется бессмыслицей, но если правильно подобрать пример – все обретает очень четкий смысл. Вот они наши примеры. Понажимайте на кнопки в разном порядке и обратите внимание на поведение объекта:

var tweenerFunction  = function() {

	$('tweener').tween('width', '300px');
}

 
var tweenerGoBack  = function() {
	$('tweener').tween('width', '100px');

}
 
//функция .fade еще принимает ключевые слова 'out' и 'in',
//что эквивалентно 0 и 1 соответственно
var tweenFadeOut = function() {

	$('tweener').fade('out');
}
 
var tweenFadeFifty = function() {

	$('tweener').fade('.5');
}
 
var tweenFadeIn = function() {

	$('tweener').fade('in');
}
 
var tweenHighlight = function(event) {

	event.target.highlight('#eaea16');
}
 
window.addEvent('domready', function() {

	$('tween_button').addEvent('click', tweenerFunction);
	$('tween_reset').addEvent('click', tweenerGoBack);

	$('tween_fade_out').addEvent('click', tweenFadeOut);
	$('tween_fade_fifty').addEvent('click', tweenFadeFifty);

	$('tween_fade_in').addEvent('click', tweenFadeIn);
	$('tweener').addEvent('mouseover',tweenHighlight);

});

При наведении курсора, кстати, работает первый тип функции .highlight().

Ширина 300Ширина 100В невидимкуНа половину видно/невидноВидимка

А этот одинокий квадратик иллюстрирует работу второго типа функции .highlight().

И это еще не всё…

Создание нового эффекта

Если потребовалось больше гибкости в управлении эффектами, или еще какие-то дополнительные возможности, а такое бывает, скажу я вам, нужно будет всего навсего создать новый эффект, вместо использования уже имеющихся эффектов в Mootools. Ниже пример создания нового эффекта. Обратите внимание на ключевое слово new, которое используется для создания нового объекта Fx.Tween:

window.addEvent('domready', function() {
        //вначале назначаем объект, над которым собираемся издеваться своим новым эффектом,
//и назначаем этот объект новой переменной

        var newTweenElement = $('newTween');
 
       //теперь создаем новый эффект, которому передаем переменную с объектом в качестве параметра
       var newTween = new Fx.Tween(newTweenElement);

});

<div id="newTween"><!-- это элемент, к которому применим новый Tween эффект--></div>
<!-- а это кнопка, которая очень скоро сыграет свою главную роль -->

<button id="netTween_set">Назначить</button>

Установка стилей

При создании нового объекта Tween из элемента, можно начинать назначать свойства стилей с помощью функции .set();. Эта функция работает моментально и прицип ее работы практически ничем не отличается от .setStyle();, рассмотренной нами в 7-м уроке:

var newTweenSet = function() {
        //обратите внимание на использование ключевого слова "this"
        //немного далее рассмотрю более подробно использование этого слова

	this.set('width', '300px');
}

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

.bind()

С помощью функции .bind(); можно сделать любой параметр равным ключевому слову “this” в спектре работы определенной функции:

//вначале добавляем событие клика к кнопке, которую видели немного выше
//потом, помимо простого вызова функции
//мы добавляем к ней ".bind()"
//и помещаем в скобки все, что мы хотим передать этой функции

//и теперь, внутри функции "newTweenSet," ключевое слово "this"
//будет относиться к переменной "newTween"
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

Таким образом, если взглянем на функцию выше, “this” теперь ровняется тому, что мы говорим «newTween» (который, по совместительству, и является нашим объектом классса tween)

А теперь, соединим все это в единое целое:

//вот наша функция
var newTweenSet = function() {

        //так как мы использовали bind, "this" теперь относится к "newTween"
        //т.е. на самом деле мы говорим
        //newTween.set('width', '300px')
	this.set('width', '300px');

}
 
window.addEvent('domready', function() {
    //вначале назначаем нашему элементу переменную

	var newTweenElement = $('newTween');
 
    //потом создаем новый эффект FX.Tween и назначаем его своей собственной переменной
    var newTween = new Fx.Tween(newTweenElement);

 
    //а сейчас добавляем наше событие, в котором связываем newTween и newTweenSet с помощью bind
	$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

});

Запуск эффекта tween

А теперь, когда мы полностью настроили наш объект, наша функция находится вне события domready и мы помним, как с помощью функции .set(); назначить параметр стиля, потому, давайте пройдем к, собственно, спец.эффектам. Запустить эффект – очень просто! Аналогично .fade(); использовать .start(); можно двумя методами.

  1. Провести преобразование от одного значения свойства стиля до другого
  2. Назначить значение свойства стиля, потом перейти у другому
//эта строчка изменит текущее значение свойства width на 300px
newTween.start('width', '300px');

 
//эта строчка установит свойство width на 100px, потом сделает плавный переход на 300px
newTween.start('width', '100px', '300px');

Теперь можно начать (с помощью функции .start();) выполнение эффекта из функции и спользовать «this», если была использована функция .bind(); для связи с «newTween».

По эффектам tween пока все…

Несмотря на то что о эффектах tween еще можно долго говорить. Например, если нужно наложить спец. эффекты на несколько свойств стилей одновременно, можно использовать функцию .morph();. Можно использовать библиотеку эффектов и переходов для изменения тех самых переводов. Но этот урок и так получается довольно длинным, потому оставим это все на другие уроки.

Всем удачи и успехов!

, , ,

  1. #1 by SDemon on 16.08.2010 - 11:30 am

    Очень полезные уроки, спасибо огромное! :)

    Но, вот проблемка…

    Пытаюсь изучить mootools, т.к. работаю с Joomla, но она использует старый mootools 1.1, в которой .tween не заработал! :(
    Даже самая последняя версия Joomla 1.5.15 использует mootools 1.11.
    Пробовал обновлять, но тогда перестает работать в админке верхнее меню и на сайте начинаются проблемы!
    Переходной вариант “mootools-1.2.4-with-1.1-classes” тоже не помогает!
    Что делать?

    • #2 by proglammer on 16.08.2010 - 11:32 am

      спасибо. стараюсь делать их полезными :)

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

      хотя с другой стороны, судя по тому, что ты рассказал, сама система использует функции и методы именно 1-ой мутулз, что видимо и не позволяет просто обновить библиотеку. Может попробуй переделать немного верхнее меню, чтоб оно работало под последней версией мутулз? (если это, конечно, возможно – ведь я даже не знаю, о чем именно ты говоришь :) )

    • #3 by YuGenn on 29.08.2011 - 12:39 pm

      Код на черном фоне абсолютно нечитаем, не стал разбираться только из-за него . Сайт может быть и хороший, но из-за такого отношения к читателям я сюда больше ни ногой, пока не поменяете тему компонента вывода кода..

      • #4 by proglammer on 15.09.2011 - 6:26 pm

        не знаю, почему у вас такое впечатление сложилось. Мне на черном фоне очень даже нравится. Может пришлёте скрин того, как это отображается на вашем мониторе?

  2. #5 by Serge on 23.11.2010 - 10:19 pm

    Большое Вам спасибо. Трудно найти краткую инструкцию.

    • #6 by proglammer on 23.11.2010 - 11:13 pm

      если Вы искренне, то.. як там в вас кажуть: “да нэма за шо” “будьласка” (не уверен, насчет правописания)! и если искренне, то ты еще покомментируешь что-нибудь и получишь ссылку на свой интересный блог ;)

  3. #7 by Marina on 19.03.2012 - 2:33 pm

    В первом примере опечатка: надо tween_button вместо tweener:
    $(‘tween_button’).tween(‘width’, ’300px’);

    А вообще – огромное спасибо за инфу!
    Правда, примеры с сайта у меня не работают при нажатии на Ваши кнопки, но при создании своих документов – все отлично работает.
    Спасибо!

    • #8 by proglammer on 19.03.2012 - 7:02 pm

      Спасибо, что дали мне знать… Стыдно, мне. После последнего краха блога, забыл перебросить папку с мутулзом.. вот такой вот я прогламмер :) Сейчас, в общем, все работает.
      Что касается, ошибки, может я уже устал совсем, но я её там не вижу :(

      • #9 by Marina on 24.03.2012 - 11:08 am

        В конце в Вашем примере все работает отлично уже, спасибо :)

        Но в первом примере говорится, что при нажатии на кнопку ЕЁ ширина будет изменяться. Ее id=’tween_button’, поэтому я и уточнила выше.
        Но если все примеры сводить в один файл и подключать на div id=’tweener’, то тогда и изменяться будут свойства этого слоя, как в Вашем примере….

(никто не узнает)

Код на картинке: