javascript - snap.svg making a perfect "circle pointer" -
first off, sorry topic name. can't explain want make precisely in 1 sentence.
then! want make circle square on stroke, within there 6 "hoverable" squares.
here test i've made :
var s = snap(500, 500); var thecircle = s.circle(250,250,100).attr({fill:'none',stroke:'red','stroke-width':'2'}); var pointer = s.rect(240,340,20,20); var william = s.g(thecircle, pointer); var hover1 = s.rect(240,290,20,20).attr({'value':'0'}).addclass('hovering'); var hover2 = hover1.clone().transform('r60,250,250').attr({'value':'60'}).addclass('hovering'); var hover3 = hover1.clone().transform('r120,250,250').attr({'value':'120'}).addclass('hovering'); var hover4 = hover1.clone().transform('r180,250,250').attr({'value':'180'}).addclass('hovering'); var hover5 = hover1.clone().transform('r240,250,250').attr({'value':'240'}).addclass('hovering'); var hover6 = hover1.clone().transform('r300,250,250').attr({'value':'300'}).addclass('hovering'); var $ = jquery; $('.hovering').mouseenter(function(){ var rotate = $(this).attr('value'); william.animate({transform:'r'+rotate+',250,250'},300,mina.ease); }); and here fiddle can check how animation looks : jsfiddle
so now, see happens when hover 6th square (300 degrees) , hover 2nd 1 (60 degrees). pointer travel way in front of 5th, 4th , 3rd before reaching 2nd (a travel of 240 degrees).
i pointer go fastest route destination, in example, 420 degrees. have no idea on how make behave way i'm not @ maths...
you need work out of 2 possible directions has shortest distance. add diff that's smallest accumulated rotation value.
demo
var s = snap(500, 500); var thecircle = s.circle(250,250,100).attr({fill:'none',stroke:'red','stroke-width':'2'}); var pointer = s.rect(240,340,20,20); var william = s.g(thecircle, pointer); var hover1 = s.rect(240,290,20,20).attr({'value':'0'}).addclass('hovering'); var hover2 = hover1.clone().transform('r60,250,250').attr({'value':'60'}).addclass('hovering'); var hover3 = hover1.clone().transform('r120,250,250').attr({'value':'120'}).addclass('hovering'); var hover4 = hover1.clone().transform('r180,250,250').attr({'value':'180'}).addclass('hovering'); var hover5 = hover1.clone().transform('r240,250,250').attr({'value':'240'}).addclass('hovering'); var hover6 = hover1.clone().transform('r300,250,250').attr({'value':'300'}).addclass('hovering'); var $ = jquery; // rotate var lastrotate = 0; // actual transform rotate accumulates or down depending // on direction have been going in. var accumulatedrotation = 0; $('.hovering').mouseenter(function(){ // make sure 'rotate' number not string var rotate = parseint($(this).attr('value'), 10); // rotatealt alternative version of rotate (either >360 or <0) var rotatealt = (lastrotate < 180) ? (rotate - 360) : (360 + rotate); // work out diff value each alt var diffa = rotate - lastrotate; var diffb = rotatealt - lastrotate; // add smaller diff accumulated rotation if (math.abs(diffa) < math.abs(diffb)) accumulatedrotation += diffa; else accumulatedrotation += diffb; william.animate({transform:'r'+accumulatedrotation+',250,250'},300,mina.ease); // remember last value of 'rotate' lastrotate = rotate; });<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Comments
Post a Comment