Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animate UIView's frame and corner radius together

So I am trying to make a shrinking/growing circle with a UIView. I am using UIView.animateWithDuration... (blah blah blah) for the frame of the view and CABasicAnimation to animate the view's (layer's) corner radius. Both animate for the correct duration and end at the correct, circular values (corner radius = 1/2 width). The issue is that during the animation, CABasicAnimation and UIView.animateWithDuration seem to have different animation curves. How can I achieve a proper circle-size animation.

If the answer is to use CABAsicAnimation for the farm swell, please explain how to do that.

Thanks!


Code:

This code is in an extension for UIView.

//This is how it's being used to shrink the circle:

circleview.growByPixles(-10, seconds: 0.3, completion: {})
circleview.setCornerRadius(radius:(circleview.bounds.size.width - 10) / 2 seconds: 0.3)

//////

func morphToFrame(frame: CGRect, seconds: Double, completion: () -> ()) {
    UIView.animateWithDuration(seconds,
        animations: {
            self.frame = frame
        },
        completion: { _ in
            completion()
        })
}

//negative integers shrink
func growByPixels(pixels: CGFloat, seconds: Double, completion: () -> ()) {
    var f:CGRect = self.frame

    var newFrame:CGRect = CGRect(x: f.origin.x - pixels/2, y: f.origin.y - pixels/2,  width: f.size.width + pixels, height: f.size.height + pixels)

    self.morphToFrame(newFrame, seconds: seconds, completion: completion)
}

func setCornerRadius(radius: CGFloat, seconds: Double) {

    self.layer.masksToBounds = true

    var animation = CABasicAnimation(keyPath: "cornerRadius")
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    animation.fromValue = NSNumber(float: Float(self.layer.cornerRadius))
    self.layer.cornerRadius = radius
    animation.duration = seconds
    self.layer.addAnimation(animation, forKey: "cornerRadius")
}
like image 863
zrubenst Avatar asked Nov 06 '14 00:11

zrubenst


Video Answer


1 Answers

I resizing my circle views like this:

- (void)resizeCircleView:(CGRect)frame {

    CGRect estimateFrame = frame;
    float duration = 1.0f;

    [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
        [circle setFrame:estimateFrame];
    } completion:nil];

    CGFloat estimateCorner = estimateFrame.size.width / 2;
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animation.fromValue = @(circle.layer.cornerRadius);
    animation.toValue = @(estimateCorner);
    animation.duration = duration;
    [circle.layer setCornerRadius:estimateCorner];
    [circle.layer addAnimation:animation forKey:@"cornerRadius"];
}
like image 110
tier777 Avatar answered Nov 15 '22 09:11

tier777