MooTools源码分析

MooTools1.4源码分析- Fx.CSS

时间:2015-07-07 09:56来源:网络整理 作者:KKWL 点击:
MooTools1.4源码分析- Fx.CSS 本文参考了我佛山人的Mootools1.2的源码分析二十九 -- Fx.CSS /* --- name: Fx.CSS description: Contains the CSS animation logic. Used by Fx.Tween, Fx.Morph, Fx.Elements. license: MIT-style licen

MooTools1.4源码分析- Fx.CSS

 本文参考了我佛山人的Mootools1.2的源码分析二十九 -- Fx.CSS
 
/*
---
 
name: Fx.CSS
 
description: Contains the CSS animation logic. Used by Fx.Tween, Fx.Morph, Fx.Elements.
 
license: MIT-style license.
 
requires: [Fx, Element.Style]
 
provides: Fx.CSS
 
源码分析: 苦苦的苦瓜()
 
...
*/
 
/**
* @Fx.CSS: 跟CSS有关的动画的基类,这里的动画,主要是从一个开始值到结束值的变化效果
**/
Fx.CSS = new Class({
 
    // 继承自Fx
    Extends: Fx,
 
    // prepares the base from/to object
    /**
    * @method: prepare
    * @param element - (object) 特效作用的元素对象
    * @param property - (string) CSS属性
    * @param values - (mixed) 包含开始值和结束值的数组或一个单值(结束值)
    * @returns: (object) - 包含from和to两个键值的对象字面量
    * @description: 动画的开始和结束值的前期处理
    * @notes: 此时from和to两个键的值为数组类型
    **/
    prepare: function (element, property, values) {
        // 把变量values数组化,因为values可能传一个单值,也可能是一个数组
        values = Array.from(values);
        // 取特效的起始值和结束值,如果如果只传了一个值,则本值将作为结束值,CSS属性的当前值为特效起始值
        if (values[1] == null) {
            values[1] = values[0];
            values[0] = element.getStyle(property);
        }
        // 将数组中的项使用parse方法解释
        var parsed = values.map(this.parse);
        // 返回from和to两个键值的对象字面量
        return { from: parsed[0], to: parsed[1] };
    },
 
    //parses a value into an array
    /**
    * @method: parse
    * @param value - (mixed) CSS属性值
    * @returns: (array) - 数组项值为包含value和parser两个键值的对象字面量,存储解释过的CSS属性值和包含针对此属性值的解释器
    * @description: 解析一个CSS属性值为一个数组
    **/
    parse: function (value) {
        // 使用lambad表达式,将value函数化之后再执行,这样的好处是使传的值可以是function,也可以是固定值
        value = Function.from(value)();
        // 数组化,如果是字符串类型,使用空格分隔成数组
        value = (typeof value == 'string') ? value.split(' ') : Array.from(value);
        // 对数组逐项处理
        return value.map(function (val) {
            // 转为字符类型
            val = String(val);
            var found = false;
            Object.each(Fx.CSS.Parsers, function (parser, key) {
                // 第一项时这里为false继续执行下面,找到合适的解释器后found判断不再为false,避免重复解释
                if (found) { return; }
                // 尝试使用解释器解释值
                var parsed = parser.parse(val);
                // 如果解释成功,记录解释后的值和使用的解释器(因为还要使用解释器的compute和serve方法)
                if (parsed || parsed === 0) {
                    found = {
                        value: parsed,
                        parser: parser
                    };
                }
            });
            // 默认使用字符串值的解释器
            found = found || {
                value: val,
                parser: Fx.CSS.Parsers.String
            };
            return found;
        });
    },
 
    // computes by a from and to prepared objects, using their parsers.
    /**
    * @method: compute
    * @param from - (array) 解释过的CSS属性的起始值的数组
    * @param to - (array) 解释过的CSS属性的结束值的数组
    * @param delta - (mixed) 特效变化所需要的比例因子
    * @returns: (array) 包含计算过的特效当前CSS属性值信息的一个数组
    * @description: 根据初始值,结束值和比例因子求目标值
    **/
    compute: function (from, to, delta) {
        var computed = [];
        // 取数项小的遍历
        (Math.min(from.length, to.length)).times(function (i) {
            // 返回计算过的值和使用的解释器
            computed.push({
                value: from[i].parser.compute(from[i].value, to[i].value, delta),
                parser: from[i].parser
            });
        });
        // 为typeOf提供精准类型值
      &nbs补充:web前端 , JavaScript ,

------分隔线----------------------------