Mercurial > MadButterfly

changeset 1047:4072a302b207

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Fine tune the animation effect
author wycc
date Tue, 23 Nov 2010 23:54:38 +0800
parents 18329b6f77a4
children f26c4b621ec0
files nodejs/animate.js nodejs/examples/mce/main.svg nodejs/examples/mce/mainmenu.js
diffstat 3 files changed, 105 insertions(+), 102 deletions(-) [+]
line wrap: on
line diff
--- a/nodejs/animate.js	Tue Nov 23 08:04:09 2010 +0800
+++ b/nodejs/animate.js	Tue Nov 23 23:54:38 2010 +0800
@@ -84,11 +84,14 @@
 
 
 function scale_draw(percent) {
-    if (this.end==1) return;
+    if (this.end==1) {
+        percent = 1;
+    }
     var sx = 1 + (this.totalsx - 1) * percent;
     var sy = 1 + (this.totalsy - 1) * percent;
     var sh1 = [1, 0, -this.center_x, 0, 1, -this.center_y];
     var sh2 = [1, 0, this.center_x, 0, 1, this.center_y];
+    sys.puts("sc="+sx+" sy="+sy);
     var scale = [sx, 0, 0, 0, sy, 0];
     var obj = this.obj;
     var mtx;
--- a/nodejs/examples/mce/main.svg	Tue Nov 23 08:04:09 2010 +0800
+++ b/nodejs/examples/mce/main.svg	Tue Nov 23 23:54:38 2010 +0800
@@ -2,6 +2,7 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
+   xmlns:ns0="http://madbutterfly.sourceforge.net/DTD/madbutterfly.dtd"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
@@ -15,8 +16,7 @@
    id="svg2"
    version="1.1"
    inkscape:version="0.48+devel r9764 custom"
-   sodipodi:docname="main.svg"
-   xmlns:ns0="http://madbutterfly.sourceforge.net/DTD/madbutterfly.dtd">
+   sodipodi:docname="main.svg">
   <defs
      id="defs4">
     <inkscape:perspective
@@ -59,7 +59,7 @@
      inkscape:cx="574.12471"
      inkscape:cy="483.73232"
      inkscape:document-units="px"
-     inkscape:current-layer="Layer 1s235"
+     inkscape:current-layer="Layer 1s1841"
      showgrid="false"
      inkscape:window-width="1680"
      inkscape:window-height="976"
@@ -109,7 +109,7 @@
     <g
        id="Layer 1s1841"
        inkscape:groupmode="layer"
-       style="display:none">
+       style="display:inline">
       <g
          transform="translate(7.14163,8.5714057)"
          id="g2999"
@@ -139,18 +139,18 @@
          inkscape:bbox-width="200"
          inkscape:bbox-height="286.7168">
         <image
-           inkscape:bbox-height="286.7168"
-           inkscape:bbox-width="200"
-           inkscape:bbox-y="462.7648"
-           inkscape:bbox-x="117.64285"
-           inkscape:label=""
+           sodipodi:absref="/home/wycc/devel/md7/MadButterfly/nodejs/examples/mce/./cat0.png"
+           xlink:href="./cat0.png"
+           y="302.88058"
+           x="117.64285"
+           id="image3058"
+           height="286.7168"
            width="200"
-           height="286.7168"
-           id="image3058"
-           x="117.64285"
-           y="302.88058"
-           xlink:href="./cat0.png"
-           sodipodi:absref="./cat0.png" />
+           inkscape:label=""
+           inkscape:bbox-x="117.64285"
+           inkscape:bbox-y="462.7648"
+           inkscape:bbox-width="200"
+           inkscape:bbox-height="286.7168" />
       </g>
       <g
          transform="translate(7.14163,8.5714057)"
@@ -161,18 +161,18 @@
          inkscape:bbox-width="200"
          inkscape:bbox-height="291.09415">
         <image
-           inkscape:bbox-height="291.09415"
-           inkscape:bbox-width="200"
-           inkscape:bbox-y="455.42856"
-           inkscape:bbox-x="359.21432"
-           inkscape:label=""
+           sodipodi:absref="/home/wycc/devel/md7/MadButterfly/nodejs/examples/mce/./cat1.png"
+           xlink:href="./cat1.png"
+           y="305.83948"
+           x="359.21432"
+           id="image3116"
+           height="291.09415"
            width="200"
-           height="291.09415"
-           id="image3116"
-           x="359.21432"
-           y="305.83948"
-           xlink:href="./cat1.png"
-           sodipodi:absref="./cat1.png" />
+           inkscape:label=""
+           inkscape:bbox-x="359.21432"
+           inkscape:bbox-y="455.42856"
+           inkscape:bbox-width="200"
+           inkscape:bbox-height="291.09415" />
       </g>
       <g
          transform="translate(7.14163,8.5714057)"
@@ -183,18 +183,18 @@
          inkscape:bbox-width="200"
          inkscape:bbox-height="286.7168">
         <image
-           inkscape:bbox-height="286.7168"
-           inkscape:bbox-width="200"
-           inkscape:bbox-y="458.28571"
-           inkscape:bbox-x="599.07141"
-           inkscape:label=""
+           sodipodi:absref="/home/wycc/devel/md7/MadButterfly/nodejs/examples/mce/./cat2.png"
+           xlink:href="./cat2.png"
+           y="307.35968"
+           x="599.07141"
+           id="image3174"
+           height="286.7168"
            width="200"
-           height="286.7168"
-           id="image3174"
-           x="599.07141"
-           y="307.35968"
-           xlink:href="./cat2.png"
-           sodipodi:absref="./cat2.png" />
+           inkscape:label=""
+           inkscape:bbox-x="599.07141"
+           inkscape:bbox-y="458.28571"
+           inkscape:bbox-width="200"
+           inkscape:bbox-height="286.7168" />
       </g>
       <g
          transform="translate(7.14163,8.5714057)"
@@ -205,18 +205,18 @@
          inkscape:bbox-width="200"
          inkscape:bbox-height="289.10892">
         <image
-           inkscape:bbox-height="289.10892"
-           inkscape:bbox-width="200"
-           inkscape:bbox-y="456.71426"
-           inkscape:bbox-x="821.35712"
-           inkscape:label=""
+           sodipodi:absref="/home/wycc/devel/md7/MadButterfly/nodejs/examples/mce/./cat3.png"
+           xlink:href="./cat3.png"
+           y="306.539"
+           x="821.35712"
+           id="image3232"
+           height="289.10892"
            width="200"
-           height="289.10892"
-           id="image3232"
-           x="821.35712"
-           y="306.539"
-           xlink:href="./cat3.png"
-           sodipodi:absref="./cat3.png" />
+           inkscape:label=""
+           inkscape:bbox-x="821.35712"
+           inkscape:bbox-y="456.71426"
+           inkscape:bbox-width="200"
+           inkscape:bbox-height="289.10892" />
       </g>
       <path
          sodipodi:type="star"
@@ -273,18 +273,18 @@
          id="g2931"
          transform="translate(221.14163,8.5714057)">
         <image
-           y="306.539"
-           x="821.35712"
-           id="image2933"
-           height="289.10892"
-           width="200"
+           sodipodi:absref="/home/wycc/devel/md7/MadButterfly/nodejs/examples/mce/./cat4.png"
+           xlink:href="./cat4.png"
+           inkscape:bbox-height="289.10892"
+           inkscape:bbox-width="200"
+           inkscape:bbox-y="456.71426"
+           inkscape:bbox-x="1035.3571"
            inkscape:label=""
-           inkscape:bbox-x="1035.3571"
-           inkscape:bbox-y="456.71426"
-           inkscape:bbox-width="200"
-           inkscape:bbox-height="289.10892"
-           xlink:href="./cat4.png"
-           sodipodi:absref="./cat4.png" />
+           width="200"
+           height="289.10892"
+           id="image2933"
+           x="821.35712"
+           y="306.539" />
       </g>
       <g
          transform="translate(445.14163,8.5714057)"
@@ -295,18 +295,18 @@
          inkscape:bbox-width="200"
          inkscape:bbox-height="289.10892">
         <image
-           inkscape:bbox-height="289.10892"
-           inkscape:bbox-width="200"
-           inkscape:bbox-y="456.71426"
-           inkscape:bbox-x="1259.3571"
-           inkscape:label=""
+           sodipodi:absref="/home/wycc/devel/md7/MadButterfly/nodejs/examples/mce/./cat5.png"
+           xlink:href="./cat5.png"
+           y="306.539"
+           x="821.35712"
+           id="image2937"
+           height="289.10892"
            width="200"
-           height="289.10892"
-           id="image2937"
-           x="821.35712"
-           y="306.539"
-           xlink:href="./cat5.png"
-           sodipodi:absref="./cat5.png" />
+           inkscape:label=""
+           inkscape:bbox-x="1259.3571"
+           inkscape:bbox-y="456.71426"
+           inkscape:bbox-width="200"
+           inkscape:bbox-height="289.10892" />
       </g>
       <g
          inkscape:bbox-height="289.10892"
@@ -317,24 +317,24 @@
          id="g2939"
          transform="translate(661.14163,8.5714057)">
         <image
-           y="306.539"
-           x="821.35712"
-           id="image2941"
-           height="289.10892"
-           width="200"
+           sodipodi:absref="/home/wycc/devel/md7/MadButterfly/nodejs/examples/mce/./cat6.png"
+           xlink:href="./cat6.png"
+           inkscape:bbox-height="289.10892"
+           inkscape:bbox-width="200"
+           inkscape:bbox-y="456.71426"
+           inkscape:bbox-x="1475.3571"
            inkscape:label=""
-           inkscape:bbox-x="1475.3571"
-           inkscape:bbox-y="456.71426"
-           inkscape:bbox-width="200"
-           inkscape:bbox-height="289.10892"
-           xlink:href="./cat6.png"
-           sodipodi:absref="./cat6.png" />
+           width="200"
+           height="289.10892"
+           id="image2941"
+           x="821.35712"
+           y="306.539" />
       </g>
     </g>
     <g
        id="Layer 1s235"
        inkscape:groupmode="layer"
-       style="display:inline">
+       style="display:none">
       <rect
          x="0"
          y="0"
@@ -342,12 +342,13 @@
          height="100"
          id="rect3181" />
       <image
-         y="-27.637817"
-         x="0"
+         sodipodi:absref="/home/wycc/devel/md7/MadButterfly/nodejs/examples/mce/./background2.png"
+         xlink:href="./background2.png"
+         width="1920"
+         height="1080"
          id="image3245"
-         xlink:href="./background2.png"
-         height="1080"
-         width="1920" />
+         x="0"
+         y="-27.637817" />
     </g>
   </g>
 </svg>
--- a/nodejs/examples/mce/mainmenu.js	Tue Nov 23 08:04:09 2010 +0800
+++ b/nodejs/examples/mce/mainmenu.js	Tue Nov 23 23:54:38 2010 +0800
@@ -64,9 +64,9 @@
     old.bbox.update();
     target.bbox.update();
     
-    var an = new animate.scale(this.app, old, 1, 1);
+    var an = new animate.scale(this.app, old, 1/1.1, 1/1.5);
     animate.run([an], 0, 0.1);
-    an = new animate.scale(this.app, target, 1, 1.5);
+    an = new animate.scale(this.app, target, 1.1, 1.5);
     animate.run([an], 0, 0.3);
     var sx = target.center.x - this.lightbar.center.x;
     var an = new animate.shift(this.app, this.lightbar, sx, 0);
@@ -87,9 +87,9 @@
     old.bbox.update();
     target.bbox.update();
     
-    var an = new animate.scale(this.app, old, 1, 1);
+    var an = new animate.scale(this.app, old, 1/1.1, 1/1.5);
     animate.run([an], 0, 0.1);
-    an = new animate.scale(this.app, target, 1, 1.5);
+    an = new animate.scale(this.app, target, 1.1, 1.5);
     animate.run([an], 0, 0.3);
     var sx = target.center.x - this.lightbar.center.x;
     var an = new animate.shift(this.app, this.lightbar, sx, 0);
@@ -132,21 +132,20 @@
     var sy = 220 - target.center.y;
     var an = new animate.shift(this.app,target,sx,sy);
     var self = this;
-    animate.run([an],0,1,function() {self.changePage();});
+    animate.run([an],0,2.5,function() {self.changePage();});
     for(i=0;i<this.items.length;i++) {
 	if (i == this.item) continue;
-	var x = Math.random();
-	var y = Math.random();
-	if (x > 0.5) x = 900;
-	else x = -500;
-	if (y > 0.5) y = 900;
-	else y = -500;
-	sx = x - this.items[i].center.x;
-	sy = y - this.items[i].center.y;
+	if (i > this.item) {
+	    sx = 1920*2 - this.items[i].center.x;
+	    sy = 0;
+	} else {
+	    sx =  -this.items[i].center.x*2;
+	    sy = 0;
+	}
 	an = new animate.shift(this.app,this.items[i], sx, sy);
 	animate.run([an], 0, 2);
 	alpha = new animate.alpha(this.app,this.items[i], 0);
-	animate.run([an], 0, 1);
+	animate.run([an], 0, 2);
     }
 }