Question

我有一个关于iOS Game Center气球菜单的任务。我想知道哪种类型的iOS框架（核心动画??）用于创建这个美妙的菜单。下面的图片描述了我的意思：

气球有柔和的动作，当用户点击其中一个时，会产生疯狂的气球运动效果。任何人都可以提供一些代码示例的链接，这些示例描述了我们如何使类似的东西。或者是否有任何类似的菜单用于一般用途？

谢谢！

Answer 1

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

创建气泡：

为Bubble

创建一个视图

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

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

我创建了一个大小为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图层以移动它或弹回它！

iOS游戏中心气球菜单

1 个答案: