CODEWITHSUNDEEP
iosiphoneobjective-cuikitcabasicanimation
Chris
Chris

Reputation: 27384

CABasicAnimation originates from top right rather than center

I have a circle that I animate growing outwards and getting bigger. Unfortunately despite me setting the anchorPoint it doesnt animate from the center outwards, it seems to lock position top left. What is going on?

See this image that depicts the circles off center

enter image description here

Code

- (void)setLayerProperties {
    rippleLayer = [[CAShapeLayer alloc] init];
    rippleLayer.fillColor = [UIColor clearColor].CGColor;

    rippleLayer.strokeColor = _Color.CGColor;
    //rippleLayer.contentsGravity = @"center";
    rippleLayer.anchorPoint = CGPointMake(0.5,0.5);
    rippleLayer.bounds = self.bounds;

    rippleLayer.path = bezierPath.CGPath;
    [self.layer addSublayer:rippleLayer];
}

// Now animate the circle outwards
rippleLayer.opacity = 1;
CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
[scale setFromValue:[NSNumber numberWithFloat:1.0f]];
[scale setToValue:[NSNumber numberWithFloat:2.0f]];
[scale setRepeatCount:1];
[scale setDuration:1.0f];
//[scale setRemovedOnCompletion:YES];
[scale setFillMode:kCAFillModeForwards];

[rippleLayer addAnimation:scale forKey:scale.keyPath];

Upvotes: 1

Views: 1478

Answers (1)

dev
dev

Reputation: 11

To scale layer at it's center, you need to set layer's position.This may help you

I want to draw a Smooth animations in iOS using CAPropertyAnimations

define RADIANS(angle) ((angle) / 180.0 * M_PI)

CGPoint testCenter = CGPointMake(144.5, 230.0);
CAShapeLayer *aTestLayer = [CAShapeLayer layer];
aTestLayer.path = [UIBezierPath bezierPathWithArcCenter:**CGPointZero** radius:15.0 startAngle:RADIANS(0) endAngle:RADIANS(360) clockwise:YES].CGPath;
aTestLayer.fillColor = [UIColor clearColor].CGColor;
aTestLayer.strokeColor = [UIColor whiteColor].CGColor;
**aTestLayer.position = testCenter;**
aTestLayer.borderWidth = 2.0;

[self.view.layer addSublayer:aTestLayer];

CABasicAnimation *pulse = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
pulse.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
pulse.duration = 2;
pulse.repeatCount = HUGE_VALF;
pulse.autoreverses = YES;
pulse.fromValue = [NSNumber numberWithFloat:1.0];
pulse.toValue = [NSNumber numberWithFloat:2.0];


[aTestLayer addAnimation:pulse forKey:nil];

Upvotes: 1

Related Questions