我正在研究儿童书籍应用程序,并希望动态填充角色对话框的语音泡泡,如附带的屏幕截图所示.屏幕截图来自Cinderella应用程序,它是使用Cocos2D(或3D)开发的.但是,我想使用
objective-c和iOS sdk实现此功能.
一种方法是:
计算给定字体和大小的文本大小(使用NSString方法sizeWithFont:constrainedToSize :),然后绘制一个圆角矩形(使用CALayer)来包围该大小.
对于绘制圆角矩形,请设置具有背景颜色,边框宽度和边框颜色以及颜色半径的CALayer,并将其添加到UIView对象.这将非常容易地产生语音泡沫效果.
现在,我怎么会得到一个指向角色嘴角的角落?如何从角色的嘴里弹出并弹出CALayer,我该如何实现这个动画?我的主要场景(插图)将是一个UIImageview,这个对话弹出窗口应该以动画的方式出现在角色的嘴里,几秒钟后它就会消失,仿佛它会回到角色的嘴里.你的建议将不胜感激.
这是应用程序的视频链接,显示角色对话如何作为语音气泡弹出和输出:http://www.youtube.com/watch?v=umfNJLyrrNg
解决方法
另一种方法是通过使用带有帽子插图的图像.看一下UIImage方法:
resizableImageWithCapInsets:
基本上,您可以创建最小尺寸气泡的图像,并使其无限延伸,同时保持“气泡”边框的外观.
下面的代码指定了在拉伸/调整图像大小时保留顶部,左侧,底部和右侧12个像素的图像:
UIImage *bubble = [[UIImage imageNamed:@"bubble.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(12,12,12)]; UIImageView *imgView = [[[UIImageView alloc] initWithImage:bubble] autorelease]; imgView.frame = CGRectZero;
动画UIImageView的大小变化是免费的:
[UIView animateWithDuration:0.3 animations:^(void) { imgView.frame = CGRectMake(50,50,200,100); } completion:^(BOOL finished) { }];