i've got animated circle looks this: 
the blue part counts down, example full nothing in 10 seconds. orange circle circle. want circle smaller when click on it. made onclick event circle.
circledraw.node.onclick = function () { circledraw.animate({ stroke: "#e0b6b2", arc: [100, 100, 100, 100, 100] }, 500); circledraw.tofront(); };
that works, i've made both of circles, both become smaller but, after 500 mili seconds blue circle becomes big again because timer blue circle got parameters should bigger.
circledraw.animate({ arc: [100, 100, 0, 100, 500] }, 10000); because blue circle counts 10 seconds becomes automatically bigger again. how make both circles smaller keep timer counting down?
i thinking of stopping animation blue circle , save remaining mili seconds of animation draw again smaller , start animation again remaining seconds, don't know how this. maybe i'm looking in wrong direction , have make different.
thanks.
all code:
/************************************************************************/ /* raphael js magic *************************************************************************/ var drawthecirclevector = function(xloc, yloc, value, total, r) { var alpha = 360 / total * value, = (90 - alpha) * math.pi / 180, x = xloc + r * math.cos(a), y = yloc - r * math.sin(a), path; if (total == value) { path = [ ["m", xloc, yloc - r], ["a", r, r, 0, 1, 1, xloc - 0.01, yloc - r] ]; } else { path = [ ["m", xloc, yloc - r], ["a", r, r, 0, +(alpha > 180), 1, x, y] ]; } return { path: path }; }; /************************************************************************/ /* make circles *************************************************************************/ var timercircle = raphael("timer", 320, 320); var circlebg = raphael("backgroundcircle", 320, 320); timercircle.customattributes.arc = drawthecirclevector circlebg.customattributes.arc = drawthecirclevector /************************************************************************/ /* draw circles *************************************************************************/ var drawme = circlebg.path().attr({ "fill": "#ff7f66", "stroke": 0, arc: [160, 160, 100, 100, 140] }); var clickones = true; drawme.node.onclick = function() { if (clickones == true) { circledraw.animate({ arc: [100, 100, 0, 100, 100] }, 500); circledraw.tofront(); drawme.animate({ arc: [100, 100, 100, 100, 100] }, 500); circledraw.tofront(); clickones = false; } else { circledraw.animate({ arc: [160, 160, 0, 100, 150] }, 500); circledraw.tofront(); drawme.animate({ arc: [160, 160, 100, 100, 140] }, 500); circledraw.tofront(); clickones = true; } }; // arc: [xposition, yposition, how 1 = begin 100 = end, ? = 100, 150]; /************************************************************************/ /* draw circle *************************************************************************/ var circledraw = timercircle.path().attr({ "stroke": "#2185c5", "stroke-width": 10, arc: [160, 160, 100, 100, 150] }); circledraw.animate({ arc: [160, 160, 0, 100, 150] }, 9000); window.setinterval(function() { gotonextstopgardenspointbus210() }, 9000); here code timer works , if click on circle become smaller if click on before bue cirlce done become big again.
update working version of got on jsfiddle, http://jsfiddle.net/hgwd92/2s4dm/
here's fiddle you..
the issue redrawing items, new animation speeds , such. using transform function, can add scaling transform acts independent of draws.
circledraw.animate({transform: 's0.5,0.5,160,160', 'stroke-width': 5}, 500); and set back...
circledraw.animate({transform: 's1,1,160,160', 'stroke-width': 10}, 500); note need set center blue arc (the 160, 160), or once gets past half way center of arc move , scale different position.
edit: updated fiddle , code scale blue line looks better.
Comments
Post a Comment