git.infodrom.org Git - infodrom/rico3/blob - examples/html/animate-rico.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   2 <html>
   3 <head>
   4
   5 <title>Rico 3.0 - Animation</title>
   6
   7 <script src="LoadRicoClient.js" type="text/javascript"></script>
   8 <link href="../demo.css" type="text/css" rel="stylesheet" />
   9
  10 <script type='text/javascript'>
  11 var container, step=0, phase=0, offsetX=-5, offsetY=-5, duration=750;
  12
  13 var animData = [
  14 // R
  15 [20,25,40,325,'#00F'],
  16 [40,305,140,325,'#00F'],
  17 [40,165,140,185,'#00F'],
  18 [140,185,160,305,'#00F'],
  19 [140,25,160,60,'#00F'],
  20 [120,60,140,95,'#00F'],
  21 [100,95,120,130,'#00F'],
  22 [80,130,100,165,'#00F'],
  23
  24 // I
  25 [200,25,220,325,'#F00'],
  26
  27 // C
  28 [260,45,280,305,'#0F0'],
  29 [280,305,380,325,'#0F0'],
  30 [280,25,380,45,'#0F0'],
  31
  32 // O
  33 [420,45,440,305,'#000'],
  34 [440,305,540,325,'#000'],
  35 [440,25,540,45,'#000'],
  36 [540,45,560,305,'#000']
  37 ];
  38
  39
  40 Rico.onLoad( function() {
  41   container=Rico.$('animContainer');
  42   RunAnim();
  43 });
  44
  45
  46 function RunAnim() {
  47   if (step >= animData.length) {
  48     switch (phase) {
  49       case 0:
  50         step=0;
  51         offsetX=0;
  52         offsetY=0;
  53         phase++;
  54         RunAnim();
  55         break;
  56       case 1:
  57         StartFadeOut();
  58         break;
  59     }
  60     return;
  61   }
  62   Rico.log('Running step '+step+' '+typeof(step));
  63   var pts=animData[step];
  64   Rico.log('  pts = '+animData.length);
  65   //Rico.log('  pts = '+pts.join(' '));
  66   var elem=container.appendChild(document.createElement("div"));
  67   var color=phase ? pts[4] : pts[4].replace(/0/g,'C');
  68   var elstyle={left:(pts[0]+offsetX)+'px', position:'absolute', width:'1px', height:'1px', backgroundColor:color}
  69   if (pts[3] > pts[1]) {
  70     elstyle['bottom']=(pts[1]+offsetY)+'px';
  71     endHt=pts[3] - pts[1];
  72   } else {
  73     elstyle['top']=(pts[1]+offsetY)+'px';
  74     endHt=pts[1] - pts[3];
  75   }
  76   Rico.setStyle(elem,elstyle);
  77   var opts={duration:duration,onEnd:RunAnim};
  78   var props={width:(pts[2]-pts[0]), height:endHt};
  79   Rico.animate(elem,opts,props);
  80   step++;
  81 }
  82
  83
  84 function StartFadeOut() {
  85   Rico.fadeOut(container,1000,StartFadeIn);
  86 }
  87
  88 function StartFadeIn() {
  89   Rico.fadeIn(container,1000);
  90 }
  91 </script>
  92
  93 <style type="text/css">
  94 #animContainer {
  95   position:relative;
  96   border:1px solid black;
  97   height:350px;
  98   width:600px;
  99 }
 100 </style>
 101
 102 </head>
 103
 104 <body>
 105
 106 <div id='explanation'>
 107 Base Library:
 108 <script type='text/javascript'>
 109 document.write(Rico.Lib+' '+Rico.LibVersion);
 110 </script>
 111 <hr><p>This example demonstrates Rico's
 112 ability to animate elements.
 113 </div>
 114
 115
 116 <div id='animContainer'>
 117
 118 </div>
 119
 120 </body>
 121 </html>