iOS Game Centerのバルーンメニュー

Question

iOS Game Centerのバルーンメニューに関する1つの質問があります。私はこの素晴らしいメニューの作成にどのような種類のiOSフレームワーク（Core animation ??）が使用されているのだろうかと思っています。ここで私は正確に何を意味するかを描写するには、以下の画像は、次のとおりです。

風船は、柔らかい動きを持っており、ユーザーはそれらの一つにタップしたときに狂気の風船モーション効果があります。誰かが類似のものを作る方法を記述したコード例へのリンクを誰かが提供することはできますか？または、一般的な使用のための類似のメニューのどこかがありますか？

ありがとうございます！

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 

これらは、ベジェのための4つの制御点としての役割を果たすパス。バブル効果を得るためにこれらの4つの点を修正します。

@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レイヤーに追加して移動したり、バウンスすることができます。