JS教程:制作颜色梯度和渐变效果(4)

【ColorTrans颜色渐变】

有了颜色梯度集合，只需要设个定时器把集合的值依次显示就是一个渐变效果了。
这个渐变有两种效果：颜色渐入（transIn）和颜色渐出（transOut）。
原理就是通过改变_index集合索引属性，渐入时逐渐变大，渐出时逐渐变小：

  transIn: function() {
    this.stop(); this._index++; this._set();
    if(this._index < this._colors.length - 1){
        this._timer = setTimeout($$F.bind( this.transIn, this ), this.speed);
    }
  },
  transOut: function() {
    this.stop(); this._index--; this._set();
    if(this._index > 0){
        this._timer = setTimeout($$F.bind( this.transOut, this ), this.speed);
    }
  },

在_set设置样式程序中修改样式：

var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)];
this._elem.style[this.style] = "rgb(" + color.join(",") + ")";

其中style属性是要修改的样式属性名，例如颜色是"color"，背景色是"backgroundColor"。

由于颜色集合是根据开始颜色、结束颜色和步数生成的，所以如果要修改这些属性必须重新生成过集合。

reset程序就是用来重新生成集合的，同时索引也会设回0：

this._options = options = $$.extend(this._options, options || {});
this._colors = ColorGrads( [options.from, options.to], options.step );
this._index = 0;

程序初始化的时候也会reset一次：

this.reset({
    from: this.options.from || $$D.getStyle(this._elem, this.style),
    to: this.options.to,
    step: Math.abs(this.options.step)
});

如果没有自定义from颜色的话会自动获取当前颜色。