227 В бесконечных поисках на MooTools Forge мы нашли один небольшой аккуратный плагин Fx.Rotate, который позволяет крутить статический элемент. Fx.Rotate является расширением Fx класса MooTools и может крутить элемент через CSS, если это поддерживает браузер. Давайте посмотрим, как можно просто внедрить анимацию кручения на ваш сайт.
Посмотреть пример на davidwalsh.name
MooTools JavaScript
Сейчас рассмотрим, как инициировать и использовать плагин. Для этого введем новый класс элемента и просто его назначим через событие нажатия кнопки, которое запустит анимацию кручения элемента:
|
1 2 3 4 5 6 |
window.addEvent('domready',function() { var rotate = new Fx.Rotate('rotate-me',{duration:'long'}); document.id('do-rotate').addEvent('click',function() { rotate.start(0,45); //showtime! }); }); |
Когда DOM инициализирован, мы назначаем на событие click запуск анимации поворота с параметрами от 0 до 45 градусов. Этот класс супер маленький, так как является расширением Fx, в котором уже заложена логика анимации.
Класс MooTools
Мы не утверждаем, что такой код соответствует последним стандартам MooTools:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
(function (window,undef){ var deg2radians = Math.PI * 2 / 360 , prefix = ""; function getMatrix(deg){ rad = deg * deg2radians ; costheta = Math.cos(rad); sintheta = Math.sin(rad); a = parseFloat(costheta).toFixed(8); c = parseFloat(-sintheta).toFixed(8); b = parseFloat(sintheta).toFixed(8); d = parseFloat(costheta).toFixed(8); return [a,b,c,d]; } if (Browser.Engine.gecko) prefix = 'moz'; if (Browser.Engine.webkit) prefix = 'webkit'; if (Browser.Engine.presto) prefix = 'o'; Fx.Rotate = new Class({ Extends : Fx , element : null , initialize : function(el,options){ this.element = $(el); this.element.setStyle("-"+prefix+"-transform-origin","center center"); if (Browser.Engine.trident){ this.element.setStyle("filter", "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"); } this.parent(options); } , start : function(from,to){ this.parent(from,to); } , set : function (current){ if (Browser.Engine.trident) current *=-1; var matrix = getMatrix(current); if (Browser.Engine.trident){ this.element.filters.item(0).M11 = matrix[0]; this.element.filters.item(0).M12 = matrix[1]; this.element.filters.item(0).M21 = matrix[2]; this.element.filters.item(0).M22 = matrix[3]; }else{ this.element.setStyle("-"+prefix+"-transform", "matrix("+matrix[0]+","+matrix[1]+","+matrix[2]+", "+matrix[3]+", 0, 0)"); } } }); })(this); |
Пока этот код работает (что очень важно), мы предпочтем изменить класс следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
Fx.Rotate = new Class({ Extends: Fx, initialize: function(element,options) { this.element = document.id(element); this.prefix = (Browser.Engine.gecko ? 'moz' : (Browser.Engine.webkit ? 'webkit' : 'o')); this.radions = Math.PI * 2 / 360; if(Browser.Engine.trident) { // IE this.element.setStyle('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand")'); } else { this.element.setStyle('-' + this.prefix + '-transform-origin','center center'); } this.parent(options); }, start: function(from,to) { this.parent(from,to); }, set: function(current) { if (Browser.Engine.trident) current *=-1; var matrix = getMatrix(current); if (Browser.Engine.trident){ this.element.filters.item(0).M11 = matrix[0]; this.element.filters.item(0).M12 = matrix[1]; this.element.filters.item(0).M21 = matrix[2]; this.element.filters.item(0).M22 = matrix[3]; }else{ this.element.setStyle('-' + this.prefix + '-transform','matrix(' + matrix[0] + ',' + matrix[1] + ',' + matrix[2] + ', ' + matrix[3] + ', 0, 0)'); } }, getMatrix: function(deg) { var rad = deg * (this.radions), costheta = Math.cos(rad), sintheta = Math.sin(rad); var a = parseFloat(costheta).toFixed(8), c = parseFloat(-sintheta).toFixed(8), b = parseFloat(sintheta).toFixed(8), d = parseFloat(costheta).toFixed(8); return [a,b,c,d]; } }); |
Просто не много реорганизации и никакого изменения логики.
Посмотреть пример на davidwalsh.name
Перевод статьи с
PS. У каждого порядочного вебмастера должен быть свой любимый железный конь. Например, чаще всего любят японцев, а из европейцев хороши немцы, итальянцы и французы с их Пежо. Вобщем, дело вкуса.
