首页 > 程序开发 > web前端 > JavaScript >

MooTools1.4源码分析- Fx.Morph

2011-09-28

Mootools1.4 - Fx.Morph类的源码分析,如果理解有误欢迎指正:/*---name: Fx.Morphdescription: Formerly Fx.Styles, effect to transition any number of CSS properties for an element usin...

Mootools1.4 - Fx.Morph类的源码分析,如果理解有误欢迎指正:

/*
---

name: Fx.Morph

description: Formerly Fx.Styles, effect to transition any number of CSS properties for an element using an object of rules, or CSS based selector rules.

license: MIT-style license.

requires: Fx.CSS

provides: Fx.Morph

源码分析: 苦苦的苦瓜(http://hmking.blog.51cto.com)

...
*/

// #region - Fx.Morph -

/**
* @Fx.Morph: 提供一次对多个CSS属性进行动画特效变换的功能,所以本类的属性为多值集合
**/
Fx.Morph = new Class({

// 继承自Fx.CSS
Extends: Fx.CSS,

/**
* @method: initialize
* @param element - (mixed) 元素的id或引用
* @param options - options - (object, 可选) Fx类中提供的可选项
* @description: 构造函数,提供将多个元素的CSS属性值从一个值向另一个值进行转化的功能
**/
initialize: function (element, options) {
// element属性存储特效所作用的元素对象
this.element = this.subject = document.id(element);
// 调用父类的同名方法
this.parent(options);
},

/**
* @method: set
* @param now - (mixed) 可以是包含CSS属性键值对的对象, 或是一个CSS选择器(必须在页面中已定义).如果对CSS属性只给出一个值,则变换的时候将把元素当前的属性值作为起始值.
* {
* 'height': 200,
* 'width': 200,
* 'background-color': '#f00',
* 'opacity': 0
* }
* @returns: (object) 主调Fx.Morph实例
* @description: 将元素的指定CSS属性值立即设为指定值
**/
set: function (now) {
// 如果参数是字符串类型,表示为CSS选择符,从当页页面的样式规则中查找指定的规则
if (typeof now == 'string') {
now = this.search(now);
}
// 分别设置每一项样式值
for (var p in now) {
this.render(this.element, p, now[p], this.options.unit);
}
return this;
},

/**
* @method: compute
* @param from - (object) 解释过的各项样式属性的起始值的对象
* @param to - (object) 解释过的各项样式属性的结束值的对象
* @param delta - (mixed) 特效变化所需要的比例因子
* @returns: (array) 包含计算过的各项样式属性当前值信息的一个数组
* @description: 根据各项样式属性初始值,结束值和特效比例因子计算各项样式属性的当前值
**/
compute: function (from, to, delta) {
var now = {};
for (var p in from) {
// 对每一项样式属性,调用Fx.CSS类的同名方法计算
now[p] = this.parent(from[p], to[p], delta);
}
return now;
},

/**
* @method: start
* @param roperties - (mixed) 可以是包含CSS属性键值对的对象, 或是一个CSS选择器(必须在页面中已定义).如果对CSS属性只给出一个值,则变换的时候将把元素当前的属性值作为起始值.
* {
* 'height': [10, 100],
* 'width': [900, 300],
* 'opacity': 0,
* 'background-color': '#00f'
* }
* @returns: (object) - 主调Fx.Morph实例
* @description: 串联执行多个CSS属性的变换(并触发'start'事件)
* @notes:
* 如果传入一个CSS选择器, 则该选择器必须在页面存在相应匹配的样式
* 不支持多选择器(逗号分隔的多个选择器)
* @import'ed CSS rules will not be available for Morph calls. All CSS selectors must be present in CSS directly loaded into the page.
**/
start: function (properties) {
// 检查当前特效运行状态,决定是否运行新特效
if (!this.check(properties)) { return this; }
// 如果提供properties参数类型为字符串,表明指定的是CSS选择符名,需要从当前页的样式规则中查找各项属性
if (typeof properties == 'string') {
properties = this.search(properties);
}
var from = {},
to = {};
// 对每项CSS属性值计算解释后的值,此时的from和to对象每个键值皆为一个数组
for (var p in properties) {
var parsed = this.prepare(this.element, p, properties[p]);
from[p] = parsed.from;
to[p] = parsed.to;
}
// 调用Fx类的构造函数
return this.parent(from, to);
}

});

// #endregion

// #region - Element.Properties.morph -

/**
* @element property: morph
* @description: 用于设置或获取元素上的Fx.Morph实例,实现单件模式
**/
Element.Properties.morph = {

// setter设置Fx.Morph对象参数
set: function (options) {
// 获取元素上的Fx.Morph实例后先执行cancel方法,取消特效的执行,然后再设置可选参数
this.get('morph').cancel().setOptions(options);
return this;
},

// getter获取Fx.Morph对象
get: function () {
// 先从临时对象读取,看有没缓存到Fx.Morph实例
var morph = this.retrieve('morph');
if (!morph) {
// 如果没有缓存,则保存一个新的Fx.Morph实例
morph = new Fx.Morph(this, { link: 'cancel' });
this.store('morph', morph);
}
return morph;
}

};

// #endregion

// #region - Element Method -

// 元素调用Fx.Morph的快捷方式
Element.implement({

/**
* @element method: morph
* @param properties - (mixed) 可以是包含CSS属性键值对的对象, 或是一个CSS选择器(必须在页面中已定义).如果对CSS属性只给出一个值,则变换的时候将把元素当前的属性值作为起始值.
* @returns: (element) 返回主调元素
* @description: 对元素执行指定属性值的动画特效变换
**/
morph: function (props) {
// 这是使用上面的getter取Fx.Morph实例,再start,props可以为多个样式属性数组或CSS选择符
this.get('morph').start(props);
return this;
}

});

// #endregion

作者“苦苦的苦瓜”

相关文章
最新文章
热点推荐