buttonanimation像ios游戏中心button

我试图让我的buttonanimation像button在iOS游戏中心。 他们似乎像一个泡沫一样在屏幕上摇摆。 我尝试过在屏幕上随意移动我的button,使它们同时在一个不断的环形path中移动,但效果并不相同。

我需要一个摇摆的效果。 任何想法表示赞赏

结合几个CAKeyframeAnimations会给你结果。 你需要一个位置跟随一个圆圈,并为每个规模(x / y)一个时间有点不同,以实现摆动效果。 看看这个例子:

  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's 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's 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"];