iOS游戏中心baloons菜单

我有一个关于iOS游戏中心baloons菜单的任务。 我想知道哪种types的iOS框架（核心animation??）用于创build这个美妙的菜单。 这里是下面的图像来描述我的意思是：

气球运动柔和，当用户点击其中一个时，就会有疯狂的气球运动效果。 任何人都可以提供一些链接到一些代码示例，它描述了我们可以做出类似的东西。 或者是否有任何一种类似的菜单一般用法？

谢谢！

Answer 1

为了获得泡泡类animation，我们不需要核心animation。我们将使用核心animation来移动泡泡并弹跳泡泡。

创build泡泡：

为Bubble创build一个视图

BubbleView.h和.m

@interface BubbleView : UIView @property (assign) CGFloat top; @property (assign) CGFloat bot; @property (assign) CGFloat leftt; @property (assign) CGFloat rightt; @end 

这些作为贝塞尔path的四个控制点。 我们将修改这四点来获得泡沫效应。

 @implementation BubbleView // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. - (void)drawRect:(CGRect)rect { // Drawing code [self drawBubbleWithFrame:rect top:_top bot:_bot leftt:_leftt rightt:_rightt]; } - (void)drawBubbleWithFrame: (CGRect)frame top: (CGFloat)top bot: (CGFloat)bot leftt: (CGFloat)leftt rightt: (CGFloat)rightt { //// General Declarations CGContextRef context = UIGraphicsGetCurrentContext(); //// Color Declarations UIColor* color2 = [UIColor colorWithRed: 0.019 green: 0.551 blue: 1 alpha: 1]; //// Oval Drawing CGContextSaveGState(context); CGContextTranslateCTM(context, 6, 0); UIBezierPath* ovalPath = [UIBezierPath bezierPath]; [ovalPath moveToPoint: CGPointMake(rightt, 40)]; [ovalPath addCurveToPoint: CGPointMake(bot, 80) controlPoint1: CGPointMake(rightt, 62.09) controlPoint2: CGPointMake(bot + 22.09, 80)]; [ovalPath addCurveToPoint: CGPointMake(leftt, 40) controlPoint1: CGPointMake(bot - 22.09, 80) controlPoint2: CGPointMake(leftt, 62.09)]; [ovalPath addCurveToPoint: CGPointMake(top, 0) controlPoint1: CGPointMake(leftt, 17.91) controlPoint2: CGPointMake(top - 22.09, 0)]; [ovalPath addCurveToPoint: CGPointMake(rightt, 40) controlPoint1: CGPointMake(top + 22.09, 0) controlPoint2: CGPointMake(rightt, 17.91)]; [ovalPath closePath]; [color2 setFill]; [ovalPath fill]; CGContextRestoreGState(context); } @end 

现在让我们把这个添加到视图中：

我创build了一个大小为80×80的圆，因此他们的控制点是40,40,0,80

  -(void)viewDidAppear:(BOOL)animated{ [super viewDidAppear:animated]; _bubView=[[BubbleView alloc]initWithFrame:CGRectMake(20, 40, 150, 150)]; _bubView.backgroundColor=[UIColor clearColor]; _bubView.top=40; _bubView.bot=40; _bubView.leftt=0; _bubView.rightt=80; [self.view addSubview:_bubView]; } 

它看起来像这样：

正如你所看到的，泡沫没有震动，看起来就像一个圆圈。

让我们动摇吧！

 -(void)viewDidAppear:(BOOL)animated{ [super viewDidAppear:animated]; _bubView=[[BubbleView alloc]initWithFrame:CGRectMake(20, 40, 150, 150)]; _bubView.backgroundColor=[UIColor clearColor]; _bubView.top=40; _bubView.bot=40; _bubView.leftt=0; _bubView.rightt=80; [self.view addSubview:_bubView]; [NSTimer scheduledTimerWithTimeInterval:0.3 target:self selector:@selector(applyRandomMoves) userInfo:nil repeats:YES]; } -(void)applyRandomMoves{ int toprandNum = rand() % (45 - 35) + 35; //create the random number. int botrandNum = rand() % (45 - 35) + 35; int leftrandNum = rand() % (0 - -5) + -5; int rightrandNum = rand() % (85 - 75) + 75; _bubView.top=toprandNum; _bubView.bot=botrandNum; _bubView.leftt=leftrandNum; _bubView.rightt=rightrandNum; [_bubView setNeedsDisplay]; } 

现在看起来像这样：

您可以添加一些阴影，使气泡更逼真：让我们添加一些代码drawBubbleWithFrame

 - (void)drawBubbleWithFrame: (CGRect)frame top: (CGFloat)top bot: (CGFloat)bot leftt: (CGFloat)leftt rightt: (CGFloat)rightt { //// General Declarations CGContextRef context = UIGraphicsGetCurrentContext(); //// Color Declarations UIColor* color2 = [UIColor colorWithRed: 0.019 green: 0.551 blue: 1 alpha: 1]; UIColor* color3 = [UIColor colorWithRed: 0.317 green: 0.47 blue: 0.863 alpha: 1]; UIColor* shadowColor = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 1]; UIColor* shadow2Color = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 1]; //// Shadow Declarations NSShadow* shadow = [[NSShadow alloc] init]; [shadow setShadowColor: shadowColor]; [shadow setShadowOffset: CGSizeMake(0.1, -0.1)]; [shadow setShadowBlurRadius: 12]; NSShadow* shadow2 = [[NSShadow alloc] init]; [shadow2 setShadowColor: shadow2Color]; [shadow2 setShadowOffset: CGSizeMake(4.1, 2.1)]; [shadow2 setShadowBlurRadius: 5]; NSShadow* shadow3 = [[NSShadow alloc] init]; [shadow3 setShadowColor: UIColor.blackColor]; [shadow3 setShadowOffset: CGSizeMake(0.1, 1.1)]; [shadow3 setShadowBlurRadius: 5]; //// Oval Drawing CGContextSaveGState(context); CGContextTranslateCTM(context, 6, 2); UIBezierPath* ovalPath = [UIBezierPath bezierPath]; [ovalPath moveToPoint: CGPointMake(rightt, 40)]; [ovalPath addCurveToPoint: CGPointMake(bot, 80) controlPoint1: CGPointMake(rightt, 62.09) controlPoint2: CGPointMake(bot + 22.09, 80)]; [ovalPath addCurveToPoint: CGPointMake(leftt, 40) controlPoint1: CGPointMake(bot - 22.09, 80) controlPoint2: CGPointMake(leftt, 62.09)]; [ovalPath addCurveToPoint: CGPointMake(top, 0) controlPoint1: CGPointMake(leftt, 17.91) controlPoint2: CGPointMake(top - 22.09, 0)]; [ovalPath addCurveToPoint: CGPointMake(rightt, 40) controlPoint1: CGPointMake(top + 22.09, 0) controlPoint2: CGPointMake(rightt, 17.91)]; [ovalPath closePath]; CGContextSaveGState(context); CGContextSetShadowWithColor(context, shadow3.shadowOffset, shadow3.shadowBlurRadius, [shadow3.shadowColor CGColor]); [color2 setFill]; [ovalPath fill]; ////// Oval Inner Shadow CGContextSaveGState(context); UIRectClip(ovalPath.bounds); CGContextSetShadowWithColor(context, CGSizeZero, 0, NULL); CGContextSetAlpha(context, CGColorGetAlpha([shadow2.shadowColor CGColor])); CGContextBeginTransparencyLayer(context, NULL); { UIColor* opaqueShadow = [shadow2.shadowColor colorWithAlphaComponent: 1]; CGContextSetShadowWithColor(context, shadow2.shadowOffset, shadow2.shadowBlurRadius, [opaqueShadow CGColor]); CGContextSetBlendMode(context, kCGBlendModeSourceOut); CGContextBeginTransparencyLayer(context, NULL); [opaqueShadow setFill]; [ovalPath fill]; CGContextEndTransparencyLayer(context); } CGContextEndTransparencyLayer(context); CGContextRestoreGState(context); CGContextRestoreGState(context); CGContextSaveGState(context); CGContextSetShadowWithColor(context, shadow.shadowOffset, shadow.shadowBlurRadius, [shadow.shadowColor CGColor]); [color3 setStroke]; ovalPath.lineWidth = 1; [ovalPath stroke]; CGContextRestoreGState(context); CGContextRestoreGState(context); } 

这产生了这样的效果：

您可以操纵颜色，阴影，形状，模糊，气泡外部path等气泡属性，并根据需要为它们设置animation。

您稍后可以将animation添加到_bubView图层来移动或反弹它！