iOS游戏中心气球菜单

Question

我有一个关于iOS游戏中心气球菜单的问题。我想知道哪种iOS框架(核心动画？？)是用来创建这个美妙的菜单的。下面的图片准确地描述了我的意思：

​

​

气球有柔和的运动，当用户点击其中之一时，会有疯狂的气球运动效果。谁能提供一些链接到一些代码示例，这些示例描述了我们如何制作类似的东西。或者有没有什么类似的菜单供一般人使用？

谢谢!

Answer 1

为了获得气泡类型的动画，我们不需要核心animation.We将使用核心动画来移动气泡和弹跳气泡。

创建气泡的：

为编号创建视图

BubbleView.h和.m

@interface BubbleView : UIView

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


@end

这些点用作bezier路径的四个控制点。我们将修改这四个点以获得气泡效果。

@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

现在，让我们将以下内容添加到视图中：

我创建了一个大小为80x80的圆，因此它们的控制点是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);
}

这会产生这样的效果：

​

​

您可以操控气泡属性，如颜色，阴影，形状，模糊，气泡外部路径等，并根据需要将它们全部动画。

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