iOS Game Center baloons菜单
我有一个关于iOS Game Center baloons菜单的任务。我想知道哪种类型的iOS框架(核心动画??)用于创建这个美妙的菜单。以下是图像下面来描绘我的意思正是:iOS Game Center baloons菜单
Baloons具有柔软运动,当用户点击其中的一个有疯狂baloons运动效果。任何人都可以提供一些链接到一些代码示例,它描述了我们如何做出类似的东西。或者是否有一些类似的菜单用于一般用途?
谢谢!
对于获取动画的泡泡类型,我们不需要核心动画。我们将使用核心动画来移动泡泡并弹跳泡泡。
创建气泡:
创建气泡的图
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图层以将其移动或反弹!
非常感谢这非常详细和描述性的答案。不管怎样,我都没有得到同样的气球和轻拍动作。我们如何才能像iOS游戏中心一样获得同样的气球。我们是否需要气球图像背景或纯绘图代码是否足以绘制相同的气球。气球必须像Game Center一样好。而且新闻动画也很重要。我很愿意检查这个答案,但我没有得到绝对的答案。无论如何tahnks很多! –
你可以使用类似的背景图片,并为我的答案中提到的圆圈设置背景。是的,这些动画是可能的。这只是让这个泡泡与我在这里提到的动画一起震动。对于这种振动,你可以使用CAKeyFrameAnimation。 –
你也可以在GitHub或CocoaControls上获得其他类型的菜单 – Simmy
我认为核心动画就足够了。对于泡泡效果,我认为它是一条圆形的贝塞尔路径,并且正在为其循环路径设置动画,并且对于反弹和移动,CAKeyFrameAnimation会很好用。 –