maxs15 / react-native-spinkit

A collection of animated loading indicators for React Native
MIT License
2.36k stars 300 forks source link

'Circle' type not in center #88

Open xilibro opened 6 years ago

xilibro commented 6 years ago

image image as you can see, not totally in center, how can i fix this issure

xilibro commented 6 years ago

image

xilibro commented 6 years ago

I do not know how to add a new pull request, so i put the solved code here. in animations/RTSpinKitCircleAnimation.m, i changed the following code: `

CGFloat radius = size.width / 2; 
CGFloat circleSize = size.width / 4;
CGFloat circleRadius = circleSize / 2; // added by xilibro 2017-11-09 15:39:59

for (NSInteger i=0; i < 8; i+=1) {
    CALayer *circle = [CALayer layer];

    CGFloat angle = i * M_PI_4; // M_PI_4 = 45°
    CGFloat x = radius + sinf(angle) * radius - circleRadius; // altered by xilibro 2017-11-09 
    CGFloat y = radius - cosf(angle) * radius - circleRadius; // altered by xilibro
   ... ...

` minus circleself's radius solved the issure. RTSpinKitFadingCircleAnimation.m use the same way to solve issure

wumke commented 5 years ago

I also noticed that, only in iOS, the circle is shifted slightly to the right. I used fadingCircleAlt and substracted CGFloat circleRadius = size.width / 16; from x and y of the frame.