Animation button, like an ios game center button

Question

I'm trying to make my buttons animated, like buttons in the ios game center. they seem to swing and float around the screen like a bubble. I tried to move my buttons randomly on the screen, forcing them to move along a constant circular path at the same time, but this is not the same effect.

I need a wobble effect. any ideas appreciated

Answer 1

Combining multiple CAKeyframeAnimations will give you the result. You need the position to fit the circle, and one for each scale (x / y) that was slightly different to achieve the wobble effect. See an example:

  UIView * view = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 50, 50)]; view.backgroundColor = [UIColor redColor]; view.layer.cornerRadius = view.frame.size.width/2; [self.view addSubview:view]; //create an animation to follow a circular path CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; //interpolate the movement to be more smooth pathAnimation.calculationMode = kCAAnimationPaced; //apply transformation at the end of animation (not really needed since it runs forever) pathAnimation.fillMode = kCAFillModeForwards; pathAnimation.removedOnCompletion = NO; //run forever pathAnimation.repeatCount = INFINITY; //no ease in/out to have the same speed along the path pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; pathAnimation.duration = 5.0; //The circle to follow will be inside the circleContainer frame. //it should be a frame around the center of your view to animate. //do not make it to large, a width/height of 3-4 will be enough. CGMutablePathRef curvedPath = CGPathCreateMutable(); CGRect circleContainer = CGRectInset(view.frame, 23, 23); CGPathAddEllipseInRect(curvedPath, NULL, circleContainer); //add the path to the animation pathAnimation.path = curvedPath; //release path CGPathRelease(curvedPath); //add animation to the view layer [view.layer addAnimation:pathAnimation forKey:@"myCircleAnimation"]; //create an animation to scale the width of the view CAKeyframeAnimation *scaleX = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.x"]; //set the duration scaleX.duration = 1; //it starts from scale factor 1, scales to 1.05 and back to 1 scaleX.values = @[@1.0, @1.05, @1.0]; //time percentage when the values above will be reached. //ie 1.05 will be reached just as half the duration has passed. scaleX.keyTimes = @[@0.0, @0.5, @1.0]; //keep repeating scaleX.repeatCount = INFINITY; //play animation backwards on repeat (not really needed since it scales back to 1) scaleX.autoreverses = YES; //ease in/out animation for more natural look scaleX.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; //add the animation to the view layer [view.layer addAnimation:scaleX forKey:@"scaleXAnimation"]; //create the height-scale animation just like the width one above //but slightly increased duration so they will not animate synchronously CAKeyframeAnimation *scaleY = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"]; scaleY.duration = 1.5; scaleY.values = @[@1.0, @1.05, @1.0]; scaleY.keyTimes = @[@0.0, @0.5, @1.0]; scaleY.repeatCount = INFINITY; scaleY.autoreverses = YES; scaleX.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [view.layer addAnimation:scaleY forKey:@"scaleYAnimation"];