Logarithmic scale for objective-c animation

Question

I try to quickly expand the circle for the first 1-2 seconds, and then reduce the speed with which it grows. I thought the logarithmic scale is best suited for this, but I don’t know how to create it. I use the following code to animate a circle:

// Create a view with a corner radius as the circle self.circle = [[UIView alloc] initWithFrame:CGRectMake(currentPos.x, currentPos.y, 10, 10)]; [self.circle.layer setCornerRadius:self.circle.frame.size.width / 2]; [self.circle setBackgroundColor:[UIColor clearColor]]; self.circle.layer.borderColor = [UIColor redColor].CGColor; self.circle.layer.borderWidth = .5f; UIPanGestureRecognizer *move = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)]; [self.circle addGestureRecognizer:move]; [self.view addSubview:self.circle]; [UIView animateWithDuration:5 delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^(void){ // Animate it to double the size const CGFloat scale = 2; [self.circle setTransform:CGAffineTransformMakeScale(scale, scale)]; } completion:nil]; 

Answer 1

The easiest way is to use the built-in animation options, you can set the ease of animation (UIViewAnimationOptionCurveEaseOut)

 [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseOut | UIViewAnimationOptionAllowUserInteraction animations:^(void){ // Animate it to double the size const CGFloat scale = 2; [self.circle setTransform:CGAffineTransformMakeScale(scale, scale)]; } completion:nil]; 

These are the built-in types of lightness:

If you need something else, then you will need to do it yourself, I believe.

Thanks to this post, for your convenience, how do I create a custom attenuation function using Core Animation?

Answer 2

I would use animateKeyframesWithDuration: This allows you to set the scale at different points during the animation (therefore, it can be non-linear). You do this with separate calls to addKeyFrameWithRelativeStartTime :. For instance:

 double total_duration = 5; [UIView animateKeyframesWithDuration:total_duration delay:0 options:UIViewKeyframeAnimationOptionAllowUserInteraction animations:^(void){ const CGFloat final_scale = 2; double acceleration = 1000; // the bigger this number, the bigger the initial acceleration double multiplier = (final_scale - 1) / (logf(1+ (1/acceleration)) - logf(1/acceleration)); double addon = 1 - multiplier * logf(1/acceleration); double segments = 20; for (int segment = 0 ; segment < segments ; segment++) { [UIView addKeyframeWithRelativeStartTime:(segment/segments) relativeDuration:(1.0/segments) animations:^(void){ double scale = multiplier * logf(segment/segments + (1/acceleration)) + addon; self.circle.transform = CGAffineTransformMakeScale(scale,scale); }]; } } completion:nil]; 

reaches roughly what you want (although forgiving dirty maths, perhaps it will be easier)!

Answer 3

I don’t think that viewing animations allow you to use any curves other than linear, and “lightness” style animations.

As I recall, Core Animation allows you to define a custom synchronization function using a cubic bezier curve. You should be able to create a Bezier curve that approximates a logarithmic curve.

Refer to the CAMediaTimingFunction docs for information on creating custom synchronization functions for Core Animation methods.

We will warn you that Core Animation is a pretty attractive topic. Basic animation techniques are not as easy to use as UIView animations, such as the code you posted.