iOS Game Center baloons菜单

Question

我有一个关于iOS Game Center baloons菜单的任务。我想知道哪种类型的iOS框架（核心动画??）用于创建这个美妙的菜单。以下是图像下面来描绘我的意思正是：

Baloons具有柔软运动，当用户点击其中的一个有疯狂baloons运动效果。任何人都可以提供一些链接到一些代码示例，它描述了我们如何做出类似的东西。或者是否有一些类似的菜单用于一般用途？

谢谢！

Answer 1

对于获取动画的泡泡类型，我们不需要核心动画。我们将使用核心动画来移动泡泡并弹跳泡泡。

创建气泡：

创建气泡的图

BubbleView.h和.M

@interface BubbleView : UIView 

@property (assign) CGFloat top; 
@property (assign) CGFloat bot; 
@property (assign) CGFloat leftt; 
@property (assign) CGFloat rightt; 


@end 

这些充当用于贝塞尔四个控制点路径。我们将修改这四点来获得泡沫效应。

@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 

现在，让我们将其添加到视图：

我创造了大小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]; 

} 

它看起来像这样：

正如你所看到的泡沫是不是SHAK它看起来只是一个圆圈。

让我们动摇吧！

-(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); 
} 

这给出的效果如下：

可以游乐场等颜色，阴影，形状，模糊，气泡外的路径等泡特性，并且它们的动画所有基于所述要求。

您可以稍后将动画添加到_bubView图层以将其移动或反弹！