добавил анимацию

lib/poly/chi_balance.dart

@@ -59,7 +59,7 @@ class ChiBalance extends PolymerElement implements ChiEventListener {
     int count = -1 + ((width - 8) ~/ (BAR_WIDTH + 1));
     if (count.isEven) count--;
     final int _width = count * (BAR_WIDTH + 1) + 3;
-    int val = (count * (0.495 + value)).floor();
+    int val = max(0, (count * (0.495 + value)).floor());
 
     ctx.clearRect(0, 0, width, height);
     var color = BG_COLOR.toRgbColor();

lib/poly/chi_canvas.dart

@@ -91,13 +91,23 @@ class Image {
   }
 }
 
+class Frame {
+  int order;
+  Image img;
+
+  Frame.elem(ChiFrame f){
+    this.img = f.img;
+    this.order = f.order;
+  }
+}
+
 @CustomTag("chi-canvas")
 class ChiCanvas extends PolymerElement implements ChiEventListener {
   @published int base = DEFAULT_INNER_SIDE;
   @published bool transparent = true;
-  @published String href = "";
   @published int top = 0;
   @published int left = 0;
+  @published int duration = Duration.MILLISECONDS_PER_SECOND;
 
   int get INNER_SIDE => base;
   int get OUTER_SIDE => INNER_SIDE + 2 * INNER_MARGIN + 2 * OUTER_STROKE;
@@ -109,13 +119,17 @@ class ChiCanvas extends PolymerElement implements ChiEventListener {
   CanvasElement _root;
   CanvasRenderingContext2D _ctx;
 
-  Image img;
+  Map<int, Frame> frames = new Map();
 
   int width = 0;
   int height = 0;
   int get nx => width ~/ DOT;
   int get ny => height ~/ DOT;
 
+  void clear(){
+    _ctx.clearRect(0, 0, width, height);
+  }
+
   void back() {
     RgbColor color;
 
@@ -146,13 +160,13 @@ class ChiCanvas extends PolymerElement implements ChiEventListener {
     }
   }
 
-  void front() {
+  void front(Image img) {
     int w = 0;
     int h = 0;
-/*
+
     _ctx.setStrokeColorRgb(0xFF, 0, 0);
     _ctx.strokeRect(2 * OUTER_MARGIN + LEFT * DOT, 2 * OUTER_MARGIN + TOP * DOT, img.width * DOT - 2, img.height * DOT - 2);
-*/
+
     int y = 2 * OUTER_MARGIN + TOP * DOT;
     while (y < height && h < img.height) {
       int x = 2 * OUTER_MARGIN + LEFT * DOT;
@@ -176,6 +190,11 @@ class ChiCanvas extends PolymerElement implements ChiEventListener {
     }
   }
 
+  void registerFrame(ChiFrame f){
+    assert(f.img!=null);
+    frames[f.order]= new Frame.elem(f);
+  }
+
   void prepare(int w, int h) {
     _root.width = 1 + (w ~/ DOT) * DOT;
     _root.height = 1 + (h ~/ DOT) * DOT;
@@ -185,31 +204,36 @@ class ChiCanvas extends PolymerElement implements ChiEventListener {
 
     width = w;
     height = h;
+  }
 
-    if (href != "") {
-      Future load = HttpRequest.request(href, mimeType: 'application/octet-stream', responseType: 'arraybuffer');
-      load.then((req) {
-        Uint8List ul = (req.response as ByteBuffer).asUint8List();
-        String js = UTF8.decode(ul);
-        img = new Image.import(js);
-        front();
-      }, onError: (e) {
-        window.alert("$href not found $e");
+  void redrawLater(int frameIdx){
+    window.animationFrame.then((num n){
+      int laterIdx = 0;
+      if (!transparent) back(); else clear();
+      if(frames.containsKey(frameIdx)){
+        Frame f = frames[frameIdx];
+        front(f.img);
+        Frame next = frames[f.order+1];
+        if(next != null)
+          laterIdx = next.order;
+      }
+      var delay = new Duration(seconds: 1);
+      if(frames.length>0)
+        delay = new Duration(milliseconds: duration ~/ frames.length);
+      new Future.delayed(delay, (){
+        redrawLater(laterIdx);
       });
-    }
-    //print("$href ~ $nx:$ny::$base");
+    });
   }
 
   @override
   void attached() {
     prepare(_div.clientWidth, _div.clientHeight);
-    if (!transparent) back();
-    if (img != null) front();
+    redrawLater(0);
   }
 
   @override
   void listen(event) {
-
   }
 
   ChiCanvas.created() : super.created() {
@@ -219,3 +243,28 @@ class ChiCanvas extends PolymerElement implements ChiEventListener {
     listenTo(this);
   }
 }
+
+@CustomTag("chi-frame")
+class ChiFrame extends PolymerElement{
+  @published String href = "";
+  @published int order = 0;
+  Image img;
+
+  void attached() {
+    if (href != "") {
+          Future load = HttpRequest.request(href, mimeType: 'application/octet-stream', responseType: 'arraybuffer');
+          load.then((req) {
+            Uint8List ul = (req.response as ByteBuffer).asUint8List();
+            String js = UTF8.decode(ul);
+            img = new Image.import(js);
+            var canvas = (this.parent.shadowRoot.host as ChiCanvas);
+            canvas.registerFrame(this);
+          }, onError: (e) {
+            window.alert("$href not found $e");
+            throw new Exception("image $href not found");
+          });
+        }
+  }
+
+  ChiFrame.created() : super.created();
+}

lib/poly/chi_canvas.html

@@ -1,6 +1,7 @@
 <link rel="import" href="../../../packages/polymer/polymer.html">
+<link rel="import" href="chi_canvas_common.html"/>
 <polymer-element name="chi-canvas"
-  attributes="base transparent href top left"> <template>
+  attributes="base transparent top left duration"> <template>
 <style>
 :host {
   width: 100%;
@@ -13,8 +14,8 @@
 }
 
 #root_canvas_container {
-  width: calc(100% -                       30px);
-  height: calc(100% -                       6px);
+  width: calc(100% - 30px);
+  height: calc(100% - 6px);
   margin-left: 15px;
   margin-right: 15px;
   margin-top: 3px;
@@ -25,4 +26,4 @@
     <canvas id="root_canvas"></canvas>
   </div>
 </div>
-</template> <script type="application/dart" src="chi_canvas.dart"></script> </polymer-element>
+</template></polymer-element>

lib/poly/chi_canvas_common.html

@@ -0,0 +1 @@
+<script type="application/dart" src="chi_canvas.dart"></script>

lib/poly/chi_frame.html

@@ -0,0 +1,8 @@
+<link rel="import" href="../../../packages/polymer/polymer.html">
+<link rel="import" href="chi_canvas_common.html"/>
+<polymer-element name="chi-frame" attributes="href order">
+  <template>
+    <div></div>
+  </template>
+  </polymer-element>
+

web/app/index.html

@@ -7,6 +7,7 @@
 <title>chi :: pet</title>
 <link rel="stylesheet" href="styles/index.css">
 <link rel="import" href="packages/chi/poly/chi_canvas.html">
+<link rel="import" href="packages/chi/poly/chi_frame.html">
 <link rel="import" href="packages/chi/poly/chi_controls.html">
 <link rel="import" href="packages/chi/poly/chi_meter.html">
 <link rel="import" href="packages/chi/poly/chi_balance.html">
@@ -38,7 +39,10 @@
       <chi-canvas base="6" transparent="false"></chi-canvas>
     </div>
     <div class="layer">
-      <chi-canvas base="6" href="../img/eye0.json" top="20" left="30"></chi-canvas>
+      <chi-canvas base="6" top="20" left="20" duration="2000">
+        <chi-frame href="../img/eye0-0.json" order="0"></chi-frame>
+        <chi-frame href="../img/eye0-1.json" order="1"></chi-frame>
+      </chi-canvas>
     </div>
   </div>
   <div id="controls">

web/img/eye0-0.json

@@ -0,0 +1 @@
+{"name":"eye0","data":[{"x":3,"y":2,"col":"000000"},{"x":4,"y":2,"col":"000000"},{"x":5,"y":2,"col":"000000"},{"x":2,"y":3,"col":"000000"},{"x":2,"y":4,"col":"000000"},{"x":2,"y":5,"col":"000000"},{"x":2,"y":6,"col":"000000"},{"x":2,"y":7,"col":"000000"},{"x":3,"y":8,"col":"000000"},{"x":4,"y":8,"col":"000000"},{"x":5,"y":8,"col":"000000"},{"x":6,"y":2,"col":"000000"},{"x":7,"y":3,"col":"000000"},{"x":7,"y":4,"col":"000000"},{"x":7,"y":5,"col":"000000"},{"x":7,"y":6,"col":"000000"},{"x":7,"y":7,"col":"000000"},{"x":6,"y":8,"col":"000000"},{"x":5,"y":6,"col":"000000"},{"x":6,"y":6,"col":"7c806d"},{"x":5,"y":7,"col":"7c806d"},{"x":4,"y":6,"col":"7c806d"},{"x":5,"y":5,"col":"7c806d"},{"x":6,"y":5,"col":"a5ab91"},{"x":4,"y":5,"col":"a5ab91"},{"x":4,"y":7,"col":"a5ab91"},{"x":6,"y":7,"col":"a5ab91"},{"x":10,"y":3,"col":"000000"},{"x":10,"y":4,"col":"000000"},{"x":10,"y":5,"col":"000000"},{"x":10,"y":6,"col":"000000"},{"x":10,"y":7,"col":"000000"},{"x":11,"y":8,"col":"000000"},{"x":12,"y":8,"col":"000000"},{"x":13,"y":8,"col":"000000"},{"x":14,"y":8,"col":"000000"},{"x":11,"y":2,"col":"000000"},{"x":12,"y":2,"col":"000000"},{"x":13,"y":2,"col":"000000"},{"x":14,"y":2,"col":"000000"},{"x":15,"y":3,"col":"000000"},{"x":15,"y":4,"col":"000000"},{"x":15,"y":5,"col":"000000"},{"x":15,"y":6,"col":"000000"},{"x":15,"y":7,"col":"000000"},{"x":13,"y":6,"col":"000000"},{"x":13,"y":5,"col":"7c806d"},{"x":14,"y":6,"col":"7c806d"},{"x":12,"y":6,"col":"7c806d"},{"x":12,"y":5,"col":"a5ab91"},{"x":14,"y":5,"col":"a5ab91"},{"x":13,"y":7,"col":"7c806d"},{"x":14,"y":7,"col":"a5ab91"},{"x":12,"y":7,"col":"a5ab91"}]}

web/img/eye0-1.json

@@ -0,0 +1 @@
+{"name":"eye0","data":[{"x":3,"y":2,"col":"000000"},{"x":4,"y":2,"col":"000000"},{"x":5,"y":2,"col":"000000"},{"x":2,"y":3,"col":"000000"},{"x":2,"y":4,"col":"000000"},{"x":2,"y":5,"col":"000000"},{"x":2,"y":6,"col":"000000"},{"x":2,"y":7,"col":"000000"},{"x":3,"y":8,"col":"000000"},{"x":4,"y":8,"col":"000000"},{"x":5,"y":8,"col":"000000"},{"x":6,"y":2,"col":"000000"},{"x":7,"y":3,"col":"000000"},{"x":7,"y":4,"col":"000000"},{"x":7,"y":5,"col":"000000"},{"x":7,"y":6,"col":"000000"},{"x":7,"y":7,"col":"000000"},{"x":6,"y":8,"col":"000000"},{"x":10,"y":3,"col":"000000"},{"x":10,"y":4,"col":"000000"},{"x":10,"y":5,"col":"000000"},{"x":10,"y":6,"col":"000000"},{"x":10,"y":7,"col":"000000"},{"x":11,"y":8,"col":"000000"},{"x":12,"y":8,"col":"000000"},{"x":13,"y":8,"col":"000000"},{"x":14,"y":8,"col":"000000"},{"x":11,"y":2,"col":"000000"},{"x":12,"y":2,"col":"000000"},{"x":13,"y":2,"col":"000000"},{"x":14,"y":2,"col":"000000"},{"x":15,"y":3,"col":"000000"},{"x":15,"y":4,"col":"000000"},{"x":15,"y":5,"col":"000000"},{"x":15,"y":6,"col":"000000"},{"x":15,"y":7,"col":"000000"},{"x":4,"y":6,"col":"000000"},{"x":4,"y":5,"col":"7c806d"},{"x":5,"y":6,"col":"7c806d"},{"x":4,"y":7,"col":"7c806d"},{"x":3,"y":6,"col":"7c806d"},{"x":3,"y":5,"col":"a5ab91"},{"x":5,"y":5,"col":"a5ab91"},{"x":5,"y":7,"col":"a5ab91"},{"x":3,"y":7,"col":"a5ab91"},{"x":12,"y":6,"col":"000000"},{"x":12,"y":5,"col":"7c806d"},{"x":13,"y":6,"col":"7c806d"},{"x":12,"y":7,"col":"7c806d"},{"x":11,"y":6,"col":"7c806d"},{"x":11,"y":5,"col":"a5ab91"},{"x":13,"y":5,"col":"a5ab91"},{"x":13,"y":7,"col":"a5ab91"},{"x":11,"y":7,"col":"a5ab91"}]}