How to 360 rotation gauge.

[godind]

Hi,

Not Really an ng-gauge question, but maybe someone knows here. How do you make a smooth full circle SVG amimation transition? If you amimate from say 320 degrees to 10 degrees, it will not go over 0, but rather Go the other way around. How is this done? I see it in action with no h Gauge!

[AndreaAPMS]

same for me will be helpful

[godind]

I found how. You have to use some math. See if degree change is more than 180, if so, check if what way you go over the 0 or 360, then split the animation:

Say from 350 to 10 degrees. Total degree change is 350 - 10 = greater then 180. Animate 350 to 359. Them 0 to 10.

It’s the only way I found. Works well !

[godind]

// Special cases to smooth out passing between 359 to/from 0 // if more than half the circle, it could need to go over the 359 / 0 values if ( Math.abs(diff) > 180 ) { // In what direction are we moving? if (Math.sign(diff) == 1) { if (oldAngle == 359) { // special cases this.oldAppWindAngle = "0"; this.appWindAnimate.nativeElement.beginElement(); } else { this.newAppWindAngle = "359"; this.appWindAnimate.nativeElement.beginElement(); this.oldAppWindAngle = "0"; this.newAppWindAngle = changes.appWindAngle.currentValue.toFixed(0); this.appWindAnimate.nativeElement.beginElement(); } } else { if (oldAngle == 0) { // special cases this.oldAppWindAngle = "359"; this.appWindAnimate.nativeElement.beginElement(); } else { this.newAppWindAngle = "0"; this.appWindAnimate.nativeElement.beginElement(); this.oldAppWindAngle = "359"; this.newAppWindAngle = changes.appWindAngle.currentValue.toFixed(0); this.appWindAnimate.nativeElement.beginElement(); } } } else { this.appWindAnimate.nativeElement.beginElement(); }

[TuShen121]

您的邮件我已收到，谢谢！