最近公司项目需求,要实现一个弹幕的功能,上网搜集了一些资料,简单实现了弹幕的效果,现在将原理以及实现的过程整理一下。
代码参见* https://github.com/gyf1993/owenDanmaku.git
先简单说明一下实现的原理
1.使用UIViewAnimation动画完成弹幕的移动。
2.所有弹幕从出现到完全消失的时间一样,但是弹幕宽度长的移动的总距离要长,所以在屏幕移动的更快。
3.整个过程都是匀速的,所以添加弹幕时只要判断在开始以及结束时弹幕时是否会碰撞即可。
danmakuview构造方法
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor colorWithRed:235/255.0 green:235/255.0 blue:235/255.0 alpha:1];
_channelArray = [NSMutableArray new];
_channelCount = (NSInteger)((SCREEN_HEIGHT - 50)/40);
for (int i =0; i<_channelCount; i++) {
NSNumber *number = [NSNumber numberWithBool:YES];
[_channelArray setObject:number atIndexedSubscript:i];
}
}
return self;
}
弹幕添加方法
- (void)addDanmaku:(NSString *)text
{
NSDictionary *dictAttribute = @{NSFontAttributeName:[UIFont fontWithName:@"Helvetica-Bold" size:14.0]};
CGRect rect = [text boundingRectWithSize:CGSizeMake(MAXFLOAT, 50) options:NSStringDrawingUsesLineFragmentOrigin attributes:dictAttribute context:nil];
CGFloat width = (int)rect.size.width + 1;
UILabel *newBullet = [[UILabel alloc]initWithFrame:CGRectMake(SCREEN_WIDTH, 0, width, 40)];
newBullet.text = text;
newBullet.font = [UIFont fontWithName:@"Helvetica-Bold" size:14.0];
int i = 0;
for (i = 0; i<_channelArray.count; i++) {
NSObject *object = _channelArray[i];
if ([object isKindOfClass:[NSNumber class]]) {
[self addSubview:newBullet];
[_channelArray setObject:newBullet atIndexedSubscript:i];
newBullet.frame = CGRectMake(SCREEN_WIDTH, i * 40, width, 40);
//UIViewAnimationOptionCurveLinear使整个动画过程匀速
[UIView animateWithDuration:DanmakuTime delay:0 options:(UIViewAnimationOptionCurveLinear) animations:^{
newBullet.frame = CGRectMake(0 - width, i * 40,width, 40);
} completion:^(BOOL finished) {
[newBullet removeFromSuperview];
}];
break;
}else if ([object isKindOfClass:[UILabel class]])
{
UILabel *bullet = (UILabel*)object;
if ([self canBulletSendInTheChannel:bullet newBullet:newBullet]) {
[self addSubview:newBullet];
[_channelArray setObject:newBullet atIndexedSubscript:i];
newBullet.frame = CGRectMake(SCREEN_WIDTH, i * 40, width, 40);
[UIView animateWithDuration:DanmakuTime delay:0 options:(UIViewAnimationOptionCurveLinear) animations:^{
newBullet.frame = CGRectMake(0 - width, i * 40,width, 40);
} completion:^(BOOL finished) {
[newBullet removeFromSuperview];
}];
break;
}
}
}
}
判断弹幕是否可以添加方法
- (BOOL)canBulletSendInTheChannel:(UILabel *)bullet newBullet:(UILabel *)newBullet
{
//获取动画中,控件的frame
CGRect rect = [bullet.layer.presentationLayer frame];
if (rect.origin.x>SCREEN_WIDTH - bullet.frame.size.width) {
//弹道当前弹幕还没完全显示在屏幕中,返回NO
return NO;
}else if (rect.size.width == 0)
{
//刚刚添加的控件,有可能取到frame的值全为0,也要返回NO
return NO;
}
else if (bullet.frame.size.width > newBullet.frame.size.width) {
//排除了以上两种情况,比较弹幕的宽度(也就是比较速度),新弹幕宽度小也就是永远追不上上一条弹幕,返回YES
return YES;
}else
{
//time为新弹幕从出现到屏幕最左边的时间(此时弹幕整体都在屏幕内,并不是弹幕消失的时间)
CGFloat time = SCREEN_WIDTH/(SCREEN_WIDTH+newBullet.frame.size.width)*DanmakuTime;
//endX为此时老弹幕的frame的x值
CGFloat endX = rect.origin.x - time/DanmakuTime*(SCREEN_WIDTH + bullet.frame.size.width);
if (endX < -bullet.frame.size.width) {
//若此时老弹幕已经完全从屏幕中消失,返回YES
return YES;
}
}
return NO;
}
至此,一个简单的弹幕效果就实现了。