gistfile1.txt

	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox = "0 0 2000 2000" width="1000" height="400">
	  <defs>
		<clipPath id="myClip">
	  	  <rect id="myClipRect" x="0" y="0" width="2000" height="2000"/>
	  	</clipPath>
	  </defs>
	  <rect x="0" y="0" width="2000" height="2000" fill="#bbb"/>

	  <rect id="rect" x="0" y="500" width="0" height="50" fill="red"/>
	  <rect id="rect2" x="0" y="600" width="0" height="50" fill="blue"/>
	  <rect id="rect3" x="0" y="700" width="0" height="50" fill="green"/>

	  <path d="M 10 100L20 130L30 150L300 200L400 100L700 120L800 80L1000 40L1300 150" fill="none" stroke-width="10" stroke="#333" clip-path="url(#myClip)"/>
	</svg>
	<script charset="utf-8" src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script>
<script type="text/javascript">
KISSY.use('anim/easing',function(S,Easing){
  function Ft(cfg){
    cfg || (cfg = {});
    this.cfg = S.merge({duration:1000,easing:'easeNone',onstep:S.noop,onend:S.noop},cfg);
  }
  S.augment(Ft,{
    compute:function(){
      var me = arguments.callee
        ,that = me.that || (me.that = this)
        ,INTERVAL = 25
        ,cfg = that.cfg
        ,fx = Easing[cfg.easing]
        ,now = +new Date
        ,relative2one //转为[0,1]的一个数字
        ,s
      that.begin || (that.begin = now);
      relative2one = ((now - that.begin)/cfg.duration);
      if(now - that.begin>cfg.duration){
		cfg.onstep(1,1);
        clearInterval(that.timer);
        cfg.onend();
      }else{
        s = fx(relative2one);
        cfg.onstep(relative2one,s);
      }
      that.timer || (that.timer = setInterval(me,INTERVAL));
    },
    stop:function(){
      this.timer && clearInterval(this.timer);
      delete this.timer;
      delete this.begin;
    }
  });

  var D = S.DOM
  var rect = D.get('#rect')
    ,blue_rect = D.get('#rect2')
    ,green_rect = D.get('#rect3')
    ,line = D.get('#myClipRect')
    ,fx
    ,orig_width = 10

    ,rect_orgin_width = 0
    ,diff_width = 2000
    ,diff_rect_width = 1000

    ,diff_blue_rect_width = 800
    ,diff_green_rect_width = 1200

  fx = new Ft({
    duration:1000,
    easing:'bounceOut',
    onstep:function(t,f){
      var to = f*diff_width+orig_width
        ,rect_to = f*diff_rect_width+rect_orgin_width
        ,blue_rect_to = f*diff_blue_rect_width+rect_orgin_width
        ,green_rect_to = f*diff_green_rect_width+rect_orgin_width

      line.setAttribute('width',to>0?to:0);
      rect.setAttribute('width',rect_to>0?rect_to:0);
      blue_rect.setAttribute('width',blue_rect_to>0?blue_rect_to:0);
      green_rect.setAttribute('width',green_rect_to>0?green_rect_to:0);
    }
  });
  fx.compute();

});
</script>